html {
    height: 100vh;
    width: 100vw;
}

body {
    font-family: 'Urbanist', 'Arial Narrow', Arial, sans-serif;
    background: linear-gradient(#16324F, #F4B942);
    background-image: url("../_images/21x9WorkStationXL.png");
    background-position: right bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/*--Start Font Families--------*/

.geom-700 {
  font-family: 'Geom', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.holtwood-one-sc-regular {
  font-family: 'Holtwood One SC', serif;
  font-weight: 400;
  font-style: normal;
}

.urbanist-600 {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.armata-regular {
  font-family: "Armata", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-900 {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

/*--End Font Families--------*/

/*-- HEADER ----------------------*/
    
header {
    text-align: right;
    color: #F8F5F0;
    letter-spacing: .75rem;
    font-variant: small-caps;
    padding: 2vh 0;
}

header h1 {
    font-size: clamp(28px,7vw, 54px);
    margin: 4vh 2vw;
    font-weight: bold;

}

header h2 {
    font-size: clamp(14px,4vw, 28px);
    margin-right: 2vw;
}

/*-- NAV ----------------------*/

nav {
    text-align: center;
}

nav ul {
    list-style: none;
}

nav ul li {
    width: 20vw;
    display: inline-block;
    text-align: left;
    transition: 1s ease;
}

nav ul li:hover {
    background-color: #F4B942;
}

nav ul li a {
    color: #F8F5F0;
    margin-left: 1vh;
    font-size: clamp(10px, 3vw, 20px);
    text-decoration: none;
    letter-spacing: 1vw;
    transition: 1s ease;
    line-height: 4vh;
}

nav ul li a:hover {
    color: #061a33;
}

/*-- mainContainer ----------------------*/

#mainContainer {
    color:  #F8F5F0;
    height: 60vh;
    text-align: right;
    width: 80vw;
}
 
#mainContainer h2 {
    display:flex;
    text-align: left;
    font-size: clamp(75px, 10vw, 200px);
    letter-spacing: 2vw;
    margin-left:1vw;
    margin-top: 0;
}

/*-- FOOTER ----------------------*/

footer {
    position: fixed;
    padding-bottom: 4vh;
    bottom: 0;
    left: 0;
    text-align: left;
    font-variant: small-caps;
    color: #061a33;
    width: 100vw;
    display: block;
}

footer h3, footer p {
    letter-spacing: .5vw;
    margin-left: 2vw;
    display: block;
    font-weight: bold;
}

footer h3 {
    font-size: clamp(20px, 6vw, 40px);
    margin-bottom: 2vh;
}

footer p {
    font-size: clamp(12px, 4vw, 24px);
}

/*--MEDIA QUERIES--------------------*/

@media screen and (max-width: 1500px) {

    footer h3, footer p {
        color: #F8F5F0;
    }
    
}

@media screen and (max-height: 800px) {
    
    footer, footer h3, footer p {
        display: none;

    }

}
@media screen and (max-width: 800px) {

    header, header h1, header h2 {
        text-align: center;
    }
    
    footer, footer h3, footer p {
        display: none;
    }
}

@media screen and (max-width: 600px) {

    #mainContainer {
        width: 100vw;
        margin-top:5vh;
    }
    
    #mainContainer h2 {
        text-align: center;
    }
}