*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}body{font-family:sans-serif;background-color:#1c2022}ul{list-style-type:none}button{display:flex;align-items:center;justify-content:center;position:absolute;border:none}.collapse-show-btn{width:3.2rem;height:3.2rem;right:1rem;top:1rem;border-radius:50%;font-size:3.2rem;color:#fff;padding:1rem;background-color:#1c2022;cursor:pointer;z-index:200}.flex{display:flex}.grid{display:grid;grid-template-columns:repeat(2,1fr)}nav{justify-content:space-between;align-items:center;max-width:98%;margin:1.2rem auto;padding:1.6rem 2.4rem;background-color:#5b38d2;color:#fff;border-radius:6px}.logo{align-items:center}.logo span{font-size:3.2rem;transform:translateY(-3px)}.logo h1{font-size:2.4rem}.result-summary{font-size:2.4rem;color:#f7f7f77d}nav input{border:none;outline:none;font-size:1.6rem;font-weight:500;background-color:#6f46f1;color:#f7f7f7;padding:1.6rem;border-radius:5px;width:30%;box-shadow:0 2px 4px 4px #77777715;transition:all .2s ease-in}input:focus{transform:translateY(-1px);box-shadow:0 2px 4px 4px #7777774b}input::placeholder{gap:2.4rem;color:#f7f7f77d}main{max-width:60%;margin:3.2rem auto;column-gap:2rem}main>section{background-color:#25292d;border-radius:8px;color:#f7f7f7cf;display:relative;min-height:30rem;max-height:60rem;overflow:auto}main>section.loading-watched,main>section.loading-movies{display:flex}main>section::-webkit-scrollbar{width:.5rem;background-color:#37383d1a;border-radius:100vw}main>section::-webkit-scrollbar-thumb{border-radius:100vw;background-color:#5b38d2}li{display:grid;row-gap:1rem;column-gap:2rem;grid-template-columns:2fr 8fr;padding:1.6rem 2.4rem;border-bottom:2px solid #77777722;transition:all .3s}.search-list-row:hover{background-color:#343a40;cursor:pointer}.img-container{grid-row:1 / 3}.img-container img{width:100%}li h3{font-size:2.4rem;align-self:end}li h4{font-size:1.6rem;font-weight:400}.watch-list-section{position:relative}.user-movies-overview{background-color:#2a3335;border-radius:8px;box-shadow:0 4px 8px 8px #0000001d;flex-direction:column;padding:1.6rem 2.4rem;row-gap:1rem;position:sticky;top:0}.user-movies-overview h3{font-size:2.4rem}.user-movies-overview .stats,.user-reviewed-list-stats{font-size:1.6rem;gap:1.6rem}.loader,.error{margin:3.2rem auto;text-align:center;font-size:3.2rem;font-weight:600}.selected-movie{display:flex;flex-direction:column;gap:4.8rem;position:relative}.movie-overview{display:flex;align-items:center;gap:3.2rem;background-color:#343a40}.movie-overview-image{width:17rem}.movie-overview-details{display:flex;flex-direction:column;gap:2.4rem}.movie-overview-details h2{font-size:2.4rem;line-height:1.2}.movie-overview-details p{font-size:1.4rem}.selected-movie>section:nth-child(2){max-width:80%;margin-inline:auto;display:flex;flex-direction:column;gap:2.4rem;font-size:1.4rem}.rate-movie{display:flex;flex-direction:column;align-items:center;gap:2.4rem;background-color:#343a40;padding:2.4rem;border-radius:8px}.back-btn{position:absolute;left:2%;top:1%;background-color:#fff;color:#000;border-radius:50%;padding:.4rem;font-size:2.4rem;box-shadow:0 1px 4px 4px #00000041;cursor:pointer}.add-watchlist-btn{position:static;font-size:1.6rem;padding:1.2rem 2.4rem;background-color:#6f46f1;color:#fff;width:auto;height:auto;border-radius:100vw;cursor:pointer}.watch-list-row{position:relative}.delete-movie-btn{background-color:#ef4444;cursor:pointer;right:2%;top:.5rem;width:4rem;height:4rem;border-radius:5px;box-shadow:0 1px 4px 4px #3131312c;padding:.7rem;transition:all .3s}.delete-movie-btn:hover{background-color:#dc2626}.delete-movie-btn>svg{color:#fff}.loader-grid{position:relative;width:150px;height:180px}.base{width:150px;height:10px;background-color:#5b38d2;margin-bottom:120px}.piece{position:absolute;top:0;left:0}.iPiece{display:grid;grid-template-rows:repeat(4,15px);grid-template-columns:repeat(1,15px);grid-template-areas:"a" "a" "a" "a"}.iPiece>div{grid-area:a;background-color:#6fcbf8}.jPiece{display:grid;grid-template-rows:repeat(3,15px);grid-template-columns:repeat(2,15px);grid-template-areas:". a" ". a" "b b";width:30px;height:45px}.jPiece>div:first-child{grid-area:a;background-color:#3030cf}.jPiece>div:last-child{grid-area:b;background-color:#3030cf}.lPiece{display:grid;grid-template-rows:repeat(3,15px);grid-template-columns:repeat(2,15px);grid-template-areas:"a ." "a ." "b b"}.lPiece>div:first-child{grid-area:a;background-color:#f88c41}.lPiece>div:last-child{grid-area:b;background-color:#f88c41}.oPiece{display:grid;grid-template-rows:repeat(2,15px);grid-template-columns:repeat(2,15px);grid-template-areas:"a a" "a a"}.oPiece>div{grid-area:a;background-color:#fed504}.sPiece{display:grid;grid-template-rows:repeat(2,15px);grid-template-columns:repeat(3,15px);grid-template-areas:". a a" "b b ."}.sPiece>div:first-child{grid-area:a;background-color:#52cc74}.sPiece>div:last-child{grid-area:b;background-color:#52cc74}.tPiece{display:grid;grid-template-rows:repeat(2,15px);grid-template-columns:repeat(3,15px);grid-template-areas:". a ." "b b b"}.tPiece>div:first-child{grid-area:a;background-color:#bd46d0}.tPiece>div:last-child{grid-area:b;background-color:#bd46d0}.zPiece{display:grid;grid-template-rows:repeat(2,15px);grid-template-columns:repeat(3,15px);grid-template-areas:"a a ." ". b b"}.zPiece>div:first-child{grid-area:a;background-color:#ff3859}.zPiece>div:last-child{grid-area:b;background-color:#ff3859}.start-message{font-size:1.6rem;font-weight:700;text-align:center;margin-top:3.2rem}.start-message-emoji{font-size:2.4rem}