@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Mono:wght@300&family=Roboto+Slab:wght@300&display=swap');

:root{
    -md-dark-color:#1d1d1d;
    --dark-color: #171717;
    --light-dark-color: #292929;
    --yellow-color: #11cdd4;
    --white-color: white;
    


}

*{
    padding:0;
    margin:0;
    box-sizing: border-box;

}

body{
    font-family: 'Inter', sans-serif;

}
a{
    text-decoration: none;

}
img{
    width:100%;
    display:block;

}
.wrapper{
   
    min-height:100vh;
    background-color: var(--dark-color);
}

.wrapper .container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;

}

.search-container{
    background-color: var(-md-dark-color);
    height:180px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.logo{
    padding:1rem 0;
   
    border-bottom:1px solid var(--light-dark-color);

}
.logo p{
    font-size:2rem;
    color:#fff;
    font-weight: bold;

}
.logo p span{
    color:var(--yellow-color);
}
.search-element{
    display:flex;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    position:relative;
    
}
.search-element h3{
    align-self: center;
    margin-right: 1rem;
    font-size: 2rem;
    color:#fff;
    font-weight: 500;
    margin-bottom: 1.5rem;

}

.search-element .form-control{
    padding:1rem 2rem;
    font-size: 1.4rem;
    border:none;
    border-top-left-radius:3px;
    border-bottom-left-radius: 3px;
    outline:none;
    color:var(--light-dark-color);
    width:350px;

}
.search-list   {
    position:absolute;
    right:0;
    top:100%;
    max-height:500px;
    overflow-y:scroll;
    z-index:10;
}
.search-list .search-list-item{
    background-color:var(--light-dark-color);
    padding:0.5rem;
    border-bottom:1px solid var(--dark-color);
    width:calc(350px -8px);
    color: #555;
    cursor:pointer;
    transition:background-color 200ms ease;
}
.search-list .search-list-item:Hover{
    background: color #1f1f1f;
}
.search-list-item{
    display:flex;
    align-items:center;

}
.search-item-thumbnail img{
    width:40px;
    margin-right:1 rem;

}
.search-item-info h3{
    width:40px;
    margin-right: 1 rem;
}
.search-item-info p {
    font-size:0.8rem;
    margin-top:0.5rem;
    font-weight:600;
    opacity:0.6;
}

.search-list::-webkit-scrollbar{
    width:8px;
}
.search-list::-webkit-scrollbar-track{
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

}
.search-list::-webkit-scrollbar-thumb{
    background-color:var(--yellow-color);
    outline:none;
    bordr-radius:10px;
}
.hide-search-list{
    display:none;

}
.result-container{
    padding:3rem 0;

}
.movie-poster img{
    max-width:300px;
    margin:0 auto;
    border:4px solid #fff;

}
.movie-info{
    text-align: center;
    color:#fff;
    padding-top:3 rem;

}
.movie-title{
    font-size:2rem;
    color:var(--yellow-color);

}

.movie-misc-info{
    list-style-type:none;
    display:flex;
    align-items:center;
    justify-content: center;
    padding:1rem;

}

.movie-info .rated{
    background-color: var(--yellow-color);
    padding:0.4rem;
    margin:0 0.4rem;
    border-radius:3px;
    font-weight: 600;

}

.movie-info .released{
    font-size:0.9rem;
    opacity:0.9;
}
.movie-info writer{
    padding:0.5rem;
    margin:1rem 0;
}
.movie-info .genre{
    background-color:var(--light-dark-color);
    display:inline-block;
    padding:0.5rem;
    border-radius:3px;

}
.movie-info .plot{
    max-width :400px;
    margin:1 rem auto;
}
.movie-info .language{
    color:var(--yellow-color);
    font-style:italic;
}
.movie-info .awards{
    font-weight:300;
    font-size:0.9rem;

}
.movie-info .awards i{
    color:var(--yellow-color);
    margin:1 rem 0.7rem 0 0;
}

@media(max-width :450px){
    .logo p{
        font-size:1.4rem;
    }
    .search-element .form-control{
        width:90%;
        margin:0 auto;
        padding:0.5rem 1 rem;

    }
    .search-elemnt h3{
        font-size:1.4rem;
    }
    .search-list{
        width:90%;
        right:50%;
        transform:translateX(50%);
    }
    .search-list .search-list-item{
        width:100%;

    }
    .movie-misc-info li:nth-child(2){
        margin:0.8rem 0;
    }
}

@media(min-width:800px){
    .search-element{
        flex-direction: row;

    }
    .search-element h3{
        margin-bottom:0;

    }
    .result-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }
    .movie-info{
        text-align:left;
        padding-top:0;

    }
    .movie-info .movie-misc-info{
        justify-content: flex-start;
        padding-left:0;


    }
    .movie-info .plot{
        margin-left: 0;

    }
    .movie-info .writer{
        padding-left:0;
        margin-left:0;
    }
}
.mysign{
    color:#11cdd4;
}