/* navbar start */
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');

/* navbar start */
.custom-search{
  border-radius: 10%;
  height: 40px;
}
.custom-search:hover{
  box-shadow: rgb(53, 135, 202) 1.95px 1.95px 2.6px;
}

#logo{
  width: 90px;
}

footer{
  margin: 0;
  padding: 0;
}

 .search-box{
  width: fit-content;
  height: fit-content;
  position: relative;
}
.input-search{
  height: 50px;
  width: 50px;
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px;
  transition: all .5s ease-in-out;
  background-color: #22a6b3;
  padding-right: 40px;
  color:#fff;
}
.input-search::placeholder{
  color:rgba(255,255,255,.5);
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
}
.btn-search{
  width: 50px;
  height: 50px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  color:#ffffff ;
  background-color:transparent;
  pointer-events: painted;  
}
.btn-search:focus ~ .input-search{
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}
.input-search:focus{
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}

.navbar-nav>li>a{

  text-transform: uppercase;
  font-size: 12px;
  margin-right:20px;
  color: #fff;
}


.navbar-toggler {
    padding: .20rem .50rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid white;

    }

    .nav-link{
      color: #fff !important;
      font-size: 0.9rem !important;
      padding: 0 20px !important;
    }
    .nav-link:hover{
      color: #64f3f8 !important;
    }


.wrapper{
      width: 100%;
    position: absolute;
    height: 100%;
    background-color: rgb(39, 96, 202);
    clip-path: polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 71% 100%);
    transition: 1s all;
}

.navbar-brand{

  color:#fff;
  font-family: 'Allerta Stencil', sans-serif;
  margin-bottom: 4px;
  font-size: 27px;
}

.navbar-red:hover .wrapper{

  clip-path: polygon(81% 0, 100% 0, 100% 50%, 100% 100%, 65% 100%);

}

.navbar-brand:hover{

  color:#fff;
  
}

.navbar-red{
 align-items: center;
  background-color: rgb(0, 0, 0);
  color: #fff;

}

.all-show{

  z-index: 10;
}
/* navbar ends */

body{
    color: rgb(255, 255, 255);
    font-family: 'Dosis', sans-serif;
   background-size:cover;
   background-repeat: no-repeat;
  background-attachment: fixed;
    
   background-image: url('./img/bg5.jpg');
}
h3{
  margin: 5px;
font-family: 'Shadows Into Light', cursive;
}
.actorName{
font-family: 'Shadows Into Light', cursive;
}

#movie-backdrop {
    width: 100%;
}

.container {
    padding-top: 32px;
    min-height: 100vh !important;
}

#listOfActors {
    margin: 24px 16px 0 0;
}
/* cards used for actors and movies elements */
.movie-card, .actor-card{

  font-family: sans-serif;
  color: black;
    border-radius: 3%;
    background-color: #E5CB9F;
    padding: 0.5%;
    margin: 2%;
    cursor: pointer;
    word-wrap: break-word;
    transition: all .2s ease-in-out; 
}
.actor-card{
  display: flex;
  flex-direction: column;
}
.movie-card:hover , .actor-card:hover{
    transform: scale(1.1); 
    box-shadow: rgb(209, 47, 60) 0px 5px 15px;
}
.movie-card img , .actor-card img{
   
    background-color: rgb(85, 211, 233);
    margin: 1%;
    padding: 1%;
    border-radius: 7%;
}
#home-btn{
    cursor: pointer;
}

.custom-container{
  font-size: 1.3rem ;
  font-family: sans-serif;
  border-radius: 4px;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  opacity: 0.9;
  padding: 10px;
  background-image: linear-gradient(
    40deg,
    #154645 0%,
    #165664e8 45%,
    #525124 100%
  );
  
}

.custom-container img{
  border-radius: 4px;
}


#about-container{
  font-size: 1.4rem;
  opacity: 0.9;
  border-radius: 4px;
 height: 600px;
  background-color: #22a6b3  ;
}
#about-container div{
  padding: 20px;
  margin-top: 30px;
}

.blue_flag{
  display: none;
  opacity: 0;

}

.movie-card:hover .blue_flag {
    display:flex;
    align-items: center;
    justify-content: space-evenly;
    /* height: 9%; */
    font-size: 18px;
   
    color: #fff;
    background: #833ab4;
    background: linear-gradient(90deg,#833ab4 0,#ac1919 50%,#fcb045 100%);
    clip-path: polygon(0 0,100% 0,90% 100%,0 100%);
  opacity: 1;
    animation: showHide 0.30s ease-in;

}


footer{
    height: 60px;
    background-color:rgb(3, 10, 10);
}

h1, h2, h4, b{
  /* font-family: 'Trebuchet MS', sans-serif;
   */
   font-family: 'Shadows Into Light', cursive;
}

@keyframes showHide {
  0% {width:1%; opacity: 0;}
  40% {width:20%}
  50% {width:40%}
  60% {width:60%;}
  80% {width:80%;opacity: 1;}
  100% {width:100%;}
  
}