body {
        margin: 0px;
        background-image: linear-gradient(90deg, rgb(18, 54, 46), rgb(1, 2, 66), rgb(53, 2, 44));
        display: flex;
        flex-direction: column;
        align-items: center;
}
    
/* navbar */
#navbar {
                background-image: linear-gradient(0deg, rgb(1, 3, 131), rgb(0, 255, 255));
                background-repeat: no-repeat;
                height: 50px;
                position: fixed;
                    width: -webkit-fill-available;
}
#navbar > div{
                display: flex;
                justify-content: center;
}
#navbar > div h1{
                margin: 0px;
                text-align: center;
                color: white;
} 

/* slideshow */
#slideshow {
                padding: 2%;
                    /* padding-top: 64px; */
                        margin-top: 60px;
                    width: 90%;
                    height: 500px;
                    max-height: 500px;
                    object-fit: cover;
                    border-radius: 10px;
                    box-shadow:0 10px 10px 0 rgb(0 255 245 / 20%), 0 13px 20px 0 rgb(0 255 245 / 19%);
}
#query{
    font-size: 20px;
    font-weight: 600;
}

#searchDetails{
  display: none;
  margin-top: 5%;
    overflow-y: scroll;
    height: 380px;
}
#moviesResult {
            max-height: 380px;
            overflow-y: scroll;
            /* overflow: hidden; */
            border-radius: 0 0 20px 20px;
            margin-bottom: 10px;
            border-top: none;
            /* overflow: scroll; */
            background-color: transparent;
            color: white;
            display: none;
            /* animation: scale-in-ver-top 0.5s cubic-bezier(.25, .46, .45, .94);
            -webkit-animation: scale-in-ver-top .5s cubic-bezier(.25, .46, .45, .94); */
        }
.searchHolder{
    display: grid;
        grid-template-columns: 95% 5%;;
    grid-template-rows: 60px;
}
.searchHolder img{
        width: 100% !important;
    height: 98% !important;
    border-radius: 0px 10px 10px 0px !important;
}
.zIndx {
            z-index: 100;
}
 .searchResults {
            display: -webkit-flex;
            display: flex;
            cursor: pointer;
            height: 127px;
            /* -webkit-align-items: center;
            align-items: center; */
            /* -webkit-flex-direction: column;
            flex-direction: column; */
            background: transparent;
            background-color: rgba(0, 0, 0, 0.205);
            border: 1px solid #920262;
            border-radius: 10px;
            margin-top: 15px;
            padding: 0 24px;
            transition: .1s;
            backdrop-filter: blur(2px);
}
 .searchResults:hover{
      backdrop-filter: blur(10px);
      box-shadow: 1px 9px 5px #78cc76;
      font-weight: 600;
 }
 .searchResults img{
     max-width: 100px;
    max-height: 125px;
    /* float: left; */
    border-radius: 10px;
    /* margin-left: 90%; */
    /* margin-bottom: 64%;
 }
.searchInfo {
            /* display: -webkit-flex;
            display: flex;
            background: transparent;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            width: 100%; */
            padding: 2px 0;
}
.tcontainer{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tcontainer div{
    font-size: 30px;
}
/* erorMsg */
#alert{
    flex-direction: column;
    justify-content: center;
    margin: 10px;
}
#errorMessage{
    text-align: center;
    display: none;
    font-size:22px;
    color: red;
}
#errorGIF{
    display: none;
    margin-left: 10%;
    width: 90%;
    height: 90vh;
    border: 2px dotted orangered;
    border-radius: 10px;
    box-shadow:0 10px 10px 0 rgb(255 0 0 / 20%), 0 13px 20px 0 rgb(255 0 0 / 19%);
}

/* movie details showing */
#movieContainer{
    height: 60vh;
    margin: 20px;
    padding: 10px;
    /* display: grid; */
    display: none;
    grid-template-columns: 60% 40%;
    grid-template-rows: auto;
    /* grid-gap: 3%; */
    grid-template-areas: "a b";
    /* border: 2px solid red; */
}
#movie-Poster{
    grid-area: a;
    border: radius 20px;
    margin: 0px;
}
#movie-Poster img{
    width: 100%;
    height: 90vh;
    border-radius: 15px;
    box-shadow:0 10px 10px 0 rgb(0 255 245 / 20%), 0 13px 20px 0 rgb(0 255 245 / 19%);
}
#movieDetails{
    height: 60vh;
    margin: 15px;
    grid-area: b;
    display: flex;
    flex-direction: column;
    font-size:30px;
    color: white;
}

/* scrollbar */
  ::-webkit-scrollbar {
            width: 5px;
            margin-right: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: grey;
            border-radius: 50px;
        }

        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px grey;
            border-radius: 50px;
        }