@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Roboto&display=swap');

:root {
    /* color variables */
    --color-blue: hsl(191, 50%, 44%);
    --color-gray: hsl(184, 10%, 33%);
    --color-yellow: hsl(53, 98%, 65%);
    --color-orange: hsl(19, 64%, 54%);
    --color-white: hsl(197, 24%, 94%);
}

body {
    min-height: calc(100vh - 2em);
    background-color: var(--color-gray);
    font-family: 'Roboto', verdana, sans-serif; color: var(--color-white);
    border-top: 4em solid hsla(191, 50%, 44%,.7); margin-top: 2em;
}

#container {
    min-height: 100vh; 
    border-left: 4em solid hsla(191, 50%, 44%,.7); margin-top: -6em; margin-left: 4em;
    position: relative;
    
}

main {
    position: absolute; top: 6em; left: 0em;
    width: calc(100% - 2em); min-height: 70vh; 
    padding: 1em;
}

main::before {
    display: block; content: "";
    width: 90vw; height: 2px; background-color: var(--color-orange);
    position: absolute; top: -2em; left: -8em; z-index: 0;
}

main::after {
    display: block; content: "";
    width: 2px; height: 120vh; background-color: var(--color-orange);
    position: absolute; top: -6em; left: -2em; z-index: 0;
}

header > h1 {
    font-family: 'Bangers', cursive; font-size: 3rem; 
    letter-spacing: 4px; text-shadow: 2px 2px 2px #222; color: var(--color-yellow);
    margin-bottom: .4em;
}

header h1 span {
    color: hsla(191, 50%, 44%,.7);
    font-size: 80%;
}

header h1 + p {
    
}

h2 {
    font-family: 'Bangers', cursive; font-size: 2rem;
    letter-spacing: 4px; text-shadow: 2px 2px 2px #222; color: var(--color-yellow);
    clear: both;
}

a {
    color: var(--color-orange);
}

a:hover {
    color: var(--color-yellow);
}

a i {
    padding-left: .5em; position: relative; top: 1px;
    color: var(--color-yellow)
}

main > article {
    display: flex; flex-flow: row wrap;
    position: relative; top: 2em;
}

main > article > section {
    flex: 1 0 auto;
}

main > article > section:nth-child(2) {
    padding: 0 1em 1em 2em;
}

.video1 {
    width: 100%; max-width: 700px;
    position: relative; margin-bottom: 2em;
}

.video_frame {
    border-top: 2px solid var(--color-orange);
    border-left: 2px solid var(--color-orange);
    width: 100%; max-width: 100%; height: 0; padding-bottom: 56.25%;
    position: relative;
}

.video_frame video, .video_frame iframe {
    width: 100%; max-width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
}

nav.nav1 {
    font-size: .9rem;
    margin-top: 1em; margin-left: 1.2em;
}

nav.nav1 li {
    list-style: square;
}

nav.nav1 a {
    text-decoration: none;
}

nav.nav1 a:hover {
    color: var(--color-yellow);
}


footer {
    width: calc(100% + 10em); margin: 3em 0em 0em -9em; 
    padding: 1em 1em 1em 9em;
    background-color: rgba(20,20,20,.7);
    line-height: 1.8;
    overflow: hidden;
    transform: skewY(-2deg);
}

footer .footerwrapper {
    transform: skewY(2deg);
}

footer .advert {
    float: right; clear: right;
    margin-bottom: 32px;
}

footer .copyright {
    float: right; clear: right;
}

footer input[type=text] {
    font-size: 1.5rem; color: var(--color-blue);
}

footer .small {
    font-size: 80%;
}

/* ========================================= */
@media screen and (max-width: 700px) {

    body {
        font-family: 'Roboto', verdana, sans-serif; color: var(--color-white);
        border-top: 2em solid hsla(191, 50%, 44%,.7); margin-top: 1em;
    }
    
    #container {
        border-left: 2em solid hsla(191, 50%, 44%,.7); 
        margin-top: -6em; margin-left: 1em;  
        width: calc(100% - 4em);
    }

    main::before {
        top: -1em;
    }
    
    main::after {
        left: -1em; height: 80vh;
    }
    
    header > h1 {
        font-size: 2rem; 
    }
    
    header h1 span {
        display: block; margin-left: 10vw;
    }
    
    h2 {
        font-size: 1.4rem;
    }

    main > article > section {
        width: 80%;
    }

    nav.nav1 {
        margin-left: 0em;
    }

    nav.nav1 a {
        display: block;
    }

    footer h2 {
        padding-top: 1em;
    }
    


}