* {
  font-family: poor richard;
  margin: 0;
  padding: 0;
  background-color: black;
}

/* 
font-family: poor richard;
font-family: harrington;
font-family: cambria;
font-family: tempus sans itc;
font-family: papyrus;
font-family: perpetua titling mt;
 */

/* top content */

video {
  position: relative;
  width: 1200px;
  height: 600px;
  left: 0px;
}

.info {
  width: 1200px;
  height: auto;
  word-spacing: 5px;
  padding: 10px;
  box-shadow: 1px 1px 25px 1px rgb(160, 120, 10);
}

.nextBtnn {
  position: absolute;
  opacity: 0.2;
  color: white;
  margin: -340px 582px;
  font-size: 20px;
  z-index: 1;
  border: none;
}

.nextBtnn:hover {
  opacity: 0.6;
  cursor: pointer;
}

.poster {
  width: 500px;
  height: 730px;
  float: left;
  border: 5px solid black;
}

.genres {
  text-align: left;
  position: relative;
}

/* rating buttons */

/* imdb button */
.imdb {
  color: white;
  font-size: 15px;
  width: 100px;
  height: 50px;
  margin: 8px;
  text-align: justify;
  border-radius: 10px;
}
.imdb:hover {
  cursor: pointer;
  background-color: rgb(41, 40, 40);
}

.imdb > i {
  margin: 5px;
  color: rgba(255, 217, 0, 0.842);
  font-size: 25px;
  float: left;
  background-color: transparent;
}

/* rotten tomatoes  button */

.rottenT {
  color: white;
  font-size: 30px;
  width: 120px;
  height: 50px;
  position: absolute;
  margin: 10px 18px;
  border-radius: 10px;
}

.rottenT:hover {
  background-color: rgb(41, 40, 40);
  cursor: pointer;
}
.rottenT > img {
  width: 40px;
  height: 35px;
  float: left;
  background-color: transparent;
}

/* audience score button */

.audience {
  color: white;
  font-size: 30px;
  width: 110px;
  height: 50px;
  position: absolute;
  margin: 11px 160px;
  border-radius: 10px;
}
.audience:hover {
  background-color: rgb(41, 40, 40);
  cursor: pointer;
}
.audience > img {
  width: 25px;
  height: 26px;
  background-color: transparent;
}

/* text styles
colors,  font sizes */

h1 {
  color: white;
  text-transform: capitalize;
  text-align: left;
}

h3 {
  color: white;
  display: inline-block;
  border: 2px solid grey;
  border-radius: 20px;
  width: 110px;
  text-align: center;
}

h5 {
  color: white;
  text-align: left;
  font-size: 20px;
}

h4 {
  text-align: left;
  color: white;
  text-transform: capitalize;
  font: bolder 14px anironc;
  width: 170px;
  padding: 70px 10px;
}

h4 > a {
  color: goldenrod;
  font: bolder 23px poor richard;
  text-decoration: none;
  background-color: transparent;
}
h4 > a:hover {
  text-decoration: underline;
  color: white;
}

p {
  color: white;
  text-align: justify;
  text-indent: 35px;
  font-size: 20px;
}

/* cast section */

.header {
  border-left: 4px solid goldenrod;
  border-right: 4px solid goldenrod;
  text-align: center;
  width: 200px;
}

span {
  color: goldenrod;
  text-transform: capitalize;
}
span:hover {
  text-decoration: underline;
  cursor: pointer;
}

h2 {
  color: white;
  text-align: left;
  border-bottom: 2px solid grey;
  width: 1150px;
  padding: 10px;
  text-transform: capitalize;
}
h2 > a {
  text-decoration: none;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin: 10px;
}

.flex-container > div {
  width: 150px;
  height: 110px;
  padding: 10px;
  margin: 10px;
  color: white;
  border-radius: 30px;
  box-shadow: 1px 1px 13px 1px goldenrod;
}

.flex-container > div:hover {
  cursor: pointer;
  box-shadow: 1px 1px 15px 2px antiquewhite;
}

.a {
  background-image: url("../mediaFiles/orlando.jpg");
  background-size: cover;
}
.b {
  background-image: url("../mediaFiles/ian.webp");
  background-size: cover;
}
.c {
  background-image: url("../mediaFiles/cate.jpeg");
  background-size: cover;
}
.d {
  background-image: url("../mediaFiles/ianholm.jpg");
  background-size: cover;
}
.e {
  background-image: url("../mediaFiles/ViggoMortensen.jpg");
  background-size: cover;
}
.f {
  background-image: url("../mediaFiles/lee.jpg");
  background-size: cover;
}
.g {
  background-image: url("../mediaFiles/serkis.webp");
  background-size: cover;
}
.h {
  background-image: url("../mediaFiles/billy.jpg");
  background-size: cover;
}
.i {
  background-image: url("../mediaFiles/elijah.webp");
  background-size: cover;
}
.j {
  background-image: url("../mediaFiles/bean.webp");
  background-size: cover;
}
.k {
  background-image: url("../mediaFiles/dominic.webp");
  background-size: cover;
}
.l {
  background-image: url("../mediaFiles/austin.webp");
  background-size: cover;
}
.m {
  background-image: url("../mediaFiles/tyler.jpg");
  background-size: cover;
}
.n {
  background-image: url("../mediaFiles/hugo.jpg");
  background-size: cover;
}
.o {
  background-image: url("../mediaFiles/sala.webp");
  background-size: cover;
}
.p {
  background-image: url("../mediaFiles/johnrhys.jpg");
  background-size: cover;
}

/* gallery pictyres */
.gallery {
  width: 1200px;
  height: 700px;
  position: relative;
}

.gallery > button {
  color: rgb(204, 199, 199);
  background-color: transparent;
  position: absolute;
  font-size: 25px;
  border: none;
}

.gallery > button > i {
  background-color: transparent;
}
.gallery > button:hover {
  cursor: pointer;
  color: white;
}

.galleryBtn {
  margin: 300px -23px;
}
.prevBtn {
  margin: 300px 0;
}

.gallery > img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/*  footer section */

.sociall {
  width: 1200px;
  height: 100px;
}

ul {
  list-style-type: none;
}

ul > li {
  display: inline-block;
  font-size: 30px;
  left: 100px;
  margin: 10px;
}

ul > li > a {
  color: rgb(214, 208, 208);
  text-decoration: none;
  margin: 10px;
}

ul > li > a:hover {
  cursor: pointer;
  color: rgb(255, 255, 255);
}

.lists > li {
  color: white;
  font: bold 20px poor richard;
  text-transform: capitalize;
  margin: 10px;
}

.lists > li:hover {
  cursor: pointer;
  text-decoration: underline;
}

@media screen and (max-width: 1920px) {
  video {
    margin: 0 0px;
  }
  button {
    margin: -300px 1197px;
  }
}