*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
body {
    font-size: 28px;
    background-color: black;
  }
  

  .header img {
    width: 100%;
    height: 150vh;
    /* padding-right: 60% ; */
  }



   
  ul {
    position: absolute;
    width: 100%;
    list-style-type: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: -webkit-sticky;
    /* Safari */
 position: sticky; 
    top: 0px;
    background-color: black; }


 li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: black;
  } 
  
  li a:hover {
    background-color: #111;
  }
  
  .active {
    background-color: purple;
  }
  
  .active3 {
    background-color: purple;
  }
  
  .active5 {
    background-color: purple;
  }

  
   


 #icon {
    margin-left: 580px;
    color: white;
    font-size: 30px;
    margin-top: 3%;
  }
  
  #amazon {
    color: rgb(255, 204, 0);
  font-size: 30px;
   margin-top: 60%; 
   padding-left: 190%;
  }
  
  li i:hover {
    background-color: black;
  }

  

/* shows */
.shows {
  /* height:50vh; */
  width: 100%;
  background-color: black;
}

.shows h2 {
  padding-top: 20px;
  margin-left: 60px;
  color: white;
}

.showsrap {
  width: 100%;
  height: 30vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: auto;
  /* background-color: black; */
  grid-column-gap: 10px;
}


.showsname img {
  margin-top: 10px;
  border-radius: 6px;

}


.showsname {
  position: relative;
  /* width:50%; */
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: 20vh;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.showsname:hover .image {
  opacity: 0.3;
}

.showsname:hover .middle {
  opacity: 1;
}

.text {
  /* background-color:white; */
  color: white;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* padding: 16px 32px;  */
  /* padding-left: 70px; */
  text-align: center;
}

.text i {
  padding-left: 10px;
}

.showsname h3 {
  /* padding-left:95% ; */
  font-size: 18px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  text-align: center;

}












/* originals */
.originals {
  /* height:50vh; */
  width: 100%;
  background-color: black;
}

.originals h2 {
  padding-top: 20px;
  margin-left: 60px;
  color: white;
}

.orirap {
  width: 100%;
  height: 30vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: auto;
  /* background-color: black; */
  grid-column-gap: 10px;
}


.oriname img {
  margin-top: 10px;
  border-radius: 6px;

}


.oriname {
  position: relative;
  /* width:50%; */
}

.image1 {
  opacity: 1;
  display: block;
  width: 100%;
  height: 40vh;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.oriname:hover .image {
  opacity: 0.3;
}

.oriname:hover .middle {
  opacity: 1;
}

.text {
  /* background-color:white; */
  color: white;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* padding: 16px 32px;  */
  /* padding-left: 70px; */
  text-align: center;
}

.text i {
  padding-left: 10px;
}

.oriname h3 {
  /* padding-left:95% ; */
  font-size: 18px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  text-align: center;

}










/* dubbed */
.dubbed {
  /* height:50vh; */
  width: 100%;
  background-color: black;
}

.dubbed h2 {
  padding-top: 20px;
  margin-left: 60px;
  color: white;
}

.dubrap {
  width: 100%;
  height: 30vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: auto;
  /* background-color: black; */
  grid-column-gap: 10px;
}


.dubname img {
  margin-top: 10px;
  border-radius: 6px;

}


.dubname {
  position: relative;
  /* width:50%; */
}

.image1 {
  opacity: 1;
  display: block;
  width: 100%;
  height: 40vh;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.dubname:hover .image {
  opacity: 0.3;
}

.dubname:hover .middle {
  opacity: 1;
}

.text {
  /* background-color:white; */
  color: white;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* padding: 16px 32px;  */
  /* padding-left: 70px; */
  text-align: center;
}

.text i {
  padding-left: 10px;
}

.dubname h3 {
  /* padding-left:95% ; */
  font-size: 18px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  text-align: center;

}










/* romantic */
.romantic {
  /* height:50vh; */
  width: 100%;
  background-color: black;
}

.romantic h2 {
  padding-top: 20px;
  margin-left: 60px;
  color: white;
}

.rorap {
  width: 100%;
  height: 30vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: auto;
  /* background-color: black; */
  grid-column-gap: 10px;
}


.roname img {
  margin-top: 10px;
  border-radius: 6px;

}


.roname {
  position: relative;
  /* width:50%; */
}

.image1 {
  opacity: 1;
  display: block;
  width: 100%;
  height: 40vh;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.roname:hover .image {
  opacity: 0.3;
}

.roname:hover .middle {
  opacity: 1;
}

.text {
  /* background-color:white; */
  color: white;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* padding: 16px 32px;  */
  /* padding-left: 70px; */
  text-align: center;
}

.text i {
  padding-left: 10px;
}

.roname h3 {
  /* padding-left:95% ; */
  font-size: 18px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  text-align: center;

}











/* gold */
.gold {
  /* height:50vh; */
  width: 100%;
  background-color: black;
}

.gold h2 {
  padding-top: 20px;
  margin-left: 60px;
  color: white;
}

.gorap {
  width: 100%;
  height: 30vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: auto;
  /* background-color: black; */
  grid-column-gap: 10px;
}


.goname img {
  margin-top: 10px;
  border-radius: 6px;

}


.goname {
  position: relative;
  /* width:50%; */
}

.image1 {
  opacity: 1;
  display: block;
  width: 100%;
  height: 40vh;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.goname:hover .image {
  opacity: 0.3;
}

.goname:hover .middle {
  opacity: 1;
}

.text {
  /* background-color:white; */
  color: white;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* padding: 16px 32px;  */
  /* padding-left: 70px; */
  text-align: center;
}

.text i {
  padding-left: 10px;
}

.goname h3 {
  /* padding-left:95% ; */
  font-size: 18px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  text-align: center;

}














/* hidden */
.hidden {
  /* height:50vh; */
  width: 100%;
  background-color: black;
}

.hidden h2 {
  padding-top: 20px;
  margin-left: 60px;
  color: white;
}

.hrap {
  width: 100%;
  height: 30vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: auto;
  /* background-color: black; */
  grid-column-gap: 10px;
}


.hname img {
  margin-top: 10px;
  border-radius: 6px;

}


.hname {
  position: relative;
  /* width:50%; */
}

.image1 {
  opacity: 1;
  display: block;
  width: 100%;
  height: 40vh;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.hname:hover .image {
  opacity: 0.3;
}

.hname:hover .middle {
  opacity: 1;
}

.text {
  /* background-color:white; */
  color: white;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* padding: 16px 32px;  */
  /* padding-left: 70px; */
  text-align: center;
}

.text i {
  padding-left: 10px;
}

.hname h3 {
  /* padding-left:95% ; */
  font-size: 18px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  text-align: center;

}













/* toppicks */
.toppicks {
  /* height:50vh; */
  width: 100%;
  background-color: black;
}

.toppicks h2 {
  padding-top: 20px;
  margin-left: 60px;
  color: white;
}

.tprap {
  width: 100%;
  height: 30vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  overflow: auto;
  /* background-color: black; */
  grid-column-gap: 10px;
}


.tpname img {
  margin-top: 10px;
  border-radius: 6px;

}


.tpname {
  position: relative;
  /* width:50%; */
}

.image1 {
  opacity: 1;
  display: block;
  width: 100%;
  height: 40vh;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.tpname:hover .image {
  opacity: 0.3;
}

.tpname:hover .middle {
  opacity: 1;
}

.text {
  /* background-color:white; */
  color: white;
  font-size: 20px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* padding: 16px 32px;  */
  /* padding-left: 70px; */
  text-align: center;
}

.text i {
  padding-left: 10px;
}

.tpname h3 {
  /* padding-left:95% ; */
  font-size: 18px;
  color: white;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  text-align: center;

}














/* footer */
.footer {
  width: 100%;
  height: 50vh;
  background: black;
  border-top: 1px solid white;
}

.footrap {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap: 20px;
  padding-top: 10px;
}

.boxx {
  /* background-color: rgba(0, 0, 0, 0.2); */
  padding: 10px;
}

.boxx h1 {
  text-align: center;
  color: white;
  font-size: 30px;
}



.boxx ul li{
  list-style: none;
  color: white;
  padding-left: 25%;
  font-size: 20px;
}


.boxx2 {
  /* background-color: rgba(0, 0, 0, 0.2); */
  padding: 10px;
}

.boxx2 h1 {
  text-align: center;
  color: white;
  font-size: 30px;

}


.boxx2 ul li{
  list-style: none;
  color: white;
  padding-left: 30%;
  font-size: 20px;
}


.boxx3 {
  /* background-color: rgba(0, 0, 0, 0.2); */
  padding: 10px;
}

.boxx3 h1 {
  text-align: center;
  color: white;
  font-size: 30px;
}

.boxx3 ul li{
  list-style: none;
  color: white;
  padding-left: 25%;
  font-size: 20px;
  
}



.boxx4 {
  /* background-color: rgba(0, 0, 0, 0.2); */
  padding: 10px;
}

.boxx4 h1 {
  text-align: center;
  color: white;
  text-decoration: none;
  font-size: 30px;
}


.boxx4 ul li{
  list-style: none;
  color: white;
font-size: 20px;
padding-left: 30%;
}
.boxx4 ul li a{
  font-size: 40px;
  border: 2px solid white;
}