:root{
 --main: #fffff0;
 --mainDark:#000000;
 --trans: transparent;
 --accent: #ED9B40;
 --inverseAccent: #1264BF;

}


body{
            font-family: "Oswald", sans-serif;
            color: var(--main);
            margin: 0;
}

p{
    margin: 1px;
    user-select: none;
}

h1{
    user-select: none;
}
h2{
    user-select: none;
}

a{
    text-decoration: none;
    color: inherit;
}

li{
    list-style-type: none;
}

a:visited{
    color: inherit;
}

.logoContainer{
display: flex;
flex-direction: column;
gap: 0px;
                margin: 0px;
}

.headerContainer{
    margin: 10PX;
                    display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
}

.headerLogo{
color: var(--accent);
    padding-left: 50px;
font-size: 2em;
margin-bottom: 0;
margin-top: 0;
text-align: center;
}

.headerSub{
font-size: 1em;
    padding-left: 50px;
        margin-top: 0;
        text-align: center;
}

.headerButton{
background: none;
border: none;
    padding-right: 50px;
}

.headerButton img{
height: 35px;
}

            .mainContainer{
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;

                
            }



.container{           
    
    text-align: center;
            width: 100%;
            height: 35em;
            position: sticky;
            top: 0;
}

.container2{           
    
    text-align: center;
            width: 100%;
            height: 25em;
            position: sticky;
}


            .imgContainer{
            background-attachment: fixed;
            height: 100%;
            background-size: cover;
            padding: 0px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            }

            .imgContainer::after{
content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
            }

            .header{
                top: 0;
                position: sticky;
                background-color: var(--mainDark);
                z-index: 1;
                padding: 10px;

            }

.projectText{
font-size: 4em;
text-transform: uppercase;
margin: 25px;
z-index: 2;
}

.projectButton{
background: none;
border: var(--main) solid 2px;
color: var(--main);
font-family: "Oswald", sans-serif;
font-size: 1.2em;
padding: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
border-radius: 0.5em;
text-transform: uppercase;
cursor: pointer;
z-index: 2;
}

.projectButton:hover{
background: var(--main);
border: var(--main) solid 2px;
color: var(--inverseAccent);
}

.footer{
display: block;
background-color: var(--mainDark);
justify-content: center;
align-content: center;
text-align: center;
padding: 15px;
font-weight: 200;
}

.footerContainer{
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 20px;
}

.footerLink:hover{
    color: var(--accent);
}


@media (max-width: 850px) {


.headerLogo{
    padding-left: 0px;

}
.headerButton{
    padding-right: 0px;

}

.headerSub{
font-size: 1em;
    padding-left: 0px;
}
.projectButton{
display: none;

}

.container {
    height: 30em;
}

.projectText{
font-size: 3em;

}

}

@media (max-width: 650px) {
.projectText{
font-size: 2.5em;

}

}