body{
  margin: 0;
  background-color: var(--primary-color);
  font-family:  sans-serif;
}
#iconn{
  margin-left: 7%;
  height: 30px;
  width: 30px;
  margin-top: auto;
  margin-bottom: auto;
}
:root{
  --primary-color:#f1f1f1;
  --secondary-color:#000;
}
.dark-theme{
  --primary-color:#000;
  --secondary-color:#f1f1f1;
}

/* navbar  */
.nav-bar{
  display: flex;
  background: var(--secondary-color);
  color: var(--primary-color);
  padding: 10px;
}



#title{
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 5%;
  font-weight: 600;
  font-size: larger;
}
#list-items ul{
  list-style: none;
  display: flex;
 
}
#list-items li{
  margin: 10px;
  margin-left: 20px;
  opacity: 0.7; 
  cursor: pointer;
  color: var(--primary-color);
}
#list-items a{
  text-decoration: none;
}

#list-items{
  margin-left: 10%;
}
#search-box{
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 15%;
}

#search-but{
  padding: 8px;
  padding-left: 5%;
  padding-right: 10%;
  outline: none ;
  border-radius: 5px;
  color: var(--secondary-color);
}

#search-but:hover{
  box-shadow: 2px 2px 2px var(--secondary-color);
}

input[type=search]{
  background-image: url('/searchicon.svg'); 
  background-repeat: no-repeat;
  background-position: left;
  font-size: large;
  background-color:var(--primary-color) ;
  opacity: 0.9;
}
@media  (max-width: 1180px) {
  #search-box{
      margin-left: 10%;
   }
}
@media  (max-width: 830px) {
  #search-box{
      margin-left: 5%;
   }
   #list-items li{
      margin-left: 0px;
      padding-left: 0px;
   }
   #list-items ul{
      padding-left: 0px;
   }

}
.menu-but{
  display: none;
  margin-top: auto;
  margin-bottom: auto;
}
.menu-but{
  background-color:  var(--secondary-color);
  border: none;
}

@media (max-width: 650px){
  #list-items{
      display: none;
  }
  .menu-but{
      display: block;
    } 
  .search-box{
    padding: 0%;
  }
   #mobileMenu li{
      padding-bottom: 10px;
   }
   .button{
    width: 2rem;
    height: 2rem;
   }
  
}

#list-item {
  display: none;
}

#list-item ul{
  list-style: none;
}
#list-item li{
  margin: 10px;
  margin-left: 20px;
  opacity: 0.7; 
  cursor: pointer;
  color: var(--primary-color);
}
#list-item a{
  text-decoration: none;
}


#mobileMenu{
background-color:  var(--secondary-color);
opacity: 0.4;
color: var(--primary-color);
}
#mobileMenu ul{
  margin-left: 20px;
  display: block;
}

@media (min-width: 650px){
  #mobileMenu{
      display: none;
  }
}



.movie-overlay {
  display: flex;
  background: var(--primary-color);
  padding: 20px;
  border-radius: 10px;
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
}

.hidden {
  display: none !important;
}
#search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.movie-overlay {
  color:var(--secondary-color) ;
  display: flex;
  background:wheat;
  padding: 20px;
  border-radius: 10px;
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
  z-index: 1000;
}

.movie-container {
  display: flex;
  
}


.movie-info {
  flex: 1;
  text-align: left;
}

.hidden {
  display: none !important;
}
.close-btn {
  position: absolute;
  top: 15px;
  left: 15px;
  background: red;
  color: var(--secondary-color);
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
}
.close-btn:hover {
  background: darkred;
}


.movie-container{
background-color: aquamarine;
box-shadow: 0 8px 6px -6px var(--secondary-color);
margin-right: auto;
margin-top: 60px;
width: 100%;
height: 100%;
}
.movie-container img{
width: 50%;
height: 100%;
background-size: cover;
margin-left: auto;
margin-right: auto;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
@media  (max-width: 1020px){
.movie-item{
    flex-wrap: wrap;
}
.movie-container{
  margin-left: 30%;
}
}
.mov-tit{
padding-right: 10px;
}

#list-items li {
  position: relative;
  font-size: inherit;
  font-family: inherit;
  padding: 0.5em 1em;
  outline: none;
  border: none;
}

#list-items li::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color:  var(--secondary-color);
  background-color: var(--secondary-color);
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.25s ease-in-out;
}

#list-items li:hover {
  cursor: pointer;
  color: var(--secondary-color);
}

#list-items li:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
  background-color: var(--primary-color);
}
.movie-poster{
  width:50%;
  height: 50%;
}

.movie-overlay{
  
  background: var(--secondary-color)0.9;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  color: var(--primary-color);
}
.movie-poster img{
 width: 70%;
 box-shadow:  0 6px 20px 0 var(--secondary-color);
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
}
.close-btn{
  margin-left: auto;
}

.button {
  position: absolute;
  width: 4em;
  height: 4em;
  border: none;
  background: rgba(199, 13, 59, 0.458);
  border-radius: 5px;
  transition: background 0.5s;
  margin: 20px;
  float: right;
}

.X {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2em;
  height: 1.5px;
  background-color: var(--secondary-color);
  transform: translateX(-50%) rotate(45deg);
}

.Y {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2em;
  height: 1.5px;
  background-color: var(--primary-color);
  transform: translateX(-50%) rotate(-45deg);
}

.close {
  position: absolute;
  display: flex;
  padding: 0.8rem 1.5rem;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  top: -70%;
  left: 50%;
  width: 3em;
  height: 1.7em;
  font-size: 12px;
  background-color: var(--secondary-color);
  color: rgb(187, 229, 236);
  border: none;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
}

.button:hover {
  background-color: rgb(211, 21, 21);
}

.button:active {
  background-color: rgb(130, 0, 0);
}

.button:hover > .close {
  animation: close 0.2s forwards 0.25s;
}

@keyframes close {
  100% {
    opacity: 1;
  }
}
.movie-info{
  margin: auto;
  margin-left: 0;
  color: #fff;
}
.movie-info h1{
  color: goldenrod; 
  font-size:xx-large;
  font-weight: bolder;
}

@media  (max-width: 640px){
  .movie-containers{
      display: block;
  }
  .movie-info{
      padding: 30px;
  }
  .movie-info h1{
      text-align: center;
  }
  .button{
      position: absolute;
  }
  .movie-poster img{
      width: 100%;
      height: 350px;
      border-bottom-left-radius: 10px;
  }
  .movie-poster{
    width:auto;
    height: auto;
  }

}
.movie-info span{
  color:lightgreen;
  font-weight: 700;
}


@keyframes appear {
  from {
    opacity: 0;
    clip-path: inset(100% 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

/* .movie-container {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 5% ;
} */



/* Upcoming text style */
@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");

#u {
  font-size: calc(5px + 3vh);
  line-height: calc(20px + 20vh);
/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  font-family: "Sacramento", cursive;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}



@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
/*     color: #fccaff;
    text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
      0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
  text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
  }
}
/* upcoming movie style */
#upcoming-movies-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.movie-item-up{
  background-color: aqua;
  width: 250px;
  height: 50%;
  margin: 10px;
  margin-left: 30px;
  box-shadow: 0 0 20px 3px #48abe0;
}
.movie-item-up p{
  text-align: center;
  padding: 15px;
}
.movie-item-up img{
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.movie-item-up:hover{
transform: scale(1.05);
box-shadow: 0 0 20px rgba(0, 255, 255, 1);
}

/* clicking movie style */
#movie-details {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  /* Instead of hidden class */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
/* searchinging movie style */

#search-results{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3%;
}
.movie-item{
  background-color: aqua;
  width: 230px;
  height: 50%;
  margin: 10px;
  margin-left: 30px;
  box-shadow: 0 0 20px 3px #48abe0;
}


.movie-item p{
  text-align: center;
  padding: 15px;
}
.movie-item img{
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.movie-item:hover{
transform: scale(1.05);
box-shadow: 0 0 20px rgba(0, 255, 255, 1);
}
.movie-item button{
  margin-bottom: 15px;
  padding: 5px;
  border-radius: 4px;
  border: 2px solid #111;
  box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1); 
}
/* dark theme mb off */
@media  (max-width: 900px){
  #iconn{
    display: none;
  }
}

/* fav delete but */
.button-fav{
  width: 20px;
  height: 50px;
}