@layer base,components,utilities;@layer base{:root{--theme-color-white: #fff;--theme-color-blue: #004aba;--theme-color-red: red;--theme-color-purple: #6b36bc;--theme-color-cyan: #00edfd;--theme-color-magenta: #fe0075;--theme-color-yellow: #ff0;--theme-color-salmon: #ff316b;--theme-color-gold: #fc4;--theme-color-orange: #ff2500;--theme-color-game-pass: #0e7a0d;--theme-color-game-pass--light: #13a111;--theme-color-pc: #00a2ed;--theme-color-pc--light: #1ab6ff;--theme-color-nearly-black: rgb(0 0 0 / 90%);--theme-color-black: #000;--sections-side-padding: 2.5rem;--character-sections-vertical-spacing: 10rem;--section-heading-margin--sm: 1rem;--section-heading-margin--md: 1.5rem;--section-heading-margin--lg: 3.5rem;--mobile-padding-inline-sm: 1rem;--img-tilt: -2deg;--drop-shadow--sm: 4px 4px 0 var(--theme-color-nearly-black);--header-fz-med: 2rem}*{box-sizing:border-box}body,button{font-family:Poppins,sans-serif}body{margin:0;padding:0;background-image:url(/hi-fi-rush-clone/images/HFR-bleed.webp)}h1,h2,h3{margin:0;font-family:Black Han Sans,sans-serif;text-transform:uppercase}h2,h3{text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;filter:drop-shadow(var(--drop-shadow--sm));font-size:3rem;color:var(--theme-color-white)}img,picture{display:block}picture img{max-inline-size:100%;block-size:auto}p{margin:0;line-height:1.6;font-size:1.125rem}button{cursor:pointer;border:2px solid #000;box-shadow:4px 4px #000;font-weight:700}}@layer components{@keyframes fade-in{0%{opacity:0}to{opacity:1}}.popover::backdrop{animation:fade-in .35s ease-in-out}.popover,.popover::backdrop{opacity:0;transition:opacity .35s,display .35s allow-discrete,overlay .35s allow-discrete}.popover:popover-open,.popover:popover-open::backdrop{opacity:1}@starting-style{.popover:popover-open{opacity:0}}.button--red{background-color:var(--theme-color-red);color:var(--theme-color-white)}.button--yellow{background-color:var(--theme-color-yellow);color:#000}.button--red:hover,.button--yellow:hover{background-color:var(--theme-color-blue);color:var(--theme-color-white)}.button--blue{background-color:var(--theme-color-blue);color:var(--theme-color-white)}.button--blue:hover{background-color:var(--theme-color-yellow);color:var(--theme-color-black)}.page-wrapper{width:min(80rem,100%);margin-inline:auto;background-color:#fff;box-shadow:0 0 12px 20px #0003}.fancy-button{font-size:1.25rem;padding-block:1rem;padding-inline:3rem;transform:skew(-10deg)}.fancy-button span{display:block;transform:skew(10deg);text-transform:uppercase;letter-spacing:.1em}.header-hero{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);padding-block-end:12rem;background-color:var(--theme-color-blue)}.header-hero .hero-bg{grid-column:1 / -1;grid-row:1 / -1}.header-hero .hero-bg img{-webkit-mask-image:linear-gradient(180deg,#000 90%,transparent);mask-image:linear-gradient(180deg,#000 90%,transparent)}.header-hero .logo{grid-column:4 / 5;grid-row:1 / 2;width:30rem;padding-inline-end:1rem;padding-block-start:1rem}.header-hero .logo img{filter:drop-shadow(8px 8px 0 rgb(0 0 0 / 85%))}.header-hero .cta-group{grid-column:1 / -1;grid-row:2 / 3;place-self:self-end center;padding-block-end:1.5rem;z-index:1;display:grid;justify-items:center;gap:2.25rem}.header-hero .logo-group{display:flex;gap:1.5rem}.header-hero .arrow-container{background-color:var(--theme-color-yellow);aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:.85}.header-hero .arrow-container svg{fill:var(--theme-color-blue)}.chai-section,.peppermint-section,.enemies-section{padding-inline:var(--sections-side-padding);padding-block-end:var(--character-sections-vertical-spacing)}:is(.chai-section,.peppermint-section,.enemies-section) h2{margin-block-end:var(--section-heading-margin--md)}.peppermint-section,.enemies-section{display:grid}:is(.peppermint-section,.enemies-section) p{margin-block-end:2rem}:is(.peppermint-section,.enemies-section) .character-popover::backdrop{background-color:#000}.character-popover{padding-block:2rem;padding-inline:10rem;height:min(60rem,100%);width:min(65rem,100%);background-color:var(--theme-color-purple)}.character-popover h2{text-align:center}.character-popover .popover-tab-content{display:none}.character-popover .popover-tab-content.is-active{display:flex;justify-content:center}.character-popover .gallery-picture{width:100%;margin-block-end:1.5rem}.character-popover h3{margin-block-end:var(--section-heading-margin--sm);font-size:var(--header-fz-med)}.character-popover .gallery-container{width:min(65ch,100%)}.character-popover .gallery-body{color:#fff}.hero-tabs,.enemy-tabs{padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,max-content));gap:1rem;justify-content:center;list-style-type:none}:is(.hero-tabs,.enemy-tabs) button{padding:0;border:none}:is(.hero-tabs,.enemy-tabs) img{width:100%}:is(.hero-tabs li.is-active,.enemy-tabs li.is-active) button{outline:4px solid var(--theme-color-yellow)}.chai-section{display:grid;grid-template-columns:repeat(2,1fr);grid-template-areas:"text  img" "video video";color:var(--theme-color-white)}.chai-section .text-group{grid-area:text}.chai-section .img-group{grid-area:img;grid-row:1 / -1;rotate:-24deg}.chai-section .chai-section-cta-button{padding:0}.chai-section .video-group{grid-area:video;justify-self:center;z-index:1;rotate:-2deg}.chai-section .video-group picture{border:8px solid var(--theme-color-yellow);max-inline-size:50rem}.peppermint-section{padding-block-start:var(--character-sections-vertical-spacing);grid-template-columns:1.3fr 1fr;grid-template-areas:"img text";color:var(--theme-color-white)}.peppermint-section .text-group{grid-area:text}.peppermint-section .img-group{grid-area:img}.peppermint-section .popout--left{margin-inline-start:-5.5rem}.enemies-section{grid-template-columns:1fr 1.3fr;grid-template-areas:"text img";color:var(--theme-color-white)}.enemies-section .text-group{grid-area:text}.enemies-section .img-group{grid-area:img}.enemies-section .popout--right{margin-inline-start:5.5rem}.news-section-wrapper{display:flex;flex-direction:column;align-items:center;max-inline-size:80%;margin-inline:auto}.news-section{padding-block:6rem}.news-section h2{margin-block-end:var(--section-heading-margin--md);text-align:center}.news-section .cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-block-end:4rem}.news-section .cards-container article{display:grid;grid-template-rows:auto 1fr;border:2px solid #000;background-color:var(--theme-color-gold);transition:transform .15s ease-in-out}.news-section .cards-container article:hover{transform:translateY(-25px)}.news-section .cards-container .card-info{padding-inline:1.25rem;padding-block:1.25rem;display:grid;align-content:space-between;gap:3rem}.news-section .cards-container .card-info h3{margin-block-end:1rem;font-size:1.25rem;text-shadow:initial;filter:none;color:var(--theme-color-black)}.news-section .cards-container img{block-size:14rem;object-fit:cover}.purchase-section{padding-block:5rem;background-color:var(--theme-color-cyan);background-image:url(/hi-fi-rush-clone/images/purchase-bg.avif);background-size:100%;background-repeat:no-repeat;background-position:center}.purchase-section .purchase-section-header{text-align:center;margin-block-end:var(--section-heading-margin--lg)}.game-edition-card{display:grid;grid-template:"cover-img edition-content" auto ".         edition-content" auto / 1.6fr 3fr;margin-inline:3rem;margin-block-end:3rem;padding-inline:1.5rem;padding-block:2rem;row-gap:3rem;background-color:var(--theme-color-gold);border:2px solid #000;box-shadow:6px 6px 0 var(--theme-color-nearly-black)}.game-edition-card h2{font-size:2.75rem}.game-edition-card .img-container{grid-area:cover-img}.game-edition-card .img-container-lower{position:relative;rotate:var(--img-tilt)}.game-edition-card .img-container-lower .card-popover{border:none;background:none;box-shadow:none}.game-edition-card .img-container-lower .img-cross{position:absolute;inset:0;margin:auto;fill:var(--theme-color-yellow);filter:drop-shadow(var(--drop-shadow--sm))}.game-edition-card img{filter:drop-shadow(4px 4px 0 var(--theme-color-nearly-black))}.game-edition-card .img-container:first-of-type{margin-block-start:-4rem}.game-edition-card .game-edition-content{grid-area:edition-content;padding-block:2rem;padding-inline:3rem}.game-edition-card .game-edition-content h2{margin-block-end:var(--section-heading-margin--sm)}.game-edition-card .game-edition-content ul,.game-edition-card .standard-edition-description{margin-block-end:2rem}.game-edition-card .button-mini-grid{display:grid;grid-template-areas:"buy-button .";grid-template-columns:repeat(2,1fr);gap:3rem;margin-block-end:2rem}.game-edition-card .buttons-grid{display:grid;grid-template-areas:"xbox   windows" "steam  epic";grid-template-columns:repeat(2,1fr);gap:1.5rem 3rem}.game-edition-card .buttons-grid:nth-child(1){grid-area:xbox}.game-edition-card .buttons-grid:nth-child(2){grid-area:windows}.game-edition-card .buttons-grid:nth-child(3){grid-area:steam}.game-edition-card .buttons-grid:nth-child(4){grid-area:epic}.game-edition-card .fancy-button{width:100%;background-color:var(--theme-color-pc);color:var(--theme-color-white)}.game-edition-card .fancy-button:hover{background-color:var(--theme-color-pc--light)}.game-edition-card .fancy-button--game-pass{background-color:var(--theme-color-game-pass)}.game-edition-card .fancy-button--game-pass:hover{background-color:var(--theme-color-game-pass--light)}.game-edition-card .card-deluxe-popover{border:2px solid var(--theme-color-black);padding:0}.game-edition-card .popover-wrapper{position:relative}.game-edition-card .card-deluxe-popover img{max-inline-size:60rem;inline-size:100%;filter:none;border:none}.game-edition-card .card-deluxe-popover::backdrop{background-color:#000c}.popover-close-button{position:absolute;top:0;right:0;z-index:1;background-color:#fff;text-transform:uppercase;font-size:1rem;padding-inline:.5em;padding-block:.25em}@keyframes color-fade{0%{background-color:var(--theme-color-blue)}50%{background-color:var(--theme-color-purple)}80%{background-color:var(--theme-color-magenta)}to{background-color:var(--theme-color-magenta)}}.scroll-timeline-wrapper{animation:color-fade linear;animation-timeline:view()}@media screen and (width < 104em){.header-hero .logo{width:20rem}.chai-section{grid-template-columns:1fr;grid-template-areas:"text" "img" "video";justify-items:center}.chai-section .text-group{z-index:1;margin-block-end:4rem}.chai-section .img-group{grid-row:auto;rotate:0deg}.peppermint-section,.enemies-section{grid-template-columns:1fr;grid-template-areas:"text" "img"}:is(.peppermint-section,.enemies-section) .popout--left,:is(.peppermint-section,.enemies-section) .popout--right{margin-inline:0}:is(.peppermint-section,.enemies-section) .text-group{margin-block-end:2.5rem}.news-section .cards-container{gap:2rem}.news-section .cards-container .card-info{padding:1rem;gap:1.5rem}.news-section .cards-container .card-info h3,.news-section .cards-container .card-info p{font-size:1rem}.game-edition-card .img-container-lower{justify-self:center;width:min(28rem,100%)}}@media screen and (width < 68em){.character-popover{width:100%;padding-inline:2rem}.game-edition-card{grid:"cover-img" auto "edition-content" auto}.game-edition-card .img-container{justify-self:center;max-inline-size:min(25rem,100%)}}@media screen and (width < 46em){h2,h3{font-size:2rem}.fancy-button{font-size:1rem;padding-inline:1.5rem}.header-hero{padding-block-end:5rem}.header-hero .logo-group{flex-direction:column}.header-hero .logo{width:10rem}.character-popover h2{font-size:2.75rem}.character-popover h3{font-size:1.5rem}.chai-section,.peppermint-section,.enemies-section{padding-inline:1.5rem;padding-block:0 7.5rem}.game-edition-card{margin-inline:0}.game-edition-card .game-edition-content{padding:0}.game-edition-card .button-mini-grid,.game-edition-card .buttons-grid{grid-template-columns:1fr;grid-template-areas:none}}@media screen and (width < 25em){.chai-section,.peppermint-section,.enemies-section,.game-edition-card{padding-inline:var(--mobile-padding-inline-sm)}.news-section-wrapper{max-inline-size:92%}.character-popover{padding-inline:var(--mobile-padding-inline-sm)}.popover-close-button{font-size:.75rem}}}@layer utilities{.screen-reader-only:not(:focus,:active){clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;position:absolute;white-space:nowrap}.tilted{rotate:var(--img-tilt)}}