@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');
*{
    padding: 0; 
    margin: 0; 
}

html{
    height: 100vh; 
    width: 100vw; 
}
body{
    position: relative; 
    z-index: 0; 
    width: 100vw; 
    height: auto; 
    overflow-x: visible;
    font-family: 'PT Sans Narrow', sans-serif;; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    margin: 0 auto; 
    background-image: url('assets/netflixBG.jpg'); 
    /* background-image: linear-gradient(45deg, black, rgb(18, 16, 16), rgb(40, 33, 33));    */
    background-color: black; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    color: white; 
}
.container{
    margin: 0px auto; 
    padding: 40px 0 22px 0; 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-start;
    width: 100vw;
    height: auto;  
    overflow-x: scroll; 
    overflow-y: visible; 
    white-space: wrap;
    background-color: transparent; 
    scrollbar-width: none;
    /* margin: 50px;  */
}
.container::-webkit-scrollbar { 
    width: 0;
    height: 0;
}
.movieCard{
    width: 220px; 
    height: 370px; 
    position: relative;
    display: block;
    flex: 1;
    transition: transform 500ms;
    flex-direction: column; 
    /* margin: 0 3px;  */
    background-image: linear-gradient(45deg, rgb(23, 22, 22), black);  
    margin-bottom: 20px; 
    box-shadow: 0px 5px 5px black; 
}
/* .movieCard:hover{
    background-image: linear-gradient(45deg, rgb(40, 36, 36), rgb(14, 14, 14));  
} */
.container:focus-within .movieCard,
.container:hover .movieCard {
  transform: translateX(-10%);
}
.movieCard:focus ~ .movieCard,
.movieCard:hover ~ .movieCard {
  transform: translateX(10%);
}
.container .movieCard:focus,
.container .movieCard:hover {
  transform: scale(1.2);
}
.movieCard{
    max-width: 100%;
}
img{
    width: 180px; 
    height: 280px; 
    padding: 20px 20px 0 20px; 
    object-fit: contain; 
    object-position: center;
    margin: 0 auto; 
}
p{
    max-width: 200px; 
    height: auto; 
    margin: 0 auto; 
    text-align: center; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0px 5px 5px black; 
}
h1{
    font-size: 60px; 
    font-weight: bolder; 
    width: 100%; 
    margin: 0 auto; 
    display: flex; 
    justify-content: center; 
    color: white(216, 13, 13); 
    text-shadow: 4px 4px 1px black; 
    background-image: linear-gradient(red, rgb(198, 12, 12)); 
    top: 0; 
    left: 0; 
}
form{
    margin: 60px auto 0; 
    letter-spacing: 2px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}
.search{
    width: 350px; 
    height: 30px; 
    border-radius: 5px; 
    text-align: center; 
    border-style: none; 
    box-shadow: 0px 5px 5px black; 
    transition: opacity 500ms; 
    margin: 0 auto 10px; 
}
.search:hover{
    opacity: .8;
}
button{
    border-style: none; 
    height: 30px; 
    width: 100px; 
    margin: 0 10px; 
    border-radius: 5px; 
    box-shadow: 0px 5px 5px black;  
    transition: transform 500ms; 
}
form button:hover {
  transform: scale(1.2);
  cursor: pointer; 
}
.searchButton{
    background-image: linear-gradient(45deg, rgb(216, 15, 15), rgb(255, 0, 0)); 
    font-weight: bold; 
}
.prevButton{
    background-image: linear-gradient(45deg, rgb(173, 179, 64), rgb(237, 237, 17)); 
    font-weight: bold; 
}
.nextButton{
    background-image: linear-gradient(45deg, rgb(17, 135, 45), rgb(9, 160, 64)); 
    font-weight: bold; 
}
.error{
    line-height: 30px; 
    display: flex; 
    flex-direction: column; 
    background-image: linear-gradient(rgb(255, 0, 0),  rgb(216, 15, 15)); 
    font-size: 20px; 
    height: 30px; 
    width: 310px; 
    border-radius: 5px; 
    text-shadow: none; 
    justify-content: center; 
    align-items: center; 
    box-shadow: 0px 5px 5px black; 
}
.display-none{
    display: none; 
}
.moviePage{
    position: fixed;
    top: 0; 
    left: 0;  
    width: 100vw; 
    height: 100vh; 
    background-color:rgba(26, 24, 24, 0.913);   
    z-index: 1; 
}
.moviePageCard{
    background-image: linear-gradient(45deg, black, rgb(12, 11, 11), rgb(31, 28, 28)); 
    display: flex; 
    flex-direction: column; 
    width: 400px; 
    height: 600px; 
    position: absolute; 
    top: calc((100vh/2) - 300px); 
    left: calc((100vw/2) - 200px); 
    z-index: 5; 
    border-radius: 10px; 
    padding: 10px; 
    box-shadow: 0px 5px 10px rgb(45, 43, 43); 
}
.movieTitle{
    text-align: center; 
    padding: 0; 
    font-size: 30px; 
    margin: 5px auto 0; 
    max-width: 340px
}
.moviePoster{
    width: 250px; 
    height: 350px; 
    padding: 5px; 
    margin: 0 auto; 
}
.movieInfo{
    width: 400px; 
    height: auto; 
    font-size: 15px; 
    line-height: 20px; 
    text-align: center; 
    margin: 12px 0; 
}
span{
    padding: 0 5px; 
    word-break: none; 
}
.spanContainer{
    max-width: 400px; 
}
.movieRatingsContainer{
    display: flex; 
    justify-content: space-around;
    padding: 8px 0; 
    border: 1px solid rgb(53, 50, 50);
    border-radius: 5px; 
    margin-top: 6px;  
}
.movieRatingsSource{
    font-size: 16px;
    margin-bottom: 5px; 
    padding-bottom: 0; 
    width: 100px; 
}
.movieRatingsValue{
    color: red; 
    font-style: italic;
}
.movieCloseButton{
    width: 25px; 
    height: 25px; 
    filter: invert(); 
    position: absolute; 
    top: calc((100vh/2 - 315px)); 
    left: calc((100vw/2) + 170px); 
    z-index: 6; 
    transition: transform 500ms; 
}
.movieCloseButton:hover{
    transform: scale(1.2); 
    cursor: pointer; 
}
.movieYear{
    font-style: italic; 
}