/* 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, #container, #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, #container, .box, #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;
    }

    #container {
        background-image: url(data/images/backgrounds/asian-tiles-grey.png);
        background-repeat: repeat;
        background-size: 69%;
        flex-direction: column;
        padding: 4vw;
    }

    #bio, #externallinks, #recommended {
        padding: 1vw;
        background-color: #121212;
        color: white;
        text-align: center;
        margin-bottom: 4vw;
    }

    #externallinks h3, #recommended h3 {
        font-size: 1em;
    }

    #mainheadertext {
        background-color: #121212;
        color: white;
        margin: 0;
    }

    #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;
    }

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

    #externallinks img, #recommended img {
        width: 8vw;
        height: 8vw;
        text-align: center;
        vertical-align: middle;
    }

    /* 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;
    }

    .hyperlink {
        color: #988558;
        text-decoration: underline;
        padding: 0.45vw;
        margin: 1vw;
    }

    .hyperlink:hover {
        color: white;
        text-decoration: underline;
        padding: 0.45vw;
        margin: 1vw;
    }
}

@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, #container, #channeltop, #player, #bio, #channelbottom, #externallinks, #recommended, #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 {
        font-size: 1.25vw;
    }

    #brand, #search, #navigation, #container, #channeltop, #player, #bio, #channelbottom, #externallinks, #recommended, #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;
    }

    #container {
        background-image: url(data/images/backgrounds/asian-tiles-grey.png);
        background-repeat: repeat;
        justify-content: space-evenly;
        flex-wrap: wrap;
        background-size: 15%;
        padding: 1vw;
        text-align: center;
        color: white;
    }

    #channeltop, #channelbottom {
        width: 96%;
        justify-content: space-around;
        flex-wrap: wrap;
        flex-direction: row;
        background-color: #121212;
        margin-bottom: 1vw;
        align-items: stretch;
    }

    #bio {
        width: 100%;
        justify-content: space-evenly;
        flex-wrap: wrap;
        flex-direction: column;
        background-color: #242424;
    }

    #bioheader {
        margin: 0;
    }

    #recommended {
        width: 63%;
        justify-content: space-evenly;
        flex-wrap: wrap;
        flex-direction: column;
        background-color: #242424;
    }

    #externallinks {
        width: 35%;
        justify-content: space-evenly;
        flex-wrap: wrap;
        flex-direction: column;
        background-color: #242424;
    }

    #externallinkheader, #recommendedheader {
        display: block;
        width: 100%;
    }

    #recommended {
        padding-bottom: auto;
        padding-top: auto;
    }

    #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;
    }

    #bio img {
        width: 24vw;
        height: 24vw;
        margin-bottom: 1vw;
    }

    #externallinks img, #recommended img {
        width: 3vw;
        height: 3vw;
        text-align: center;
        vertical-align: middle;
    }

    #player video {
        width: 60vw;
        height: 30vw;
    }

    /* 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;
    }

    .hyperlink {
        color: #988558;
        text-decoration: underline;
        padding: 0.45vw;
        margin: 1vw;
    }

    .hyperlink:hover {
        color: white;
        text-decoration: underline;
        padding: 0.45vw;
        margin: 1vw;
    }
}