html {

    scroll-behavior: smooth;

}



body {

    width: 100vw;
    /* max-width: 100vh; */
    margin: 0;

    padding: 0;

    overflow-x: hidden;



    font-family: Muli, sans-serif;

    font-size: 16px;

    background-color: rgb(0, 0, 0);

}



h1 {

    font-family: "Space Mono", monospace;

    font-size: 46px;

    margin: 0;

}



h2 {

    font-family: "Space Mono", monospace;

    font-size: 30px;

}

@media only screen and (max-width: 1000px) {
    h1 {
        font-size: x-large;
    }

    h2 {
        font-size: large;
    }
}

a {

    font-family: Muli, sans-serif;

    color: white;

    text-decoration: none;

}

/* START landing page and title */





.full-landing-img {

    z-index: -1;

    position: relative;

    display: block;

    

    /* parallax effect */

    background-image: url(cosmic-cliffs-min.png); /*fallback*/

    background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(255,0,0,0)), url(cosmic-cliffs-min.png);

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    

    width: 100%;

    height: 100vh;

    margin: auto;

    padding: 0;

}

.logo-top-center {
    position: fixed;
    z-index: -1;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);

    max-width: 300px;
  }



#title-box {

    position: fixed;

    top: 50%;

    left: 50%;

    width: 30%;
    min-width: 300px;
    transform: translate(-50%, -50%);


    opacity: 1;


    height: fit-content;

    padding: 0;


    

    text-align: center;

    color: white;



}



#title-box > p {

    border-top: 5px solid rgb(158, 58, 0);

    padding-top: 3%;

    margin: 0;



}




.info-popup-container {
    
    z-index: 0;
    
    position: fixed;

    bottom: 10%;
    
    right: 50px;
    
    display: flex;
    
    flex-direction: row;
    
    flex-wrap: nowrap;
    
    justify-content: flex-end;
    
    
    
    width: 40%;
    
    height: auto;
    
}



.info-popup-container>*:first-child {

    width: 40%;

    height: auto;

    padding: 1%;
    
    
    
    text-align: right;
    
    color: white;
    
    transition: .5s;
    
    
    
}



.info-popup-container:hover > div {
    
    background-color: rgba(158, 58, 0, 1);
    
} 



.info-icon {

    background-image: url(https://img.icons8.com/wired/128/FFFFFF/question-mark.png);
    
    background-size: contain;
    
    background-repeat: no-repeat;
    
}


@media only screen and (max-width: 1000px) {
    .info-popup-container {
       display: none;
    }
}



/* END landing page and title */



/*START Bottom navigation bar */



.bottom-nav-bar {

    z-index: 1;

    position: fixed;

    bottom: 0;

    

    display: flex;

    flex-direction: row;

    justify-content: center;



    width: 100%;

    height: 3%;

    min-height: 50px;

    margin:auto;

    background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0,0,0,1) 90%);

}



.bottom-nav-bar > div {

    width: 50%;

    padding-top: 15px;

    text-align: center;

    color: white;

}



/* force link to be clickable on the whole div */

.bottom-nav-bar > div > a {

    display: block;

    position: relative;

    top: -15px;

    left: 0;

    padding-top: 15px;

    width: 100%;

    height: 150%;

}



.nav-button {

    background-color: rgb(158, 58, 0);

    border-right: 1px solid black;

    transition: background-color .4s, border-bottom .2s;

}

.nav-button:hover {

    background: linear-gradient(to top, rgba(158, 58, 0, 0.75), rgba(0,0,0,1));

    border-bottom: 3px solid white;

}



/*END Bottom navigation bar */



/* START middle content section/explanatory */



.secondary-container {

    margin: 0;

    height: 100vh;

    padding: 1% 0 5% 0 ;

    background-color: black;

    background-image: url(container-background.png);

    background-repeat: no-repeat;

    background-size: cover;

}





#secondary-title-box {

    position: relative;
    top: 6%;
    margin: auto;



    opacity: 1;

    width: fit-content;
    max-width: 90vw;

    height: fit-content;

    padding: 0;

    

    text-align: center;

    color: white;

    border-bottom: 5px solid rgb(158, 58, 0);

}



#content-container {

    position: relative;

    top: 20%;



    padding-bottom: 2%;

    height: fit-content;

    border-radius: 15px;



}



.content-box {

    position: relative;

    

    width: 73%;

    padding: 1%;

    margin: 3% auto;

    

    text-align: center;

    background: rgb(158, 58, 0);

    /* box-shadow: 0px 3px 5px #aaaaaa; */

    /* border-right: 5px white solid;

    border-left: 5px white solid; */

    color: white;

    border-radius: 15px;



}



.content-box-left{

    position: relative;

    

    width: 60%;

    padding: .7%;

    margin: 3% auto;

    

    text-align: center;

    background: rgb(158, 58, 0, .65);

    /* box-shadow: 0px 3px 5px #aaaaaa; */

    /* border-left: 5px white solid;

    border-bottom: 5px white solid; */

    color: white;

    border-radius: 15px;



}



.content-box-right {

    position: relative;

    

    width: 53%;

    padding: .3%;

    margin: 3% auto;

    

    text-align: center;

    background: rgb(158, 58, 0, .4);

    /* box-shadow: 0px 3px 5px #aaaaaa; */

    /* border-left: 5px white solid;

    border-bottom: 5px white solid; */

    color: white;

    border-radius: 15px;



}



.content-box-justify {

    position: relative;

    

    width: fit-content;

    padding: .3% 2%;

    margin: 3% auto;

    

    text-align: justify;

    background: rgb(158, 58, 0, .6);

    /* box-shadow: 0px 3px 5px #aaaaaa; */

    /* border-left: 5px white solid;

    border-bottom: 5px white solid; */

    color: white;

    border-radius: 15px;



}

@media only screen and (max-width: 1000px) {
    .content-box-justify {
        width: 80%;
    }
}

/* END middle content section/explanatory */



/* START trusted resources section */



.full-page-content-img {

    z-index: 0;

    position: relative;



    /* paralax effect */

    background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(255,0,0,0)), url(quad-galaxy-min.jpg); /*fallback*/

    background-attachment: fixed;

    background-position: center;

    background-repeat:repeat-y;

    background-size: cover;

    

    width: 100%;

    height: 100vh;

    margin: auto;

    padding: 0;

}



.tertiary-title {

    position: relative;
    top: 10%;

    margin: auto;



    opacity: 1;

    width: 300px;
    max-width: 90vw;

    height: fit-content;

    padding: 0;

    

    text-align: center;

    color: white;



}



.tertiary-title > p {

    border-top: 5px solid rgb(158, 58, 0);

    padding-top: 3%;

    margin: 0;



}



.tertiary-container {

    position: relative;
    top: 20vh;
    margin: auto;


    width: 100%;

    display: flex;

    flex-flow: row wrap;

    justify-content: center;

    align-items: baseline;



    

}



.tertiary-container > div {

    position: relative;  

    min-width: 300px;

    min-height: 300px;

    background-color: rgba(158, 58, 0, 0.75);

    text-align: center;

    color: white;

}



.resource-box {

    cursor: pointer;

    transition: background-color .4s, border-bottom .2s;

}



.resource-box:hover, .resource-box:focus {

    background-color: rgb(158, 58, 0);

    border-bottom: 5px solid white;

}



/* START dropdown menus */



/* Dropdown Content (Hidden by Default) */

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f1f1f1;

    min-width: 100%;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

    z-index: 1;

  }

  

  /* Links inside the dropdown */

  .dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;
    border-bottom: 1px solid rgba(173, 173, 173, 0.26);

  }

  

  /* Change color of dropdown links on hover */

  .dropdown-content a:hover {background-color: #ddd}

  

  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

  .show {

    display:block;

}



  /* END dropdown menus */

@media only screen and (max-width: 500px) {
    
    .tertiary-container{
        flex-direction: column;
    }
    .tertiary-container > div {
        width: 100vw;
        background-color: rgb(158, 58, 0);
        border-bottom: 5px solid white;
        flex-shrink: 100;
        
    }

    /* .resource-box {
        max-height: fit-content;
    } */
}

/* END trusted resources section */



.quaternary-container {

    margin: auto;
    width: 100vw;
    height: fit-content;

    padding: 1% 0 5% 0 ;

    background: rgb(158, 58, 0);

    background-image: url(container-background.png);

    background-repeat: no-repeat;

    background-size: cover;

    /* background-position: right bottom; */

}



#quaternary-title {

    position: relative;
    top: 10%;

    margin: auto;



    opacity: 1;

    width: 300px;
    max-width: 90vw;
    height: fit-content;

    padding: 0;

    margin: auto;

    

    text-align: center;

    color: white;



}



#quaternary-title> p {

    border-top: 5px solid rgb(0, 0, 0);

    padding-top: 3%;

    margin: 0;



}



#quaternary-flex-container {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    

    width: 60%;

    min-width: 400px;

    height: fit-content;

    min-height: 600px;

    padding: 2%;

    margin: 5% auto;



    color: white;

    background-color: rgb(83, 31, 0);

    border-radius: 15px;

}

@media only screen and (max-width: 1000px) {
    #quaternary-flex-container {
        min-width: 300px;
        margin-bottom: 50px;
    }
}



#quaternary-flex-container > div {

    padding: 1%;

    width: 100%;

    margin-bottom: 10px;


    text-align: center;

    border-radius: 15px;

    background-color: black;

}