:root {
    --main-bg-color: #111316;
    --sec-bg-color: #b89f89;
    --heading-color: #f6deb8;
    --font-color: #D6D7D2;
}

@media only screen and (min-width: 1080px) {


    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--font-color);
        background-color: var(--main-bg-color);
    }

    h1{
        display: block;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--heading-color);
        font-size: 2.5em;
    }

    h2{
        display:block;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 2em;;
        color: var(--heading-color);
    }

    img{
        width:360px;
        display: block;
        margin: auto;
    }

    .logo{
        width: 180px;
        display: block;
        margin: auto;
    }

    p{
        font-size: 1.2em;
        padding: 2em
    }

    video{
        height: 720px;
    }

    nav{
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        overflow: hidden;
        background-color: var(--sec-bg-color);
    }

    footer{
        display: flex;

    }

    footer ul{
        flex:1;
    }

    footer li{
        list-style-type: none;
    }

    nav ul{
        border-top: 1px solid var(--heading-color);
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    nav li{
        float: left;
    }
    
    nav li a{
        display: block;
        color: var(--main-bg-color);
        text-align: center;
        border: 1px,solid,var(--sec-bg-color);
        padding: 14px 16px;
        text-decoration: none;
    }
    
    nav li a:hover {
        background-color: var(--heading-color);
        border: 1px,solid;
        border-color: var(--main-bg-color);
        color: var(--main-bg-color);
    }

    .active_site{
        text-decoration: underline;
        font-weight: bold;
        color: var(--main-bg-color)
    }

    .content_box{
        display: flex;
        padding: 2em;
        margin-bottom: 2em;
        border-bottom: 2px solid var(--heading-color);
    }
    .video_player{
        padding: 1em;
        display: flex;
        justify-content: center;
        
    }

    .Heading{
        font-size: 1.3em;
        color: var(--heading-color);
    }

    .gradient{
        background: linear-gradient(180deg, var(--sec-bg-color) 80%, #11111100 100%);
    
    }

    .quiz{
        border: 2px solid var(--sec-bg-color);
        padding-bottom: 0;
        margin-bottom: 4vh;
        margin-left: 2vw;
    }

    .quiz_box{
        display: flex;
        width: 50vw;
        align-items: center;
    }

    .quiz_box p{
        margin: 0;
        width: 35vw;
    }

    .quiz_container{
        display: flex;
    }
    .quiz_container button{
        border: none;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.5em;
        width: 50vw;
        height: 5vh;
        background-color: var(--heading-color);
    }

    .quiz_container button:hover{
        background-color: var(--sec-bg-color);
    }

    input{
        height: 5vh;
        color: var(--main-bg-color);
        font-size: 1em;
    }
    .quiz_info{
        text-align: center;
    }
}

/* ---------------------------------------------------- TABLET ---------------------------------------------*/

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


    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--font-color);
        background-color: var(--main-bg-color);
    }

    h1{
        display: block;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--heading-color);
        font-size: 2.5em;
    }

    h2{
        display: block;
        margin-bottom: 0;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 2em;;
        color: var(--heading-color);
    }

    img{
        width:360px;
        max-width: 75vw;
        display: block;
        margin: auto;
    }

    .logo{
        width: 180px;
        display: block;
        margin: auto;
    }

    p{
        margin-top: 0;
        font-size: 1em;
        padding: 1em
    }

    video{
        width: 360px;
        max-width: 75vw;
        height: auto;
    }

    nav{
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        overflow: hidden;
        background-color: var(--sec-bg-color);
    }

    footer{
        display: flex;
    }

    footer ul{
        flex:1;
    }

    footer li{
        list-style-type: none;
    }

    nav ul{
        border-top: 1px solid var(--heading-color);
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    nav li{
        float: left;
    }
    
    nav li a{
        display: block;
        color: var(--main-bg-color);
        text-align: center;
        border: 1px,solid,var(--sec-bg-color);
        padding: 14px 16px;
        text-decoration: none;
    }
    
    nav li a:hover {
        background-color: var(--heading-color);
        border: 1px,solid;
        border-color: var(--main-bg-color);
        color: var(--main-bg-color);
    }

    .active_site{
        text-decoration: underline;
        font-weight: bold;
        color: var(--main-bg-color)
    }

    .content_box{
        display: block;
        padding: 1em;
        margin-bottom: 2em;
        border-bottom: 2px solid var(--heading-color);
    }

    .video_player{
        padding: 1em;
        display: flex;
        justify-content: center;
        
    }

    .Heading{
        font-size: 1.3em;
        color: var(--heading-color);
    }

    .gradient{
        background: linear-gradient(180deg, var(--sec-bg-color) 80%, #11111100 100%);
    }

    .quiz{
        border: 2px solid var(--sec-bg-color);
        padding-bottom: 0;
        margin-bottom: 4vh;
    }

    .quiz_box{
        display: flex;
        width: auto;
        align-items: center;
    }

    .quiz_box p{
        margin: 0;
    }

    .quiz_container{
        display: flex;
        width: 90vw;
    }
    .quiz_container button{
        border: none;
        width: 92vw;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.5em;
        background-color: var(--heading-color);
    }

    .quiz_container button:hover{
        background-color: var(--sec-bg-color);
    }

    input{
        height: 5vh;
        color: var(--main-bg-color);
        font-size: 1em;
    }
    .quiz_info{
        text-align: center;
    }
}

/* ---------------------------------------------------- PHONE ---------------------------------------------*/

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


    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--font-color);
        background-color: var(--main-bg-color);
    }

    h1{
        display: block;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--heading-color);
        font-size: 2.5em;
    }

    h2{
        display: block;
        text-align: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 2em;
        margin-bottom: 0;
        color: var(--heading-color);
    }

    img{
        width:360px;
        display: block;
        margin: auto;
    }

    .logo{
        width: 180px;
        display: block;
        margin: auto;
    }

    p{
        margin-top: 0;
        font-size: 1em;
        padding: 1em
    }

    video{
        width: 90vw;
        height: auto;
    }

    nav{
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        overflow: hidden;
        background-color: var(--sec-bg-color);
    }

    footer{
        display: flex;
    }

    footer ul{
        flex:1;
    }

    footer li{
        list-style-type: none;
    }

    nav ul{
        border-top: 1px solid var(--heading-color);
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    nav li{
        float: left;
    }
    
    nav li a{
        display: block;
        color: var(--main-bg-color);
        text-align: center;
        border: 1px,solid,var(--sec-bg-color);
        padding: 14px 16px;
        text-decoration: none;
    }
    
    nav li a:hover {
        background-color: var(--heading-color);
        border: 1px,solid;
        border-color: var(--main-bg-color);
        color: var(--main-bg-color);
    }

    .active_site{
        text-decoration: underline;
        font-weight: bold;
        color: var(--main-bg-color)
    }

    .content_box{
        display: block;
        padding: 1em;
        margin-bottom: 2em;
        border-bottom: 2px solid var(--heading-color);
    }

    .video_player{
        padding: 1em;
        display: flex;
        justify-content: center;
        
    }

    .Heading{
        font-size: 1.3em;
        color: var(--heading-color);
    }

    .gradient{
        background: linear-gradient(180deg, var(--sec-bg-color) 80%, #11111100 100%);
    }

    .quiz{
        border: 2px solid var(--sec-bg-color);
        padding-bottom: 0;
        margin-bottom: 4vh;
    }

    .quiz_box{
        display: flex;
        width: auto;
        align-items: center;
    }

    .quiz_box p{
        margin: 0;
    }

    .quiz_container{
        display: flex;
        width: 90vw;
    }
    .quiz_container button{
        border: none;
        width: 92vw;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.5em;
        background-color: var(--heading-color);
    }

    .quiz_container button:hover{
        background-color: var(--sec-bg-color);
    }

    input{
        height: 5vh;
        color: var(--main-bg-color);
        font-size: 1em;
    }
    .quiz_info{
        text-align: center;
    }
}