* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.mainContainer {
  width: 100%;
  height: fit-content;
  background-color: rgb(15, 11, 83);
  display: flex;
padding: 10rem 1.5rem 4rem;
border: none;
flex-wrap: wrap;
column-gap:40px;
position: relative;
padding-bottom: 8rem;
  /* flex-direction: column; */
   justify-content: flex-start; 
  align-items: flex-start; 
  font-family: "Lucida Sans",
  "Lucida Sans Regular",
  "Lucida Grande",
  "Lucida Sans Unicode",
  Geneva,
  Verdana,
  sans-serif;
}

.mainContainer h1 {
  /* font-weight: normal; */
  text-transform: uppercase;
  font-size: 2.3rem;
  margin-top: -5rem;
  margin-bottom: 2rem;
  text-align: center;
  font-style: italic;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.header{
  width: 100%;
  height: fit-content;
  padding: 1rem 3rem;
  background-color: rgba(6, 4, 51, 0.815);
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  box-shadow: 2px 2px 5px 1px rgb(24, 13, 189);
  position:fixed;
  top: 0;
  z-index: 9999;
  border: none;
  backdrop-filter: blur(8px);

}

.header .btn{
  width: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background-color:transparent;
  height: 100px;
  position: relative;
  padding-bottom: 15px;
}

.header button{
  padding:0.3rem;
  width: 100px;
  border-radius: 10px;
  color: goldenrod;
  /* border: none; */
  outline: none;
  cursor: pointer;
    border: 2px solid rgb(19, 9, 207);
    font-weight:500;
      background-color: transparent;
position: relative;

}

.header button::before{
  content: '';
  display:block;
  height: fit-content;
  width: 400px;
  /* max-width: 100%; */
  background-color:rgba(0, 0, 0, 0.514);
  position: absolute;
  color: antiquewhite;
  cursor: text;
  /* top: -80%; */
    /* left: 50%; */
    z-index: 22;
    /* transform: translate(-50%, -50%); */
  /* white-space: nowrap; */
  /* bottom: ; */
  font-size: 0.75rem;
  padding: 0.5rem ;
  border-radius: 3px;

}

.header .Sort::before{
      content: 'Toggle to sort movies from descending to ascending order and vise versa by ranking.';
      text-align: center;
  position: absolute;
  /* width: 300px; */
  height: fit-content;
  transform: scale(0);
  top: 0;
  bottom:-50% ;
  left: -200%;
    transition: transform 0.5s ease-in-out,
      left 500ms ease-in-out, bottom 500ms ease-in-out,
      top 500ms ease-in-out,right 500ms ease-in-out;
  /* bottom: 100%; */
  
}

.header .Sort:hover::before {
  transform: scale(1);
    width: 400px;
  bottom: 100%;
  top: -200%;
  left:0;
}


.notice{
  font-size: 1rem;
    display: none;
    position: absolute;
    /* padding: .1rem 1rem; */
    left: 0;
    right: 0;
    bottom: 0;
    color: antiquewhite;
    width: 100%;
    transform: scale(0);
    background-color: rgba(228, 166, 8, 0.671);
    transition: transform 500ms ease-in-out;
}





.additional-margin{
  margin-bottom: 10px;

}

.reveal{
  display: block;
  transform: scale(1);
   padding: .1rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
}

.header .Reset::before {
  content: 'Click to reload page';
  display: block;
  text-align: center;
  height: fit-content;
  position: absolute;
  /* right: -80%; */
top: 0;
  bottom: -50%;
  right: 0;
  left: -150%;
  transform: scale(0);
  transition: transform 0.5s ease-in-out,
    right 500ms ease-in-out, bottom 500ms ease-in-out,
    top 500ms ease-in-out;
}

.header .Reset:hover::before {
  transform: scale(1);
    width: 200px;
    bottom: 100%;
    top: -200%;
    left: -30%;
  }

.textContainer{
position: relative;
padding: 2rem 10rem 0.9rem;
display: block;
overflow: hidden;
/* background-color: aqua; */
margin-bottom: 10px;
white-space: nowrap;

}

     

.textContainer .text1{
  color: goldenrod;
font-family: "Lucida Sans",
"Lucida Sans Regular",
"Lucida Grande",
"Lucida Sans Unicode",
Geneva,
Verdana,
sans-serif;
position: absolute;
cursor: pointer;
transition: 2s ;
z-index: 2;
top: 5%;
/* white-space: nowrap; */
font-size: 40px;
right: 0;
bottom: 0;
left: 0;
}

.text2{
width: 0;
    /* color: rgb(30, 21, 201); */
    position: absolute;
  top: 5%;
  bottom: 0;
  left: 0;
  z-index: 3;
  font-family: "Lucida Sans",
  "Lucida Sans Regular",
  "Lucida Grande",
  "Lucida Sans Unicode",
  Geneva,
  Verdana,
  sans-serif;
  cursor: pointer;
  transition: 1ms ease-out;
  font-size: 40px;
  font-weight: bold;
  opacity: 0;
  /* padding: 2rem 6.5rem 0.8rem; */
}

.textContainer:hover .text2{
    color: rgb(190, 185, 185);
   opacity: 1;
  width: 100%;
    font-size: 40px;
   background-color:transparent;
 transition: 1s;
 
}
.textContainer:hover .text1{
    color: rgb(190, 185, 185);
 transition: 2.5s;
 
}


input{
  display: block;
  padding: 0.2rem 0.9rem;
  border-radius: 20px;
  font-size: 1rem;
  outline: none;
  color: white;
  /* border:2px solid rgb(19, 9, 207) ; */
  border:2px solid rgb(15, 11, 83) ;
    /* background-color: rgb(6, 4, 51); */
    background-color: transparent;

}

.movieContainer{
  width: 400px;
  height: 500px;
  display: block;
  background-color:rgb(29, 23, 138) ;
box-shadow: 2px 5px 5px rgb(49, 40, 233), 0 -5px 0 rgb(49, 40, 233);
border-radius: 10px;
margin-top: 40px;
position: relative;
    z-index: 5;
    overflow: hidden;

}

/* input::placeholder{

} */

input:focus{
    border:2px solid rgb(19, 9, 207) ;
}

.filmWrapper{
  position: relative;
  width: 100%;
  height: 500px;
  /* background-color: yellow; */
}

.filmWrapper img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movieDetailsBox{
  display: flex;
  position:absolute;
  bottom: 0;
  width: 100%;
  padding: 1rem 1rem;
  background-color: rgba(6, 4, 51, 0.911); 
   align-items: center;
  justify-content: space-between;
    color: rgb(190, 185, 185);
    transition:1s ease-in;
  }

.titleCont{
  /* background-color: aqua; */
  width: 50%;
  word-wrap: normal;
}

.movieDetailsBox span{
  width: 40px;
  background-color: rgb(15, 11, 83);
  padding: 0.3rem;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 1px 2px 0px rgb(49, 40, 233);
  text-align: center;
}
 .movieDetailsBox span.blue{
  color: rgb(102, 102, 235);
}
.movieDetailsBox span.green{
  color: rgb(18, 156, 18);
}
.movieDetailsBox span.red{
 color: rgb(206, 22, 22);
}

.overview{
  width: 400px;
   max-width: 100%;
   height:0;
   color: beige;
  background-color: rgba(17, 14, 83, 0.904);    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow: auto;
    padding: 2rem;
    opacity:0;
      transition: 1s ease-out;

}

.overview > small{
  width: 100%;
  font-weight: bold;
}

.overview::-webkit-scrollbar-thumb {
  background-color: rgb(90, 75, 156);
  border-radius: 20px;
  border: 3px inset rgba(0, 0, 0, 0.3);
}

.overview::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.overview::-webkit-scrollbar {
  width:0.5rem;
  height: 0.5em;
}

.movieContainer:hover .overview{
  opacity: 1;
  height: 500px;
  transition: 1s;
}

.movieContainer:hover .movieDetailsBox{
  opacity: 0;
}

.overview h4 {
  font-size: 24px;
  margin-bottom: 10px;
}

.triangle-wrapper{
  width: 100%;
  height:100px ;
  position: absolute;
bottom: 0;
  left: 0;
  z-index: 5;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.151), rgb(15, 11, 83));
  /* background-color: aqua; */
/* z-index: 1; */
/* background-color: transparent; */
/* overflow: hidden; */

}

.Dev-contact-cont{
  width: 100%;
  padding: 20px 25px 10px 10px;
  font-size: 1rem;
  position: relative;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.151), rgb(15, 11, 83));
  /* font-weight: bold; */
  display: flex;
  color: white;
  letter-spacing: 1.5px;
  /* background-color: orangered; */
  /* text-shadow: 1px 1px 1px goldenrod; */
  z-index: 2;
  font-weight: 600;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  font-family: "Lucida Sans",
      "Lucida Sans Regular",
      "Lucida Grande",
      "Lucida Sans Unicode",
      Geneva,
      Verdana,
      sans-serif;
}

i{
  margin-left: 3px;
    color: blue;
      text-shadow: 1px 1px 2px goldenrod;
}
a{
  text-decoration: none;
  color: goldenrod;
  /* font-weight: bold; */
  /* text-shadow: 1px 1px 2px white; */

}

.Dev-contact-wrapper{
  width: 400px;
  max-width: 100%;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: auto;
  background-color: rgb(15, 11, 83);
}

 
 .triangle a {
   color: rgba(20, 6, 70, 0.973);
   text-decoration: none;
  display: block;
  width: 100%;
 }

 .triangle {
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid rgb(228, 166, 10);
  position: absolute;
  z-index: 10;

  top: 20%;
  right: 2%;
  bottom: 0;
}

.triangle i {
  text-align: center;
  font-size: 1.8rem;
  /* margin-top: 60px; */
  /* color: var(--text-color); */
  position: absolute;
     color: rgb(2, 2, 37);
  top: 50%;
  left: 50%;
  transform: translate(-60%, 50%);

}

.triangle a {
  color: var(--text-color);
}


@media (max-width: 1300px){
  .header {
          width: 100%;    
            height: fit-content;
      padding: 1rem;
      background-color: rgba(6, 4, 51, 0.815);
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 2px 2px 5px 1px rgb(24, 13, 189);
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 9999;
      border: none;
      backdrop-filter: blur(8px);
  
    }
  
    .header .btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color:transparent;
      height: 100px;
      position: relative;
      padding: 0.5rem ;
      margin: 0 auto;
    }
  
    .header button {
      padding: 0.3rem;
      width: 100px;
      border-radius: 10px;
      color: goldenrod;
      outline: none;
      cursor: pointer;
      border: 2px solid rgb(19, 9, 207);
      font-weight: 500;
      background-color: transparent;
  
  
    }

    .header .Sort::before{
      content: 'Toggle to sort movies from descending to ascending order and vise versa by ranking.';

      text-align: start;
      width: 300px;
      height: fit-content;
      position: absolute;
      transform: scale(0);
      left: -150%;
      top: 0;
      bottom: 0;
      transition: transform 0.5s ease-in-out,
          left 500ms ease-in-out, bottom 500ms ease-in-out,
          top 500ms ease-in-out;
    }

        .header .Sort:hover::before{
          transform: scale(1);
          bottom: 100%;
          top: -200%;
          left: -30%;
        }

        .header .Reset::before{
          content: 'Click to reload page';
          display: none;
          text-align: center;
          height: fit-content;
          position: absolute;
          left: -150%;
          right: 0;
          top: 0;
          bottom: 0;
          transform: scale(0);
          transition: transform 0.5s ease-in-out,
          right 500ms ease-in-out
          ,bottom 500ms ease-in-out,
          top 500ms ease-in-out;
        }
  
    .header .Reset:hover::before{
      transform: scale(1);
      bottom: 100%;
      top: -200%;
      right: 30%;
      width: 200px;

    }
    
  
    input {
      max-width: 100%;
      display: block;
      padding: 0.2rem 0.9rem;
      border-radius: 20px;
      font-size: 1rem;
      outline: none;
      color: white;
      border: 2px solid rgb(15, 11, 83);
      background-color: transparent;
  
    }

        .mainContainer {
          min-height: 100vh;
          background-color: rgb(15, 11, 83);
          display: flex;
          padding: 12rem 1.5rem 4rem;
          column-gap: 40px;
          position: relative;
          justify-content:center;
          align-items: center;
          font-family: "Lucida Sans",
            "Lucida Sans Regular",
            "Lucida Grande",
            "Lucida Sans Unicode",
            Geneva,
            Verdana,
            sans-serif;
        }

                .mainContainer>* {
                  flex-basis: 400px;
                  flex-grow: 1;
                  flex-shrink: 0;
                }

                .movieContainer {
                   max-width: 100%;
                  height: 500px;
                  display: block;
                  background-color: rgb(29, 23, 138);
                  box-shadow: 2px 5px 5px rgb(49, 40, 233), 0 -5px 0 rgb(49, 40, 233);
                  border-radius: 10px;
                  margin-top: 40px;
                  position: relative;
                  overflow: hidden;
        
                }


/* .triangle { */
  /* width: 5rem; */
  /* height: 5rem; */
  /* text-align: center; */
  /* background-color: rgba(228, 166, 10, 0.322); */
  /* border: 5px solid rgb(21, 15, 143); */
  /* border-radius: 10%; */
  /* transform: rotate(45deg); */
  /* position: absolute; */
  /* right: 3%; */
  /* z-index: 3; */
  /* top: 50%; */
  /* border-bottom: 0; */
  /* overflow: hidden; */
/* } */
.triangle {
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: transparent; */

  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid rgb(228, 166, 10);
  position: absolute;
  z-index: 10;
  /* border-radius: 10px; */
  /* background-color: rgb(228, 166, 10); */
  /* border: 5px solid rgb(21, 15, 143); */
  top: 45%;
  right: 2%;
  bottom: 0;
}
.triangle i {
  text-align: center;
  font-size: 1.5rem;
  /* margin-top: 60px; */
      color: rgb(2, 2, 37);
        position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, 50%);

}
.triangle a {
  color: var(--text-color);
}


.Dev-contact-cont {
  width: 100%;
  padding: 25px 25px 0 10px;
  font-size: .83rem;
  display: flex;
  color: rgb(223, 221, 217);
  text-shadow: 1px 1px 1px goldenrod;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  letter-spacing: 1.5px;
  font-family: "Lucida Sans",
    "Lucida Sans Regular",
    "Lucida Grande",
    "Lucida Sans Unicode",
    Geneva,
    Verdana,
    sans-serif;
}

.triangle-wrapper {
  width: 100%;
  height: fit-content;
  position: absolute;
  bottom: 0;
  /* padding-bottom:55px ; */
  left: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.151), rgb(15, 11, 83));
  /* background-color: aqua; */
  /* z-index: 1; */
  background-color: transparent;
  overflow: hidden;

}

i {
  margin-left: 3px;
  color: blue;
  text-shadow: 1px 1px 1px goldenrod;
}

a {
  text-decoration: none;
  color: goldenrod;
  /* font-weight: bold; */
  /* text-shadow: 1px 1px 2px white; */

}

.Dev-contact-wrapper {
  width: 400px;
  max-width: 100%;
margin-left: -10px;
padding: 4px;
  /* background-color: orangered; */
}

.triangle a {
  color: rgba(20, 6, 70, 0.973);
  text-decoration: none;
  display: block;
  width: 100%;
    text-shadow: 1px 1px 2px white;
}

}