@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --orange: #ffa500;
    --gold: gold;
    --light: #fff;
    --dark: #555;
    --darker: #222;
    --gray: #EFEFEF;
    --dark-gray: #D9D9D9;

    --blue: blue;
    --bg-color: linear-gradient(to bottom right, var(--gold),var(--orange));

    --shadow: 0px 4px 6px var(--dark);
}

body{
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background-color: var(--gray);
    color: var(--darker);
}


/* ====================== GLOBAL STYLING ======================== */

.sub-header{
    text-align: center;
    color: var(--orange);
}

.input label{
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--dark);
}

.input input{
    width: 100%;
    border:none;
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 30px;
    background-color: var(--dark-gray);
    font-size: 17px;
    outline: none;
    font-weight: bold;
    color: var(--darker);
}

.input input::placeholder{
    color: var(--light);
}


a{
    color: var(--blue);
    font-weight: bold;
    text-decoration: none;
}

.main-section{
    padding-block:100px;
}