*{box-sizing:border-box;margin:0;padding:0}a{text-decoration:none;color:inherit}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body{font-family:Inter Variable,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#edf0f4}@font-face{font-family:Vina Sans;font-style:normal;font-display:swap;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/vina-sans@latest/latin-400-normal.woff2) format("woff2"),url(https://cdn.jsdelivr.net/fontsource/fonts/vina-sans@latest/latin-400-normal.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}button{background-color:transparent;border:none}.itemsContainer{width:100%;grid-area:items;padding-block:20px 40px;display:flex;flex-direction:column;gap:40px}.itemsRow{width:90%;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-bottom:40px}.moviesRow{display:grid;grid-template-columns:repeat(auto-fill,minmax(182px,1fr));gap:45px;list-style:none}@media screen and (width<=454px){.moviesRow{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:14px}}.movieCard{width:185px;height:278px;overflow:hidden;background-color:#a6b2c4;display:grid;position:relative;cursor:pointer}@media screen and (width<=454px){.movieCard{width:95px;height:134px}}.movieCard :is(article){width:100%}.movieCard :is(img){width:100%;object-fit:cover}.bookmarkIcon{position:absolute;top:10px;right:10px;z-index:10;cursor:pointer}.bookmarkIcon :is(svg){fill:gray;stroke:#fff}.bookmarkIcon :is(svg)[data-active=true]{--color: #c6ee80;stroke:var(--color);fill:var(--color)}.bookmarkIcon :is(svg):hover{--color: #c6ee80;stroke:var(--color);fill:var(--color)}@media screen and (width<=454px){.bookmarkIcon{width:16px;height:16px}}.castInfo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-block:1rem;background:linear-gradient(to bottom,transparent 60%,#000)}.castInfo :is(h5){font-weight:300;text-align:center}.movieLink{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.hero{grid-area:hero;padding-inline:60px;padding-block:60px;display:flex;flex-direction:column;align-items:stretch;color:#fff;background-repeat:no-repeat;background-size:cover}@media screen and (width <=513px){.hero{padding-inline:20px;align-items:center}}.heroPuntuation{display:flex;flex-direction:column}.heroPuntuation div{display:flex;align-items:center;gap:5px}.heroPuntuation div svg{width:20px}@media screen and (width <=513px){.heroPuntuation{align-items:center;gap:.2rem}}.trailerButton{background-color:#fff;color:#000;font-weight:700}.heroButtons{width:100%;display:flex;gap:20px;align-items:center;justify-content:flex-start}@media screen and (width <=513px){.heroButtons{flex-direction:column}}.heroButtons button{max-width:312px;width:100%;border-radius:24px;padding-block:13px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;cursor:pointer}.heroInformation{max-width:650px;width:100%;flex-grow:2;display:flex;flex-direction:column;align-items:stretch;gap:22px;font-size:18px}.heroInformation p{font-weight:300;line-height:36px}@media screen and (width <=742px){.heroInformation p{display:none}}.heroInformation button:not(.trailerButton){border-color:#fff;gap:5px;color:#fff;transition:box-shadow .5s ease,color .5s ease}.heroInformation button:not(.trailerButton):hover{box-shadow:inset 0 -4.25em #fff;color:#000}.heroInformation button:not(.trailerButton):hover :is(svg){stroke:#000;fill:#000}.heroInformation button:not(.trailerButton) svg{width:1rem;stroke:#fff;fill:transparent;transition:stroke .5s ease,fill .5s ease}.heroInformationMobile{display:none}@media screen and (width <=742px){.heroInformationMobile{display:block;color:#fff;text-decoration:none}}@media screen and (width <=513px){.heroInformationMobile{width:312px;text-align:center}}.heroInformationTitle{display:flex;flex-direction:column;gap:5px}.heroInformationTitle h2{font-size:clamp(3rem,1.904rem + 3.413vw,6rem)}@media screen and (width <=513px){.heroInformationTitle h2{text-align:center}}.heroInformationTitle h3{font-size:24px}.heroHome{order:2;cursor:pointer}@media screen and (width <=513px){.heroHome{text-align:center}}.heroContent{text-align:center;display:flex;flex-direction:column;gap:2rem}.search{--background: transparent;grid-area:search;display:flex;flex-direction:column;gap:27px;padding-block:40px;padding-inline:60px}.search :is(div){position:relative;max-width:449px}@media screen and (width <=465px){.search :is(div){width:100%}}.search :is(div) :is(input[type=text]){background-color:#fff;border-radius:99px;border:none;outline:none;padding:14px;width:100%}.searchButton{background-color:#a6b2c4;padding:12px;border-radius:100%;position:absolute;right:0;top:0;display:grid;place-items:center;height:100%}.searchButton :is(svg){width:16px;height:16px}.profileContainer{width:90%;margin:0 auto;padding-block:40px;display:flex;flex-direction:column;gap:38px}.profileContainer header{width:100%;display:flex;justify-content:space-between;align-items:center}.profileContainer header div{display:flex;gap:5px;cursor:pointer}.profileMain{width:100%;display:flex;flex-direction:column;gap:40px}.profileInfo{width:650px;background-color:#fff;border-radius:10px;padding:30px}@media screen and (width <=721px){.profileInfo{width:100%;font-size:14px}}.profileInfoRow{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #a6b2c4;padding:20px}@media screen and (width <=475px){.profileInfoRow{padding-inline:0}}.profileInfoRow h3{flex-grow:2}.container{display:flex;flex-direction:column;gap:2.5rem;padding-block:2.5rem}.sinopsis{width:90%;margin:0 auto;display:flex;flex-direction:column;gap:10px}.sinopsis h3{font-size:1.5rem;text-transform:uppercase}.header{background-color:#233647;height:100px;grid-area:header;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:100px;padding-inline:60px}.header a{cursor:pointer}@media screen and (width <=672px){.header .headerNav,.header .headerUser{display:none}}.headerTitle{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}.headerTitle h1{font-size:48px;font-family:Vina Sans,system-ui;cursor:pointer}.headerTitle p{font-size:12px}@media screen and (width <=672px){.headerTitle p{display:none}}.headerNav{flex-grow:2;height:100%;font-size:18px;align-content:stretch}.headerNav ul{height:100%;display:flex;align-items:flex-end;gap:40px;list-style:none;color:#fff}.headerNav ul li{height:100%;display:flex;align-items:flex-end}.headerSectionMobile{display:none}@media screen and (width <=672px){.headerSectionMobile{display:block}}.headerNavMobile{width:100vw;height:100dvh;background-color:#233647;position:fixed;top:0;left:0;z-index:100;display:flex;flex-direction:column;gap:40px;padding:24px;transform:translate(100%);transition:transform .5s ease}.headerNavMobile :is(header){width:100%;display:flex;justify-content:space-between;align-items:center}.headerNavMobile :is(section){flex-grow:2}.headerNavMobile :is(section) :is(ul){list-style:none;width:100%;padding-block:20px;display:flex;flex-direction:column;gap:20px}.headerNavMobile :is(section) :is(ul) :is(li){width:100%}.headerNavMobile :is(section) :is(ul) :is(li) :is(a){width:100%;display:block;padding-block:10px;border-bottom:2px solid grey}.headerNavMobile :is(section) :is(ul) :is(li) :is(a).active{border-color:#c6ee80;font-weight:700}.headerNavMobile :is(footer>a){display:flex;justify-content:space-between;width:100%;gap:10px;align-items:center}.headerNavMobile :is(footer>a) :is(p){flex-grow:2}.navActive{transform:translate(0)}.navLinks{color:inherit;text-decoration:none;padding-bottom:15px;border-bottom:2px solid transparent;font-weight:200;cursor:pointer}.linkActive{border-color:#c6ee80!important;font-weight:400!important}.toast-container{--bg-color: #fff;--border-color: #000;--color: #000;--width: 356px;--gap: 14px;--position-size: 1.5rem;z-index:100;width:var(--width);padding:1rem;display:flex;gap:var(--gap);align-items:center;justify-content:flex-start;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:.5rem;color:var(--color);position:fixed;bottom:var(--position-size);right:var(--position-size)}.toast-container[data-type=error]{--bg-color: hsl(359deg 100% 97%);--border-color: hsl(359deg 100% 94%);--color: hsl(360deg 100% 45%)}.toast-container[data-type=success]{--bg-color: hsl(143deg 85% 96%);--color: hsl(140deg 100% 27%);--border-color: hsl(145deg 92% 91%)}.toast-container[data-type=warning]{--bg-color: hsl(49deg 100% 97%);--border-color: hsl(49deg 91% 91%);--color: hsl(31deg 92% 45%)}.toast-container[data-type=info]{--bg-color: hsl(208deg 100% 97%);--color: hsl(210deg 92% 45%);--border-color: hsl(221deg 91% 91%)}.toast-container :is(p){font-size:.81rem}.toast-container :is(span){display:grid;place-items:center}.toast-container :is(span) :is(svg){width:20px;height:20px}.toast-hide{transform:translateY(calc(100dvh + 2rem));transition:transform 1s ease}
