videostyle.css

html, body {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100vh;
}

body {
     background: url(Images/cd.jpg) no-repeat 50% 50%;
     background-size: cover;
}
/* navbar */

nav {
      height: 40px;
      line-height: 40px;
}

nav a img {
      vertical-align: middle;
      width: 40px;
      height: 40px;
}

nav a:nth-child(2) {
      float: right;
}
h1 {
     position: absolute;
     top: 46%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
     font-size: 48px;
     font-family: "Playfair Display";
     font-weight: lighter;
}

.toggle-btn {
     position: fixed;
     margin: 1.4em;
     padding: 1em;
     width: 40px;
     height: 12px;
     right: 0;
     z-index: 1;
}

span.one {
     position: absolute;
     width: 40px;
     height: 2px;
     background: #fff;
}

span.two {
     position: absolute;
     width: 40px;
     height: 2px;
     background: #fff;
     margin-top: 12px;
}

.menu {
     z-index: 0;
     position: absolute;
     background: #101010;
     height: 100vh;
     width: 100%;
     top: -100%;
}

.data {
     padding: 8em 0 0 2em;
     text-align: left;
}

ul {
     list-style: none;
}

li:first-child {
     color: grey;
     font-family: Poppins;
     font-size: 24px;
}

li:not(:first-child) {
     color: #fff;
     font-size: 42px;
}

a {
     text-decoration: none;
     color: #fff;
     font-family: Poppins;
}