@font-face {
    font-family: 'sf_pixelatebold';
    src: url('fonts/sf_pixelate_bold-webfont.eot');
    src: url('fonts/sf_pixelate_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sf_pixelate_bold-webfont.woff2') format('woff2'),
         url('fonts/sf_pixelate_bold-webfont.woff') format('woff'),
         url('fonts/sf_pixelate_bold-webfont.ttf') format('truetype'),
         url('fonts/sf_pixelate_bold-webfont.svg#sf_pixelatebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: "sf_pixelatebold";
    font-size: 30px;
    color: #FFFFFF;
}

*::-webkit-scrollbar {display: none;}

body {
    margin: 0px;
    text-align: center;
    background-color: #83C669;
}

.Leek {
    position: absolute;
    height: 200px;
    margin: 0px;
    padding: 0px;
}

#Bottom {
    position: absolute;
    left: 0%;
} /* Keep the Bottom of the leek glued to the left side of the screen */

#Body {
    position: absolute;
    left: 24px;
    width: 90%;
}

@media only screen and (max-width: 250px) { #Body { width: 50%; } #Head {width: 90%}
} /* If the screen is too small we want the body still to be hidden, so the % is decreased */

@media only screen and (max-width: 300px) and (min-width: 250px){ #Body { width: 80%; }} /* If the screen is too small we want the body still to be hidden, so the % is decreased */

@media only screen and (min-width: 2500px) { #Body { width: 98%; }} /* If the screen is too big, the leek wouldn't be connected anymore with only 90% width, so it has to be at 98% to connect seemlessly */

@media only screen and (min-width: 7000px) { #Body { width: 99%; }} /* Even with zooming out I can only see around 7000px in size, but increasing the width to 99% should make it connect seemlessly for thousands of more pixels to come*/

#Head {
    position: absolute;
    right: 0%;
}

h1 {
    position: relative;
    transform: translate(0%, -80%);
}

#YouTubePlayer {
    transform: translate(0%, 40%);
}

@media only screen and (width: 1920px) {h1::after {content: "Full HD Leek";}}

@media only screen and (width: 480px) {h1::after {content: "SD Leek";}}