@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;900&display=swap');



:root{
    --txt:          #A0A0A0;
    --pc-lightest:  #538FA6;
    --pc-lighter:   #337690;
    --pc-light:     #196785;
    --pc:           #0E506A;
    --pc-dark:      #033C51;
    --cc-light:     #FFBF7A; 
    --cc:           #E59B4B; 
    --cc-dark:      #D47E20;
    --cc-darker:    #A95F0F;
    --cc-darkest:   #824300;
}
*{
    transition: ease-in-out 200ms;
    margin: 0px;
    padding: 0px;
}


body{
    font-family: Poppins, Arial, sans-serif;
    height: 100vh;
}


nav{
    background: #303030;
    height: 70px;
}

img{
    display: block;
}

.logo{
height: 48px;
margin: 11px 15px 0px;
float: left;

}

nav ul{
    list-style: none;
    display: inline;
}

nav li{
    display: inline;
    padding-top: 22px;
    float: right;
}

nav li a{
    text-decoration: none;
    color: var(--txt);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    padding: 25px 40px;
}

nav .active{
    background-color: var(--pc);
    color: var(--cc);
}

nav li a:hover{
    background-color: var(--cc);
    color: var(--pc-light);
}

main{
    width: 70%;
    margin: 0 auto;
    background-color: var(--cc-light);
    text-align: center;
    height: 90%;
}

h1, h3{
    color: var(--pc-dark);
    margin-top: 1em;
}

h1:first-of-type{
    margin-top: 0;
}

input,
textarea{
    background-color: var(--pc-lightest);
    border: 3px solid var(--pc-light);
    border-radius: 0.6em;
    padding: 8px;
    font-family: inherit;
}

textarea{
    height: 7.5em;
    width: 70%;
}

button{
    font-size: 1rem;
    padding: .8em 2.5em;
    margin-top: 1em;
    background-color: var(--pc-dark);
    font-weight: bold;
    color: var(--cc);
    border: none;
    border-radius: 10em;
}

button:hover{
    background-color: var(--pc-light);
}

button:active{
    color:black;
    background-color: white;
}

.bold{
    font-weight: bold;
}