*{box-sizing:border-box}a{color:inherit;text-decoration:none}body{font-size:16px;color:var(--color-white);background-color:var(--color-bluegray-10)}main{flex:1 1;margin:64px 0}button{border:0;padding:0;cursor:pointer;background:none}button.primary{padding:8px 16px;color:var(--color-white);font-weight:700;background-color:var(--color-lightblue-90);border-radius:4px}.section-container{display:flex;flex-direction:row;align-items:center;gap:250px}.form-container{max-width:100%;width:525px;height:36px;display:flex;align-items:center;justify-content:space-between;border-radius:32px;border:2px solid var(--color-white);padding:6px 16px}#wrap{width:100vw;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background-color:var(--color-bluegray-100)}.container{max-width:1280px;margin:0 auto;padding:0 20px}.background-container{position:relative;background-size:cover;background-position:50%;background-repeat:no-repeat;height:500px;padding:48px}.overlay{position:absolute;top:0;left:0;background-color:rgba(0,0,0,.5);width:100%;height:100%;z-index:1}.top-rated-container{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;z-index:2;max-width:1280px;margin:0 auto}.top-rated-movie{margin-top:128px}.top-rated-movie>:not(:last-child){margin-bottom:8px}.title{font-size:3rem;font-weight:700}footer.footer{min-height:180px;background-color:var(--color-bluegray-80);display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:1.1rem}.footer img{display:block;margin:0 auto}footer.footer p:not(:last-child){margin-bottom:8px}.search-input{background-color:transparent;border:none;outline:none;width:100%;color:white}.search-input::placeholder{color:white}.search-input:focus{background-color:transparent}.loading-container{display:flex;justify-content:center;align-items:center;padding:20px}.loading-spinner{border-radius:50%;animation:spin 1s linear infinite;width:60px;height:60px;border:4px solid rgba(255,255,255,.3);border-top:3px solid rgba(255,255,255,.3);border-top:4px solid var(--color-lightblue-90)}.modal .loading-container{min-height:200px}.error-container{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.search-header-container{background-image:none!important;height:40px}.result-container{grid-column:1/-1;width:100%;height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center}.border-none{background:none;border:none}.movie-item{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;cursor:pointer}input:-webkit-autofill{-webkit-text-fill-color:white!important;-webkit-box-shadow:inset 0 0 0 1000px transparent;-webkit-transition-property:background-color,box-shadow;transition-property:background-color,box-shadow;transition-delay:86400s}.movie-description{display:flex;flex-direction:column;gap:10px}.movie-rate,.rate{display:flex;flex-direction:row;gap:8px}.movie-rate{align-items:center}.movie-rate p{margin-top:2px}.skeleton-animation{border-radius:8px;animation:skeleton-gradient 1.5s infinite;background-color:rgb(165,165,165)}.flex-center{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.flex-col{display:flex;flex-direction:column;gap:16px}.flex-row{display:flex;flex-direction:row;align-items:center;gap:4px}.custom-hr{border:.8px solid #67788e}@keyframes toast-fade-in{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.toast-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999}.toast{background-color:var(--color-white);font-size:1.25rem;font-weight:600;color:var(--color-bluegray-100);padding:20px;border-radius:6px;display:flex;align-items:center;min-width:300px;opacity:1;transition:opacity .3s ease;animation:toast-fade-in .3s ease forwards;margin-bottom:10px}.toast-button-container{width:100%;display:flex;justify-content:center;gap:8px;font-size:1rem}.retry-button{background-color:var(--color-lightblue-90)}.close-button,.retry-button{padding:8px 16px;font-size:1rem;color:var(--color-white);font-weight:600;border-radius:4px}.close-button{background-color:var(--color-bluegray-30)}.w-full{width:100%}.mt-2{margin-top:2px}.mt-24{margin-top:24px}.mb-64{margin-bottom:64px}.hidden{display:none}.image-container{position:relative;width:100%;height:100%}.skeleton-overlay{position:absolute;top:0;left:0;width:100%;height:300px;z-index:10;transition:opacity .3s ease}.fade-out{opacity:0}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:10;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease}.modal-background.active{visibility:visible;opacity:1}.modal{background-color:var(--color-bluegray-90);border-radius:16px;color:white;z-index:2;position:relative;max-width:1000px;width:90%;max-height:90vh;overflow:hidden}.modal-header{display:flex;justify-content:center;align-items:center;position:relative;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1)}.modal-title{font-size:1.5rem;font-weight:600;color:white;margin:0;text-align:center}.modal-close-btn{position:absolute;top:50%;right:24px;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px}.modal-container{display:flex;gap:32px;padding:32px;overflow-y:auto;max-height:calc(90vh - 80px)}.modal-image{width:280px;height:420px;border-radius:12px;object-fit:cover;flex-shrink:0}.modal-description{flex:1 1;display:flex;flex-direction:column;gap:24px}.movie-info-line{display:flex;align-items:center;gap:16px}.movie-meta{font-size:1rem;color:rgba(255,255,255,.8);font-weight:400}.movie-rating{display:flex;align-items:center;gap:6px}.rating-value{font-size:1rem;color:var(--color-yellow);font-weight:600}.overview-section{flex:1 1}.overview-text{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.9);margin:0}.my-rating-section{background-color:rgba(255,255,255,.05);border-radius:12px;padding:20px}.rating-header{display:flex;flex-direction:column;gap:12px}.rating-label{font-size:1.1rem;font-weight:600;color:white}.star-rating{display:flex;align-items:center;gap:8px}.star-rating button{background:none;border:none;cursor:pointer;padding:2px;transition:transform .2s ease}.star-rating button:hover{transform:scale(1.1)}.rating-text{font-size:1rem;color:white;font-weight:500;margin-left:8px}@media (max-width:768px){.modal{width:95%;max-height:95vh}.modal-container{flex-direction:column;gap:20px;padding:20px}.modal-image{width:200px;height:300px;align-self:center}.modal-title{font-size:1.2rem}}.close-modal{position:absolute;margin:0;padding:0;top:24px;right:24px;background:none;border:none;color:white;font-size:20px;cursor:pointer}.modal-col{height:100%;width:100%;box-sizing:border-box}.modal-col,.modal-info{display:flex;flex-direction:column}.modal-info{gap:8px}.modal-description .rate>img{position:relative;top:5px}.modal-description>:not(:last-child){margin-bottom:8px}.modal-rate{display:flex;align-items:center;gap:6px;width:100%;flex-wrap:wrap}.modal-rate p{margin-top:4px}.detail{max-height:300px;overflow-y:auto}.modal-my-rate{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.text-md{font-size:14px}.text-lg{font-size:1rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:2rem}.text-3xl{font-size:4rem}.font-regular{font-weight:400}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.text-center{text-align:center}.text-right{text-align:right}:root{--color-white:#ffffff;--color-lightblue-90:#0da9fd;--color-bluegray-100:#242a32;--color-bluegray-80:#39414d;--color-bluegray-10:#e0e6ed;--color-bluegray-30:#a6b1c3;--color-bluegray-90:#2f3844;--color-gray-300:#d1d3d4;--color-yellow:#ffc700;--color-ffffff:#ffffff;--color-242a32:#242a32}.text-white{color:var(--color-white)}.text-yellow{color:var(--color-yellow)}.text-opacity-blue{color:#95a1b2}.thumbnail-list{display:grid;width:100%;box-sizing:border-box;padding:0;margin:0 auto 56px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:30px;gap:30px;justify-content:center}.thumbnail{width:200px;height:300px;border-radius:8px}.item{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.item-desc>:not(:last-child){position:relative;margin-bottom:4px;line-height:1.2rem}p.rate{display:flex;align-items:baseline;color:var(--color-yellow)}p.rate>span{margin-left:4px}.item .star{width:16px;top:1px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes skeleton-gradient{0%{background-color:rgba(165,165,165,.1)}50%{background-color:rgba(165,165,165,.3)}to{background-color:rgba(165,165,165,.1)}}@keyframes slideUp{0%{transform:translate(-50%,100%)}to{transform:translate(-50%)}}@media (max-width:1280px){.container{max-width:1200px;width:100%;padding:0 40px}.thumbnail-list{gap:40px;grid-template-columns:repeat(4,1fr)}}@media (max-width:1024px){.container{max-width:1024px;width:100%;padding:0 40px}.section-container{flex-direction:column;padding:0 20px;gap:10px}.top-rated-movie{margin-top:80px}.text-2xl{text-align:center}.thumbnail-list{gap:40px;place-items:center;margin:0 auto 20px;grid-template-columns:repeat(3,1fr)}.movie-description p{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media (max-width:768px){.container{max-width:768px;padding:0 20px}.skeleton-gradient{width:100%!important;height:300px!important}.background-container{height:auto}.rate{display:flex;flex-direction:row;gap:8px}.top-rated-movie{margin-top:35px}.rate img{width:24px;height:24px;bottom:2px}.text-2xl,.text-3xl{font-size:24px}.text-lg{font-size:20px}.thumbnail-list{place-items:center;grid-template-columns:repeat(3,1fr)}.movie-description p{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-container{flex-direction:column;align-items:center}.modal-image{width:550px;max-width:30%;height:auto;max-height:50vh;object-fit:cover}.modal-description{margin-left:0;margin-top:16px}.modal{position:fixed;bottom:0;left:50%;width:100%;max-width:600px;height:auto;max-height:80%;border-radius:16px 16px 0 0;animation:slideUp .3s ease-out forwards;overflow-y:auto}.modal-info{align-items:center}}@media (max-width:680px){.container{max-width:680px}.thumbnail-list{place-items:center;grid-template-columns:repeat(2,1fr)}.modal-rate{font-size:24px;flex-direction:column;align-items:center;gap:2px}.movie-rate img{width:24px;height:24px}.modal-my-rate{align-items:center}button.primary{padding:2px 10px}}@media (max-width:480px){.container{max-width:480px}.modal-image{display:none}.rate{display:flex;align-items:center;gap:4px}.modal-my-rate{display:flex}.modal-my-rate,.modal-rate{flex-direction:column;align-items:center;gap:2px}.modal-rate{font-size:24px}.thumbnail-list{display:flex;flex-direction:column;align-items:center;gap:70px}.text-lg{text-align:center}}