/* GIVE STYLE TO THIS PAGE! */

@media screen and (max-width: 1023px){
    /* 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%;
    }

    iframe {
        width: 90vw; 
        height: 50vw;
        overflow: hidden; 
        border: none;
    }
    
    h1 {
        margin-top: 0;
        font-size: 2em;
    }

    h2 {
        font-size: 1.75em;
    }

    h3 {
        font-size: 1.5em;
    }

    b, i, p, input {
        font-size: 1em;
    }

    input {
        background-color: #2D281A;
        font-weight: bold;
        border: none;
        color: #B3A27A;
        width: 16em;
        height: 1.75em;
    }
    
    /* LAYOUT VARS */
    #header, #brand, #search, #navigation, #intro, #game, #video, #settings, #copyright, #footer {
        display: flex;
        overflow: hidden;
    }

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

    #header, #footer {
        justify-content: space-evenly;
        flex-wrap: wrap;
        flex-direction: row;
        background-color: black;
    }

    #brand, #search, #navigation, #settings, #copyright {
        padding: 0.33vw;
        align-items: center;
    }

    #brand {
        width: 100%;
        padding: 1vw;
        justify-content: center;
    }

    #search {
        width: 100%;
        padding: 1vw;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    #navigation {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
        display: none;
    }

    #intro, #video {
        background-color: #4A412B;
        color: #100E09;
        flex-direction: column;
    }

    #game {
        background-color: #685A3C;
        flex-direction: column;
    }

    .actions {
        padding: 1vw;
        margin-bottom: 10vw;
        text-align: center;
    }

    .actions, .thumbnail {
        width: auto;
    }

    #settings {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    #copyright {
        width: 100%;
        justify-content: center;
    }

    #footer {
        color: white;
    }
    
    /* MEDIA VARS */
    #header img{
        min-width: 100%;
        min-height: 100%;
        width: 72vw;
        height: 7.2vw;
    }

    #intro .thumbnail img {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: 75vw;
    }

    #game .thumbnail img {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: 64vw;
    }

    #video .thumbnail img {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
    }

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

    #header .button:hover, #footer .button:hover {
        background-color: #988558;
        color: black;
        padding: 0.50vw;
        margin: 1vw;
    }

    .donate {
        background-color: #4A412B;
        color: white;
        text-decoration: none;
        padding: 0.50vw;
        margin: 1vw;
    }

    .donate:hover {
        background-color: white;
        color: black;
        text-decoration: none;
        padding: 0.50vw;
        margin: 1vw;
    }

    .spreadable {
        text-align: center;
        flex-grow: 1;
    }

    .cta {
        background-color: goldenrod;
        color: black;
        text-decoration: none;
        padding: 0.55vw;
        margin: 4vw;
    }

    .cta:hover {
        background-color: white;
        color: black;
        text-decoration: none;
        padding: 0.55vw;
        margin: 4vw;
    }
}

@media screen and (min-width: 1024px) {
    /* 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%;
    }
    
    iframe {
        width: 60.75vw; 
        height: 32vw;
        overflow: hidden; 
        border: none;
    }
    
    h1 {
        font-size: 2.5vw;
    }

    h2 {
        font-size: 2vw;
    }

    h3 {
        font-size: 1.5vw;
    }

    b, i, p, input {
        font-size: 1.25vw;
    }

    input {
        background-color: #2D281A;
        font-weight: bold;
        border: none;
        color: #B3A27A;
        width: 16em;
        height: 1.75em;
    }
    
    /* LAYOUT VARS */
    #header, #brand, #search, #navigation, #intro, #game, #video, #settings, #copyright, #footer {
        display: flex;
        overflow: hidden;
    }

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

    #header, #footer {
        justify-content: space-evenly;
        flex-wrap: wrap;
        flex-direction: row;
        background-color: black;
    }

    #header a, #footer a, #intro a, #video a, #game a {
        font-size: 1.25vw;
    }
    
    #brand, #search, #navigation, #settings, #copyright {
        padding: 0.33vw;
        align-items: center;
    }

    #brand {
        width: 33%;
    }

    #search {
        width: 33%;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .mobile {
        display: none;
    }

    #navigation {
        width: 25%;
        justify-content: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
    }

    #intro, #video {
        background-color: #4A412B;
        color: #100E09;
        flex-direction: row;
    }

    #game {
        background-color: #685A3C;
        flex-direction: row-reverse;
    }

    .actions {
        padding: 1vw;
        text-align: center;
    }

    .actions, .thumbnail {
        width: 50%;
    }

    #settings {
        width: 65%;
        flex-wrap: wrap;
        flex-direction: row;
    }

    #copyright {
        width: 25%;
        justify-content: flex-end;
    }

    #footer {
        color: white;
    }
    
    /* MEDIA VARS */
    #header img{
        width: 30vw;
        height: 2.25vw;
    }

    #intro .thumbnail img {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: 42vw;
    }

    #game .thumbnail img {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: 18vw;
    }

    #video .thumbnail img {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: 20vw;
    }

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

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

    .donate {
        background-color: #4A412B;
        color: white;
        text-decoration: none;
        padding: 0.25vw;
        margin: 0.25vw;
    }

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

    .cta {
        background-color: goldenrod;
        color: black;
        text-decoration: none;
        padding: 0.45vw;
        margin-bottom: 1vw;
    }

    .cta:hover {
        background-color: white;
        color: black;
        text-decoration: none;
        padding: 0.45vw;
        margin: 1vw;
    }
}