/*STYLING FOR SECTIONS*/
html{
    font-size: 18px;/*set the base font size to be used*/
    color: #CFDFE6;
    height:100%;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Fredoka", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

body{
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background-color: white;
}

nav{/*Make size adjustments for mobile*/
    background-image: url("../images/nav_bg.png");

    background-position: center; /* Center the image */
    background-repeat: repeat-x; /* Do not repeat the image */

    position: fixed;
    top: 0;
}

hr{
    border-color: #FFFFFF;
    border-style: groove;
}

footer{
    background-color: black;
    color: white;

    font-family: 'Fredoka', sans-serif;
    font-weight: 300;
}

footer a{
    background-color: black;
    color: white;
}


/*STYLING FOR TEXT CONTAINERS*/
a{
    text-decoration: underline;
    
}

a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

/*STYLING FOR CLASSES*/
.float_img_clear{
    clear: both;
}

.background-light{
    color: #151F24;
    background-color: #FFFFFF;
    width: 100%;
    padding-bottom: 50px;
    font-weight: 600;
    min-height: 40vh;
    text-align: center;
}

.background-dark{
    color: #f0f0f0;
    background-color: #000000;
    width: 100%;
    padding-bottom: 50px;
    min-height: 40vh;
    text-align: center;
}

.background-dark::before{
    display: block; 
    content: " "; 
    height: 75px; 
    visibility: hidden; 
    pointer-events: none;
}

.background-light::before{
    display: block; 
    content: " ";  
    height: 75px; 
    visibility: hidden; 
    pointer-events: none;
}

.background-dark a{
    text-decoration: underline;
    color: white;
}

.background-light a{
    text-decoration: underline;
    color: black;
}

/*STYLING ADJUSTMENTS*/
.content-padding{
    padding-left: 5%;
    padding-right: 5%;
}

.edu-image{
    width: 12%;
    height: auto;
    float: left;
    padding-right: 2%;
}

.proj-group{
    text-align: center;
}

.darken-bg{
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
}

.viewport-top-pad-25{
    margin-top: 25vh;
}

.viewport-top-pad-15{
    margin-top: 15vh;
}

.viewport-top-pad-10{
    margin-top: 10vh;
}

.no-underline{
    text-decoration: none;
}

.projects{
    width: 100%;
}

.projects img{
    height: 300px;
}

.project-click{
    height: auto;
    float: left;
    padding: 10px;
}

.project-links-container{
    height: 250px;
    width: 100%;
}

.spacer{
    width: 100%;
    height: 100px;
}

.titlefont{
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
}

.sfw-title{
    font-family: 'Fredoka', sans-serif;
}

.bold{
    font-weight: bolder;
}

.team-profile-card{
    width: 100%;
    height: auto;
    align-content: center;
}

/*STYLING FOR IDS*/
#content img{
    border: 1px solid;
    border-color: #57A0B3;
}

#intro_section{/*Move to desktop and change for mobile*/
    background-color: #FFFFFF;
    background-repeat: no-repeat; /* Do not repeat the image */
    width: 100%;
    font-family: 'Press Start 2P', sans-serif;

    text-align: center;
}

#intro_titles{
    text-align: center;
    padding-top: 25px;
    padding-bottom: 25px;

    color: #FFFFFF;
}

#youtube{
    width: 100%;
    text-align: center;
}

#writing img{
    height: 300px;
}

#rules{
    width: 100%;
    height: auto;
}

#rules img{
    width: 100%;
}

@media only screen and (orientation: landscape){
    #intro_section{
        background-size: cover;
        background-position: 0%;
    }

    #splash_image{
        background-size: cover;
        background-position: 0%;
    }
}

@media only screen and (orientation: portrait){
    #intro_section{
        background-size: cover;
        background-position: 50%;
    }

    #splash_image{
        background-size: cover;
        background-position: 50%;
    }
}