:root{--title-header-font: "Poppins", Arial, sans-serif;--body-font: "Lora", Georgia, serif;--primary-color: #1e3a8a;--secondary-color: #d1d5db;--accent1-color: #10b981;--accent2-color: #f97316;--accent3-color: #ffffff;--dark-tone: #4b5563;--text-in-color: whitesmoke}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{display:grid;grid-template-columns:auto 1fr auto;width:100%;font-family:var(--body-font);font-size:16px}h1,h2,h3,h4,h5,h6{font-family:var(--title-header-font)}a{text-decoration:none;color:inherit}svg{width:calc(512px / var(--svg-width));height:auto;aspect-ratio:1 / 1}.divider{border-bottom:3px solid var(--accent2-color)}.action{padding:1rem;border-radius:.5rem;color:var(--action-color);background-color:var(--action-bg-color);font-family:var(--title-header-font);font-weight:700}.action:hover{background-color:color-mix(in srgb,var(--action-bg-color),var(--action-hv-mix))}header,footer{grid-column:1 / 4;display:flex;align-items:center;padding:.5rem}main{grid-column:2 / 3;display:grid;grid-template-columns:auto 1fr auto}header{grid-row:1 / 2;justify-content:space-between;font-size:1.35rem}header .logo{display:flex;flex-direction:row;align-items:center;font-family:var(--title-header-font);font-weight:700}header .logo img{width:calc(512px / 12);aspect-ratio:1 / 1;filter:invert(1) sepia(1) saturate(10000000) contrast(4) brightness(.65) hue-rotate(305deg)}header figcaption .highlight{color:var(--accent2-color)}header .wl{position:relative;border:0;background-color:transparent;--svg-width: 21;--svg-color: var(--accent2-color);--mix-color: orangered}header .wl svg{fill:var(--svg-color)}header .wl:hover svg{fill:color-mix(in srgb,var(--svg-color),var(--mix-color))}header .wl span{position:absolute;top:-.5rem;right:0;padding:.015rem .1rem;border-radius:.25rem;text-align:center;font-size:medium;font-weight:700;background-color:var(--accent1-color)}header .wl span.hide{display:none}.home{color:var(--text-in-color);z-index:1}.home .wl{--svg-color: var(--secondary-color);--mix-color: var(--dark-tone)}.home+main{grid-row:1 / 3}main{padding-bottom:3rem}section{grid-column:2 / 3}h2{margin-block:1rem;font-size:xx-large}.hero{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;font-family:var(--title-header-font);color:var(--text-in-color)}.hero picture,.hero article{grid-column:1 / 2;grid-row:1 / 2}.hero img{width:100%;height:auto;filter:blur(.25rem);aspect-ratio:9 / 16}.hero article{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3rem;padding-left:1rem;background:linear-gradient(var(--primary-color),transparent);z-index:0;--action-color: var(--text-in-color);--action-bg-color: var(--accent1-color);--action-hv-mix: var(--dark-tone)}.hero article h1{width:5ch;text-wrap:wrap;font-size:3rem}#list,#watchlist,#overview{padding-inline:1.35rem;display:flex;flex-direction:column}#list article{align-self:center;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));justify-items:center;gap:2rem;width:100%}.genre-list article{color:var(--dark-tone)}a:has(.genre):hover{color:initial}a:has(.genre):hover img{filter:none}.genre{display:flex;flex-direction:column;align-items:center;gap:.5rem}.genre img{width:80%;filter:invert(.5) sepia(.5) saturate(2) contrast(1.2) brightness(.8) hue-rotate(180deg)}.genre figcaption{text-align:center;text-wrap:wrap;word-break:break-all}.movie-card{position:relative;aspect-ratio:2 / 3;overflow:hidden}.movie-card img{width:100%;aspect-ratio:2 / 3}.movie-card figcaption{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;position:absolute;padding-inline:1rem;width:100%;height:100%;font-family:var(--title-header-font);text-align:center;color:var(--text-in-color);background-color:color-mix(in srgb,var(--primary-color),transparent 15%);transition:transform .5s ease-in-out}.movie-card:hover figcaption{transform:translateY(-102%)}#movie-details{display:grid;grid-template-columns:auto 1fr auto;justify-items:center;gap:1rem;--poster-width: 300px;--divisor-width: 1.25}#movie-details>*{grid-column:2 / 3}#movie-details h2{text-align:center;margin-bottom:0}#movie-details h3{margin-bottom:.5rem;font-size:x-large}#movie-details figure{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:calc(var(--poster-width) / var(--divisor-width))}#movie-details figure picture,#movie-details figure img{width:100%;height:auto}#movie-details figcaption{align-self:stretch;display:flex;justify-content:space-between}.interaction{padding:.25rem 2rem;border-radius:2rem;background-color:transparent;border:1px solid var(--dark-tone);--svg-width: 18}.movie .interaction{--svg-width: 23}.interaction svg.rmv{display:none}.interaction.added:not(.added.fav):hover svg:not(.rmv){display:none}.interaction.added:hover svg.rmv{display:block}.btnWatchlist.added{background-color:color-mix(in srgb,lightgreen,var(--dark-tone))}.btnWatchlist:hover{background-color:color-mix(in srgb,transparent,var(--dark-tone))}.btnWatchlist.added:hover{background-color:color-mix(in srgb,red,var(--dark-tone))}.btnFavorite:hover{background-color:#db7093}.btnWatchlist.added svg,.btnFavorite:hover svg{fill:var(--accent3-color)}#watchlist{--border-color: black}#watchlist ul,#overview ul{list-style:none;display:flex;flex-direction:column;gap:.75rem;--poster-width: 300px;--divisor-width: 4}.movie{display:flex;gap:1rem;padding:.25rem;border:1px solid var(--border-color);border-radius:.5rem;box-shadow:0 0 3px 1px var(--dark-tone)}.movie img{width:calc(var(--poster-width) / var(--divisor-width));object-fit:cover;border:1px solid var(--border-color);border-radius:.5rem}.movie div{flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-block:.5rem;text-align:center}.movie p{width:100%;display:flex;justify-content:space-evenly}#overview .movie{padding:0;border-radius:.5rem 0 0}#overview .movie img{height:100px;object-fit:cover;object-position:top;border-radius:.5rem 0 0}#overview .movie div{justify-content:center}.void-list{font-family:var(--title-header-font);font-weight:700;font-size:x-large;color:color-mix(in srgb,var(--dark-tone),var(--accent3-color))}.home #overview{color:var(--text-in-color);background-color:color-mix(in srgb,var(--primary-color),black);border-left:5px solid var(--accent3-color);--border-color: var(--accent3-color)}#overview{width:100%;max-width:300px;height:100%;max-height:100vh;margin-inline:auto 0;padding-block:2rem 1rem;justify-content:space-between;gap:1rem;font-size:initial;border:0;border-left:5px solid var(--accent2-color);transform:translate(100%);transition:transform .5s ease-in-out;z-index:1;--border-color: black;--action-color: var(--text-in-color);--action-bg-color: var(--accent2-color);--action-hv-mix: orangered}#overview::backdrop{background-color:color-mix(in srgb,black,transparent);transition:background-color .5s ease-in-out}#overview:popover-open{transform:translate(0)}#overview h3{font-size:x-large}#overview ul{flex-grow:1;overflow-y:scroll;--divisor-width: 3;-ms-overflow-style:none;scrollbar-width:none}#overview ul::-webkit-scrollbar{display:none}#overview .action{justify-self:end}footer{grid-row:3 / 4;flex-direction:column;padding-block:1rem}@starting-style{#overview::backdrop{background-color:transparent}}@media (min-width: 768px){.hero img{aspect-ratio:16 / 9}.hero article{align-items:center;padding-left:0}.hero article h1{width:initial;text-wrap:wrap;font-size:3rem}#list article{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}#movie-details{display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr;grid-auto-rows:min-content;gap:1rem;--poster-width: 500px;--divisor-width: 2}#movie-details h2,#movie-details article{grid-column:3 / 4;justify-self:start}#movie-details h2{text-align:left}#movie-details figure{grid-row:1 / 4;margin-top:1rem}#watchlist ul{padding-left:2rem;--divisor-width: 3}.movie{max-width:400px}.movie div{padding-block:1rem}footer{flex-direction:row;justify-content:center}footer p:not(footer p:last-child):after{content:"|";margin-inline:.5rem}}@media (min-width: 1024px){header{padding-inline:1rem;font-size:1.66rem}header .logo img{width:51.2px}header .wl{--svg-width: 18}#overview{max-width:500px}}