/* GIVE STYLE TO THIS PAGE! */

@media screen and (max-width: 799px){
    /* GLOBAL VARS */
    body {
        margin: 0;
        background-color: dimgrey; 
        font-family: helvetica, arial, sans-serif;
    }

    a {
        text-decoration: none;
        font-weight: bold;
    }

    img {
        max-width: 100%;
        max-height: 100%;
    }

    video {
        background-color: black;
        max-width: 100%;
        max-height: 100%;
    }
    
    h1 {
        margin-top: 0;
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    b, i, p, a, select {
        font-size: 16px;
    }
    
    /* LAYOUT VARS */
    #header, #logo, #nav, #intro, #news, .box, .box2, #footer, #settings, #copyright {
        text-align: center;
        padding: 5px;
        overflow: hidden;
    }

    #header {
        position: sticky; 
        top: 0; 
        z-index: 1;
    }

    #header, #footer {
        background-color: #101010;
    }
    
    #intro {
        color: black;
    }

    #news {
        background-color: #505050;
    }

    .box, .box2 {
        margin: 20px auto;
        width: 90%;
        text-align: center;
    }

    .box2 {
        background-color: #454545;
        color: black;
    }

    #footer {
        color: white;
    }
    
    /* MEDIA VARS */
    #header #logo img {
        width: 360px;
        height: 36px;
    }

    #intro img {
        width: 100vw;
        height: 100vw;
    }

    #intro video {
        width: 100vw;
        height: 100vw;
    }

    #news img {
        width: 25vw;
        height: 25vw;
    }

    .icon img {
        width: 32px;
        height: 32px;
        margin-left: 32px;
    }

    .icon img:hover {
        width: 32px;
        height: 32px;
        margin-left: 32px;
        background-color: maroon;
    }
    
    .alert {
        background-color: orangered;
    }

    /* LINK VARS */
    #nav, #settings {
        display: none;
    }
    
    #intro .cta {
        background-color: white;
        color: black;
        text-decoration: none;
        padding: 0.75vw;
        margin: 0.50vw;
    }

    #intro .cta:hover {
        background-color: red;
        color: white;
        text-decoration: none;
        padding: 0.75vw;
        margin: 0.50vw;
    }

    #news .button {
        background-color: maroon;
        color: white;
        text-decoration: none;
        padding: 0.50vw;
        margin: 0.35vw;
    }

    #news .button:hover {
        background-color: orangered;
        color: black;
        text-decoration: none;
        padding: 0.50vw;
        margin: 0.35vw;
    }


    /* TELEPORT TO SUBTITLE IF CLICKED FROM TABLE OF CONTENTS OR HEADER LINK */
    #intro:target, #one:target, #two:target, #three:target, #four:target, #five:target, #six:target, #seven:target, #eight:target, #nine:target, #ten:target, #summary:target {
        padding-top: 80px; /* Adds space for a fixed header */
        margin-top: -80px; /* This moves the content up to compensate for the padding */
    }
}

@media screen and (min-width: 800px) {
    /* GLOBAL VARS */
    body {
        margin: 0;
        background-color: dimgrey; 
        font-family: helvetica, arial, sans-serif;
    }

    a {
        text-decoration: none;
        font-weight: bold;
    }

    img {
        max-width: 100%;
        max-height: 100%;
    }

    video {
        background-color: black;
        max-width: 100%;
        max-height: 100%;
    }
    
    h1 {
        font-size: 2.5vw;
    }

    h2 {
        font-size: 2vw;
    }

    b, i, p, a, select, h3 {
        font-size: 1.25vw;
    }
    
    /* LAYOUT VARS */
    #header, #logo, #nav, #intro, #news, #footer {
        padding: 0.25vw;
        overflow: hidden;
    }

    #header {
        position: sticky; 
        top: 0; 
        z-index: 1;
    }

    #header, #footer {
        background-color: #101010;
    }

    .icon {
        display: none;
    }

    #logo {
        width: 40%;
        float: left;
    }

    #nav {
        width: 50%;
        float: right;
        padding-top: 0.75vw;
        padding-right: 1vw;
        text-align: right;
    }
    
    #intro {
        padding-left: 2vw;
        color: black;
    }

    #news {
        padding-left: 2vw;
        background-color: #505050;
        text-align: center;
    }

    .box, .box2 {
        margin: 0.5vw;
        width: 30%;
        float: left;
        text-align: center;
        padding: 0.5vw;
    }

    .box2 {
        background-color: #454545;
        color: black;
    }

    #settings {
        width: 50%;
        float: left;
        padding: 0.5vw;
        padding-left: 1vw;
    }

    #copyright {
        width: 13%;
        float: right;
        padding: 0.5vw;
    }

    #footer {
        color: white;
    }
    
    /* MEDIA VARS */
    #header img{
        width: 30vw;
        height: 3vw;
        padding-left: 1vw;
    }

    #intro img {
        width: 32vw;
        height: 32vw;
        padding-left: 16vw;
    }

    #intro video {
        width: 64vw;
        height: 32vw;
    }

    #news img {
        width: 8vw;
        height: 8vw;
    }
    
    .alert {
        background-color: orangered;
    }

    /* LINK VARS */
    #header .button, #footer .button {
        background-color: black;
        color: grey;
        padding: 0.25vw;
        margin: 0.25vw;
    }

    #header .button:hover, #footer .button:hover {
        background-color: maroon;
        color: white;
        padding: 0.25vw;
        margin: 0.25vw;
    }

    .donate {
        background-color: orangered;
        color: black;
        text-decoration: none;
        padding: 0.25vw;
        margin: 0.35vw;
    }

    .donate:hover {
        background-color: maroon;
        color: white;
        text-decoration: none;
        padding: 0.25vw;
        margin: 0.35vw;
    }
    
    #intro .cta {
        background-color: white;
        color: black;
        text-decoration: none;
        padding: 0.25vw;
        margin: 0.50vw;
    }

    #intro .cta:hover {
        background-color: maroon;
        color: white;
        text-decoration: none;
        padding: 0.25vw;
        margin: 0.50vw;
    }

    #news .button {
        background-color: maroon;
        color: white;
        text-decoration: none;
        padding: 0.25vw;
        margin: 0.35vw;
    }

    #news .button:hover {
        background-color: orangered;
        color: black;
        text-decoration: none;
        padding: 0.25vw;
        margin: 0.35vw;
    }

    /* TELEPORT TO SUBTITLE IF CLICKED FROM TABLE OF CONTENTS OR HEADER LINK */
    #intro:target, #one:target, #two:target, #three:target, #four:target, #five:target, #six:target, #seven:target, #eight:target, #nine:target, #ten:target, #summary:target {
        padding-top: 4vw; /* Adds space for a fixed header */
        margin-top: -4vw; /* This moves the content up to compensate for the padding */
    }
}