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

    body{
        font-family: 'Poppins', sans-serif;
        background-color: #141414;
        
    }

    
    header{
        background-color:rgb(71, 9, 13);
        width: 100%;
        padding: 1rem;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 2em;
    }

    .search {
        background-color: transparent;
        border: 2px solid #fff;
        border-radius: 50px;
        font-family: inherit;
        font-size: 1rem;
        padding: 0.5rem 1rem;
       
        color: #fff;
        outline: none;
      }
      
      .search::placeholder {
        color: #7378c5;
      }
      
    
    
    
    .container{
        width:100%;
        position: relative;
        margin-top: 4em;
        padding: 0 1em; 
        
        
    }
      
    .movies{
        max-width: 100%;
        height: auto;
        white-space: nowrap;
        overflow: scroll;
        overflow-y: hidden;

       
        
    }

    .movies::-webkit-scrollbar{
        display:none;
    }

    h1{
        color:white;
        padding: 0;
        margin: 0;
    }

    .item{
        display: inline-block;
        overflow: hidden;
        width: 25%;
        height: 400px;
        background-color:rgb(71, 9, 13);
        border-radius: 5px;
        color: white;
        margin: 10px 7px;
        cursor: pointer;  
        position: relative;
       
    }

    .item:first-child{
        margin-left: 0;
    }

    .item:hover{
        box-shadow: 3px 0px 5px rgb(201, 197, 197);
        transition: all .3s ease-out;
    }

    

    .image{
        width: 100%;
        max-width: 100%;
        display: block;
        height: 300px;
        object-fit: cover;
        object-position:center;
        border-radius: 5px;
    }
 


    
    .btn{
        position: absolute;
        border: none;
        outline: none;
        background: none;
        padding: 5px;
        cursor: pointer;
        display: none;
        z-index: 1;
    }

    .prev{
        top:40%;
        left: 15px;
    }

    .next{
        top:40%;
        right: 15px;
    }

    .btn:hover{
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 8px;
    }


    #big{
    
        width:250px;
        height: 300px;
        left: 40%;
        top:25%;
        margin:0 auto;
        position: absolute;
        transform: scale(1.5);
        border-radius: 5px;
        transition: all .3s ease-out;
    }

    .movie-info { 
        color: #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .5em;
        letter-spacing: 0.5px;
      }
      
      .movie-info h3 {
         width:80%;
          margin-top: 0;
          overflow: hidden;
          white-space: pre-wrap;
        
      }
      
      .movie-info span {
         
        background-color: rgba(0, 0, 0, 0.2);
        padding: 0.25rem 0.5rem;
        border-radius: 3px;
        font-weight: bold;
      }
      
      .movie-info span.green {
        color: lightgreen;
      }
      
      .movie-info span.orange {
        color: orange;
      }
      
      .movie-info span.red {
        color: red;
      }

      .overview{
        background-color: rgba(255, 255, 255, 0.849);
        color:#141414;
        text-align: center;
       
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        max-height: 100%;
        height: auto;
        width:  100%;
        max-width: 100%;
        transform: translateY(101%);
        overflow-y: hidden;
        white-space: pre-wrap;
       
        transition: transform 0.3s ease-in;

      }

      .overview h3{
         font-weight: bold;
          margin-top: -2em;
      }

      .overview p{
          margin:0 1em;
          margin-top: -2em;
          line-height: 15px;
          font-size: 1rem;
      }

     

      .item:hover .overview {
        transform: translateY(0);
      }


    @media(max-width:840){
        .overview p{
            margin:0 .2em;
            margin-top: -6em;
      
            font-size: .3rem;
        }
    }



    @media(max-width:740px){
        .movies{
            -webkit-overflow-scrolling:touch;
        }


        .item{
            width: 130px; 
            height: 220px;
        }

        .item:hover{
            box-shadow: none;}

         .image{
       
            height: 120px;
            object-fit: cover;
            object-position:top;
            border-radius: 5px;
        }

        .container{
            margin-top: .5em; 
        }

        .movie-info h3{
            font-size: .75rem;
        }

        .movie-info span{
            font-size: .8rem;
        }

        .overview h3{
            font-size:.8rem ;
            font-weight: bold;
             margin-top: -3em;
         }
   

        .overview p{
            margin:0 .3em;
            margin-top: -6em;
      
            font-size: .45rem;
        }

        

        

       

       
    


    }