:root{--color-primary-bg: #0f0f23;--color-secondary-bg: #1e1e3f;--color-accent-primary: #104873;--color-accent-secondary: #ffd93d;--color-text-primary: #ffffff;--color-text-secondary: #e0e6ed;--color-text-muted: #9ca3af;--color-success: #10b981;--color-border: #374151;--color-hover-overlay: rgba(255, 107, 107, .1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--padding-card: var(--spacing-lg);--padding-container: var(--spacing-md);--padding-button: var(--spacing-sm);--gap-grid: var(--spacing-lg);--gap-flex: var(--spacing-md);--gap-small: var(--spacing-xs);--margin-section: var(--spacing-xl);--margin-element: var(--spacing-sm)}*{font-family:Ubuntu,sans-serif;box-sizing:border-box}body{width:100%;margin:0;padding:0;box-sizing:border-box;overflow-x:hidden;background-color:var(--color-primary-bg);color:var(--color-text-primary)}.main-content{background-color:var(--color-primary-bg);position:sticky;top:var(--spacing-md);width:100%;margin:auto;display:flex;align-items:center;justify-content:start;flex-direction:column;padding:var(--padding-container)}.header{display:flex;justify-content:space-between;background-color:var(--color-secondary-bg);padding:var(--padding-container);align-items:center;border-radius:0;position:sticky;top:0;left:0;min-height:100px;z-index:10;width:100%;border-bottom:2px solid var(--color-accent-primary);view-transition-name:main-header}.header input[type=text]{padding:var(--padding-button);color:var(--color-text-primary);background-color:var(--color-primary-bg);border-radius:10px;border:2px solid var(--color-accent-primary)}.header input[type=text]:focus{outline:none;border-color:var(--color-accent-secondary);box-shadow:0 0 8px #ffd93d66}.header>.logo{font-size:24px;font-weight:700;color:var(--color-accent-primary)}.movie-container,.seach-results{margin-top:var(--margin-section);display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;gap:var(--gap-grid);flex-direction:column;flex-wrap:wrap;grid-auto-flow:dense}.grid-item{display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:start;gap:var(--gap-flex);padding:var(--padding-card);position:relative;transition:all .4s ease-in-out;border-radius:10px;background-color:var(--color-secondary-bg);border:1px solid var(--color-border);overflow:hidden;contain:layout paint}.grid-item .movie__movie-additional-info{display:none}.expand .movie__movie-additional-info{display:flex;flex-direction:column;gap:var(--margin-section);justify-content:center;align-items:flex-start;height:100%;flex-grow:2;width:60%}.movie__movie-additional-info .similar-movies{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:var(--gap-flex);position:relative}blockquote{font-size:12px;color:var(--color-text-muted)}.expand .review{max-width:auto}.reviews{min-width:500px;max-width:600px}.reviews h4{margin-top:0;color:var(--color-accent-primary)}div:has(>blockquote){background-color:#0f0f23cc;margin:var(--spacing-sm) auto;padding:var(--spacing-md);border-radius:5px;border-left:3px solid var(--color-accent-primary)}.similar-movies h4{width:100%;margin-top:0;margin-bottom:0;color:var(--color-accent-primary)}.similar-movie{padding:var(--padding-button);display:flex;flex-direction:column;width:100px;align-items:center;background-color:var(--color-primary-bg);border-radius:10px;gap:var(--gap-flex);border:1px solid var(--color-border)}.similar-movie img{border-radius:10px}.videos{min-width:450px;display:flex;flex-direction:column;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:var(--gap-flex);height:100%;position:relative}.videos__video-list{display:flex;flex-direction:row;align-items:center;gap:var(--gap-flex)}.videos h4{margin:0;color:var(--color-accent-primary)}.iframe-container{position:relative;width:400px;height:200px}.iframe{position:absolute;top:0;left:0;width:400px;height:200px;border-radius:10px;border:2px solid var(--color-accent-primary)}.movie__movie-additional-info h5{font-size:10px;margin:0;color:var(--color-text-muted)}.grid-item h2{margin:var(--spacing-xs) 0;color:var(--color-text-primary)}.grid-item p{font-size:.9rem;padding:0 var(--padding-button);border-left:4px solid var(--color-accent-primary);margin-bottom:0;color:var(--color-text-secondary)}.grid-item ul{display:flex;flex-direction:row;list-style:none;padding:0;gap:var(--gap-small)}.grid-item ul li{margin-top:var(--spacing-xs);padding:var(--spacing-xs) var(--padding-button);background:var(--color-accent-primary);color:var(--color-text-primary);border-radius:10px;width:80px;font-size:12px;min-width:auto;text-align:center;transition:all .5s ease-in-out}.release-year{font-size:12px;color:var(--color-text-muted)}.author-info{display:flex;flex-direction:row;gap:var(--gap-flex);height:50px;align-items:center}.author-info>img{border-radius:40px;width:30px;border:2px solid var(--color-accent-primary)}.movie-avg-rating{font-size:20px;font-weight:700;position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);color:var(--color-accent-secondary);text-shadow:0 0 10px rgba(255,217,61,.6)}.movie__movie-media img{height:400px;border-radius:10px;animation:moveInto .2s;border:2px solid var(--color-border)}.grid-item:hover{cursor:pointer}.expand{flex-grow:3;grid-column:span 3;grid-row:span 2;background-color:var(--color-primary-bg);border:2px solid var(--color-accent-primary)}@keyframes moveInto{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;scale:0}to{opacity:1;scale:1}}@media(max-width:1400px){div.movie-container,div.seach-results{grid-template-columns:1fr 1fr}}@media(max-width:1000px){:root{--padding-card: var(--spacing-md);--gap-grid: var(--spacing-md);--margin-section: var(--spacing-lg)}div.grid-item{display:flex;flex-direction:column}div.movie-container{grid-template-columns:1fr}}::view-transition-old(root){animation:fade-out .25s cubic-bezier(.445,.05,.55,.95) backwards}::view-transition-new(root){animation:fade-in .25s cubic-bezier(.445,.05,.55,.95) forwards}@keyframes fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes fade-in{0%{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}