@import"https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic";.card{max-width:650px;width:100%;height:147.5px;background-color:var(--clr-white);color:var(--clr-dark);display:flex;align-items:center;overflow:hidden;border-radius:2rem;box-shadow:var(--box-shadow);position:relative;transition:transform .1s ease-in-out,box-shadow .1s ease-in-out;cursor:pointer}.card:hover,.selected-card{transform:scale(1.01);background-color:var(--clr-gray);box-shadow:var(--box-shadow-lg)}.card:hover .card-content,.selected-card .card-content{background-color:var(--clr-gray)}.card>img{height:100%;object-fit:cover}.card .year{font-weight:300;color:#2323238e}.card-content{position:relative;padding:16px;height:100%;width:100%;background-color:#fff}.card-content>.title{font-size:1.2rem;font-weight:700;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden}.card-content>.summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;margin-bottom:8px;height:48px}.card-content .bottom{display:flex;justify-content:space-between}.card-content .bottom .favorite-button{font-size:1.4rem}.spinner-container{display:flex;justify-content:center;align-items:center}.lds-ring{display:inline-block;position:relative;width:80px;height:80px}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:64px;height:64px;margin:8px;border:8px solid var(--clr-primary);border-radius:50%;animation:lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;border-color:var(--clr-primary) transparent transparent transparent}.lds-ring div:nth-child(1){animation-delay:-.45s}.lds-ring div:nth-child(2){animation-delay:-.3s}.lds-ring div:nth-child(3){animation-delay:-.15s}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast-wrapper{position:fixed;bottom:0;right:0}.toast-container{width:330px;position:relative;right:16px;bottom:16px;justify-content:start;transition:transform .4s ease-in-out;padding:16px;transform:translate(0)}.toast-container>.title{font-size:1.1rem;font-weight:700;margin-bottom:8px}.toast-container>.close{position:absolute;right:16px;top:16px;cursor:pointer}.error{background-color:#f8d7d9;color:#721c24}.warning{background-color:#fff3cd;color:#856404}.hidden-toast{transform:translate(200%)}*,*:before,*:after{box-sizing:border-box}*{margin:0}html,body,#root{height:100%;overflow-x:hidden}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}:root{--clr-background: #f5f5f5;--clr-white: rgb(244, 244, 244);--clr-gray: rgb(231, 234, 234);--clr-primary: #2c3e50;--clr-dark: #1a1a1a;--clr-secondary: #2ecc71;--box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--box-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--max-width: 1000px}#root{background:var(--clr-background)}.app{height:100%;padding:24px}html{font-family:Roboto,Courier New,Courier,monospace}.btn{display:inline-block;padding:.5rem 1rem;border-radius:.8rem;border:none;background:var(--clr-primary);color:var(--clr-white);cursor:pointer;transition:all .2s ease-in-out;font-size:1rem;letter-spacing:var(--spacing);text-transform:capitalize;box-shadow:var(--box-shadow);text-decoration:none}.btn:hover{background:var(--clr-dark);color:var(--clr-white);box-shadow:var(--box-shadow-lg)}.favorite-button{color:#f65857;cursor:pointer}.genres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;height:30px;overflow:hidden}.genres>.genre{font-size:.8rem;padding:4px 8px;border-radius:.5rem;background-color:var(--clr-secondary);color:var(--clr-white);display:flex;align-items:center;justify-content:center}.hidden{display:none}.missing-image{height:100%;max-height:290px;max-width:80%;aspect-ratio:105 / 147.5;background-color:var(--clr-primary);display:flex;align-items:center;justify-content:center;color:var(--clr-background);font-size:1rem}.search-container{display:flex;align-items:center;flex-direction:column;max-width:var(--max-width);margin:0 auto}.search-container>.title,.favorites-container>.title{font-size:64px;font-weight:700;color:var(--clr-white);margin-bottom:16px;color:var(--clr-primary);text-align:center}#search-input{width:100%;max-width:500px;margin:16px 0;font-size:1.2rem;border-style:none;border-radius:.5rem;text-align:left;overflow:hidden;line-height:40px;padding:0 16px;box-shadow:var(--box-shadow)}.results{display:flex;flex-direction:column;align-items:center;width:100%;padding:32px 0;gap:32px;opacity:1;transition:opacity .6s ease-in-out,transform .3s ease-in-out;transform:translateY(0)}.hidden-results{opacity:0;transform:translateY(10px);transition:all 0 ease-in-out}.loader{margin-top:64px}.show-container{max-width:var(--max-width);margin:0 auto;font-size:1.25rem;opacity:1;transform:translateY(0);transition:opacity .5s ease-in-out,transform .3s ease-in-out}.show-container.hide{opacity:0;transform:translateY(100px)}.show-container .favorite-button{font-size:3rem}.show-container .top{display:flex;flex-direction:row;margin-top:16px;justify-content:space-between;align-items:center;margin-bottom:16px}.show-container .title{font-size:3rem;font-weight:700;color:var(--clr-primary)}.show-view{display:flex;flex-direction:row;margin:32px 0}.show-view .side{flex:0 0 35%}.show-view .side img{max-width:80%;object-fit:cover}.show-view .side .info{display:flex;gap:16px;color:#8f8b8b;margin-bottom:8px}.show-view>.main{flex:0 0 65%;display:flex;flex-direction:column;justify-content:flex-end}.show-view>.main .info{display:flex;align-items:center;gap:32px;margin-bottom:16px;flex-wrap:wrap}.show-view>.main .links{display:flex;align-items:center;gap:64px;font-size:2.5rem;cursor:pointer}.show-view>.main .links a{color:var(--clr-primary)}.show-view>.main .info .rating{display:flex;align-items:center;gap:8px;font-size:1.4rem}.show-view>.main .info .rating-star{color:#f6c92a;font-size:1.5rem;position:relative;bottom:4px;margin-right:8px}.show-view>.main .info .rating span{color:#8f8b8b;font-weight:300}@media (max-width: 768px){.show-view{flex-direction:column}.show-view>.side>img{max-width:60%}.show-view>.main .info{margin-top:32px}.show-container .title{font-size:1.5rem}.show-container .favorite-button{font-size:2rem}}