@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Roboto:wght@400;500&display=swap");
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: rgb(0, 0, 0);
  color: rgb(0, 0, 0);
}

a {
  text-decoration: none;
}

#header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(0, 0, 0);
  position: fixed;
  z-index: 9999999;
}
#header #logo {
  width: 13%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#header #logo a {
  text-decoration: none;
}
#header #logo a p {
  font-size: 2rem;
  color: #ee0909;
  font-family: "Roboto", sans-serif;
}
#header #search_container {
  width: 48%;
}
#header #search_container .search-content {
  width: 100%;
  border-radius: 10px;
  top: 15px;
}
#header #search_container .search-content #search-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
#header #search_container .search-content #search-area input {
  width: 100%;
  height: 20px;
  font-size: 1.2rem;
  padding: 19px;
  border: none;
  border-radius: 15px;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  outline: none;
  font-family: "Roboto", sans-serif;
}
#header #search_container .search-content .results {
  padding: 0px;
  max-height: 600px;
  overflow-y: scroll;
}
#header #search_container .search-content .results ul {
  padding: 0px;
  margin: 0px;
}
#header #search_container .search-content .results ul li {
  list-style: none;
  opacity: 0;
  display: none;
  border-radius: 3px;
  transition: all 0.5s linear;
}
#header #right_container {
  display: flex;
  justify-content: space-around;
  margin: 0px 20px;
}
#header #right_container button {
  border: none;
  color: red;
  background: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 0px 30px;
}
#header #right_container button :hover {
  color: white;
  text-decoration: none;
}
#header #right_container #list a {
  text-decoration: none;
  color: inherit;
}

figure {
  width: 100%;
  padding-top: 6rem;
}

.best_movies_title {
  text-align: center;
  margin: 2rem;
}
.best_movies_title h2 {
  font-size: 3rem;
  font-family: "Roboto", sans-serif;
  color: rgb(230, 11, 11);
  text-shadow: 0 0 5px #f1eef1, 0 0 10px #eee7ee, 0 0 20px #e2dbe2, 0 0 20px #f1e9f1, 0 0 10px #dad1d9;
}

#movie-container {
  margin: auto;
  margin-top: 2rem;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-evenly;
}
#movie-container .movie-element {
  margin: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: rgba(177, 10, 228, 0.336) 0px 8px 24px;
}
#movie-container .movie-element .movie-poster {
  height: 400px;
  width: 280px;
}
#movie-container .movie-element .movie-poster img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  transition: all 0.2s ease-in;
}
#movie-container .movie-element .movie-poster :after {
  content: "\a";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  opacity: 0;
  transition: all ease 0.5s;
}
#movie-container .movie-element .movie-poster :hover:after {
  opacity: 1;
}
#movie-container .movie-element .movie-decription {
  width: 280px;
  height: 140px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  top: 30rem;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.4s ease-in;
  border-radius: 20px;
  font-family: "Poppins", sans-serif;
}
#movie-container .movie-element .movie-decription .movie-title {
  padding: 6px;
  text-align: center;
  overflow: hidden;
}
#movie-container .movie-element .movie-decription .movie-title a {
  font-size: 1.5rem;
  font-weight: 500;
  color: white;
}
#movie-container .movie-element .movie-decription .movie-title :hover {
  color: #f70606;
}
#movie-container .movie-element .movie-decription .movie-element-tags {
  width: 245px;
  display: flex;
  justify-content: space-around;
  padding: 1.2rem 0;
}
#movie-container .movie-element .movie-decription .movie-element-tags .movie-rating {
  font-size: 1.2rem;
  font-weight: 500;
  text-shadow: 0 0 5px red, 0 0 10px red;
  color: #ffffff;
}
#movie-container .movie-element .movie-decription .movie-element-tags .add-movie-to-list {
  font-size: 1.4rem;
  text-shadow: 0 0 5px red, 0 0 10px red;
  color: #f1eef1;
}
#movie-container .movie-element .movie-decription .movie-element-tags .add-movie-to-list :hover {
  color: white;
  cursor: pointer;
}
#movie-container .movie-element .movie-element:hover {
  border: 2px solid red;
}
#movie-container :hover .movie-decription {
  top: 16.4rem;
}

/* responsiveness and media queries */
@media screen and (max-width: 950px) {
  #logo {
    width: 200px;
    height: auto;
  }
}
@media screen and (max-width: 700px) {
  #header {
    flex-direction: column;
  }
  #page-heading {
    padding-top: 140px;
  }
  #right_container {
    margin: 10px;
  }
  #search_container {
    margin: 10px;
  }
  #back-to-home {
    top: 15px;
    left: 15px;
    margin: 0;
  }
}
@media screen and (max-width: 700px) {
  #page-heading {
    font-size: 4rem;
  }
}
@media screen and (max-width: 550px) {
  #page-heading {
    font-size: 4.5rem;
    padding-top: 140px;
  }
  .page-navigation {
    flex-direction: column;
  }
}
@media screen and (max-width: 380px) {
  #page-heading {
    padding-top: 150px;
  }
}/*# sourceMappingURL=style.css.map */