html {
    margin: 0;
    padding: 0;
}
body {
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
    background: #000000;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    display: grid;
    grid-template-areas:
    "header header"
    "player icons"
    "video video"
    "toplist toplist"
    "ads ads"
    "footer footer";
    grid-template-rows: 3.5rem 1fr 1fr 1fr 1fr 1rem;
    grid-template-columns: 640px 1fr;
    grid-gap: 10px;
    height: 100vh;
}
        @media screen and (max-width: 900px) {
            body {
                grid-template-areas:
                "header"
                "player"
                "icons"
                "video"
                "toplist"
                "ads"
                "footer";
                grid-template-rows: 3.5rem 1fr 1fr 1fr 1fr 1fr 1rem;
                grid-template-columns: 1fr;
            }
        }
        @media screen and (max-width: 450px) {
            body {
                grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1rem;
            }
        }
header {
  grid-area: header;
}
footer {
  grid-area: footer;
}
#player {
    grid-area: player;
}
#icons {
    grid-area: icons;
}
#video {
    grid-area: video;
}
#insert {
    grid-area: ads;
}
.toplist {
  grid-area: toplist;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
p {
	padding: 0;
	margin: 0;
}
em {
    font-style: normal;
    margin: 0;
    padding: 0;
}

a:link, a:hover, a:visited {
    color: #eeeeee;
    text-decoration: none;
}
header {
    font-family: 'Roboto', sans-serif;
    color: #ff5722;
    font-size: 3.5rem;
    text-align: left;
}
        @media screen and (max-width: 900px) {
            header {
                padding-left: 1%;
            }
        }
        @media screen and (max-width: 500px) {
            header {
                font-size: 2.8rem;
            }
        }
        @media screen and (max-width: 400px) {
            header {
                font-size: 2.2rem;
            }
        }
#player {
    max-width: 640px;
    margin: 0 0 1% 0;
}
    #player em, #video em {
        display: block;
        text-align: left;
        font-size: .6em;
        color: #bbb;
    }
        @media screen and (max-width: 900px) {
            #player {
                margin: 0 auto;
            }
        }
        @media screen and (max-width: 360px) {
            #player em, #video em {
                font-size: .5em;
            }
        }
#icons {
    font-size: 0;
}
    #icons li {
        display: inline-block;
        width: calc(100%/6 - 3%);
        height: auto;
        margin: .5%;
        padding: 1%;
        font-size: 1rem;
        margin-bottom: 1.5%;
    }
    #icons li:hover {
        background: #d6d6d6;
        border-radius: .25rem;
    }
    #icons img {
        max-width: 100%;
        height: auto;
    }
    #icons span {
        display: block;
    }
        @media screen and (max-width: 500px) {
            #icons {
                padding-top: 3%;
            }
            #icons li {
                width: calc(100%/3 - 3%);
            }
        }
#video video {
    object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.toplist {
    margin: 0 auto;
    font-size: 0;
    text-align: left;
}
    .toplist li {
        display: inline-block;
        width: calc(100%/3 - 1%);
        margin: .5%;
    }
    .toplist a {
        display: block;
        font-size: 1.3rem;
        border: 1px solid #373737;
        background: #000000;
        border-radius: 7px;
        color: #eeeeee;
        font-weight: normal;
        padding: 2% 3% 1% 3%;
    }
    .toplist a:hover {
        background: #000000;
        color: #cccccc;
        border: 1px solid #373737;
    }
    .toplist p {
        display: block;
        font-size: .9rem;
        font-weight: normal;
        padding: 1.5% 0 0 .5%;
        white-space: nowrap;
        color: #515151;
    }
    .toplist span {
        float: right;
        font-size: .9rem;
    }
    .toplist span::after {
        content: ' views';
    }
        @media screen and (max-width: 1200px) {
            .toplist a {
                font-size: 1.6rem;
            }
        }
        @media screen and (max-width: 800px) {
            .toplist li {
                width: calc(100%/2 - 1%);
            }
        }
        @media screen and (max-width: 500px) {
            .toplist li {
                width: calc(100% - 1%);
                margin: 3% .5% .5% .5%;
            }
        }
footer {
    padding-top: 3%;
    font-size: .9rem;
}