:root{
    --gap-page-section--m: 4rem;
    --gap-page-section--s: calc(var(--gap-page-section--m)/2);
    --gap-page-section--l: calc(var(--gap-page-section--m)*1.5);
    --gap-page-section--xl: calc(var(--gap-page-section--m)*2);

    --hero-content-wrapper-gap: var(--gap-page-section--l);

    --featuredDeal-border-width: 1.3px;
    --featuredDeal-clr-price-bg: var(--really-light-green-grey);
    --featuredDeal-clr-price-border: var(--mint-green);
    --featuredDeal-clr-price-off-bg: var(--orange);
    --featuredDeal-clr-price-font: var(--dark-green);
    --featuredDeal-border-radius: var(--border-radius);

    --card-container-minmax-max-value: var(--card-max-width);
    --card-container-gap-x: clamp(var(--gap-s), 1.5vw, var(--gap-l)); /* a fluid gap, vs. var(--gap-xl) var(--gap-l);*/

    --retailer-content-wrapper-max-width: min(80rem, var(--content-max-width));
    --retailer-img-width:clamp(5vw, 10vh, 40vw);

    --keyFeatures-grid-columns: 2;
    --keyFeatures-img-width:3rem; /*min(3rem, 4vw);*/
    --keyFeatures-img-margin-bottom:0;
}

.text-clr-price-dark-green{ color: var(--clr-deal-great-font); }

section:nth-child(even){ padding-block: var(--gap-page-section--m); }
section:nth-child(odd){ padding-block: var(--gap-page-section--l); }
#hero{
    padding-top: var(--gap-page-section--m);
    padding-bottom: var(--gap-page-section--l);
}
#hero .content-wrapper{
    gap: var(--hero-content-wrapper-gap);
}
#hero__skipAnimationsBtn{
    align-self:start;
    background-color:var(--clr-bg-secondary);
    border-radius:50%;
    margin-top:calc( -1 * var(--gap-l)); /*kinda hacky*/
    padding-block:2px;
    padding-inline:6px;
}
#hero__threeButtonSection #gameList{
    display:none;
    width:100%;
}

#featuredDeal{
    border-radius: var(--featuredDeal-border-radius);
}
#featuredDeal__titleBox{
    border-radius: var(--featuredDeal-border-radius);
}
#featuredDeal__specsBox{
    background-color: var(--featuredDeal-clr-price-bg);
    border: var(--featuredDeal-border-width) solid var(--featuredDeal-clr-price-border);
    border-radius: var(--featuredDeal-border-radius);
}
#featuredDeal__specsBox__discountPercent{
    background-color: var(--featuredDeal-clr-price-off-bg);
    border-radius: 18px;
    margin-top:0.5ch;
    width:5ch;
}
#featuredDeal__specsBox__priceLine{
    padding-top:0;
}
#featuredDeal__priceChart{
    border: var(--featuredDeal-border-width) solid var(--clr-font-secondary);
    border-radius: var(--featuredDeal-border-radius);
}
#featuredDeal__NotFound{
    padding: var(--gap-l) var(--gap-xs);
}
#retailers .content-wrapper{
    max-width: var(--retailer-content-wrapper-max-width);
}
#retailers__container{
    flex-wrap:wrap;
    gap: var(--gap-m) var(--gap-xl);
}
#retailers__container .image-container{
    width:var(--retailer-img-width);
}

#keyFeatures__content{
    grid-template-columns: repeat(var(--keyFeatures-grid-columns), 1fr);
}
#keyFeatures__content a img{
    width:var(--keyFeatures-img-width);
    aspect-ratio:1;
    margin-inline: auto;
    margin-bottom:var(--keyFeatures-img-margin-bottom);
}

/* animations */
#hero{
    --blink-duration: 1s;
    --blink-delay-1: 0s;
    --blink-iteration-1: 1;

    --typewriter-delay: calc( var(--blink-delay-1) + (var(--blink-duration)*var(--blink-iteration-1)) );
    --typewriter-duration: 2s;

    --blink-delay-2: calc( var(--typewriter-delay) + var(--typewriter-duration) );
    --blink-iteration-2: 1;

    --appear-duration: 1s;
    --appear-delay-l: 1.4s;
    --appear-delay-m: 0.8s;
    --appear-delay-s: 1s;
    --appear-delay-xs: 1s;
    --appear-delay-0: calc( var(--blink-delay-2) + (var(--blink-duration)*var(--blink-iteration-2)) );
    --appear-delay-1: calc( var(--appear-delay-0) + var(--appear-delay-m));
    --appear-delay-2: calc( var(--appear-delay-1) + var(--appear-delay-m));
    --appear-delay-3: calc( var(--appear-delay-2) + var(--appear-delay-m));
    --appear-delay-4: calc( var(--appear-delay-3) + var(--appear-delay-m));
    --appear-delay-5: calc( var(--appear-delay-4) + var(--appear-delay-m));
    --appear-delay-6: calc( var(--appear-delay-5) + var(--appear-delay-l));

    --disappear-delay: var(--appear-delay-6);
}

.typewriter {
  overflow: hidden; /* ensures text doesn’t show until “typed” */
  border-right: 0.15em solid black; /* blinking cursor */
  white-space: nowrap;
  width: 0;
}

.fonts-loaded.typewriter{
  animation-name: blinking, typing, blinking;
  animation-delay: var(--blink-delay-1), var(--typewriter-delay), var(--blink-delay-2);
  animation-duration: var(--blink-duration), var(--typewriter-duration), var(--blink-duration);
  animation-iteration-count: var(--blink-iteration-1), 1, var(--blink-iteration-2);
  animation-fill-mode: none, forwards, forwards;
  animation-timing-function: step-end, steps(14, end), step-end;
}
@keyframes typing {
  from { width: 0 }
  to { width: 10ch } /* number of characters */
}
@keyframes blinking{
    0%, 50% { border-color: black; }
    50%, 100% { border-color: transparent; }
}

.appear{
    opacity:0%;
}
.fonts-loaded.appear{
    animation-name: appear;
    animation-duration: var(--appear-duration);
    animation-fill-mode: forwards;
}
.appear-delayed-0{ animation-delay: var(--appear-delay-0); }
.appear-delayed-1{ animation-delay: var(--appear-delay-1); }
.appear-delayed-2{ animation-delay: var(--appear-delay-2); }
.appear-delayed-3{ animation-delay: var(--appear-delay-3); }
.appear-delayed-4{ animation-delay: var(--appear-delay-4); }
.appear-delayed-5{ animation-delay: var(--appear-delay-5); }
.appear-delayed-6{ animation-delay: var(--appear-delay-6); }
.appear-dramatic{ animation-duration: calc(2 * var(--appear-duration)); }
@keyframes appear {
    0%{ opacity:0% }
    100%{ opacity: 100% }
}
.appearThenDisappear{
    opacity:0%;
    animation-name: appear, appear;
    animation-delay: 1.5s, var(--disappear-delay);
    animation-duration: var(--appear-duration), var(--appear-duration);
    animation-fill-mode: forwards, forwards;
    animation-direction: normal, reverse;
}

.skip-animations, .skip-animations *{
    animation:none !important;
    transition:none !important;
    opacity:100% !important;
}

@media screen and (max-width: 1096px) and (max-aspect-ratio: 1/1){
    :root{
        --gap-page-section--m: 3rem;
        --blink-iteration-1: 1;
    }
    #hero{
        padding-bottom: var(--gap-page-section--m);
    }
    #hero__skipAnimationsBtn{
        align-self:end;
        margin-top:0;
    }
    #hero__minorText{
        width:100%;
    }
    #hero__content-wrapper{ flex-direction: column; }
    #retailers .content-wrapper{ gap:var(--gap-l); }
    #smart__featuresBox{
        align-items:center;
        flex-direction: column;
        gap:var(--gap-l);
    }
    #cta_buttonGroup{ flex-direction: column; }
}

@media screen and (max-width: 768px) and (max-aspect-ratio: 1/1){
    :root{
        --hero-content-wrapper-gap: var(--gap-page-section--m);
        --gap-page-section--m: 2rem;
        --keyFeatures-grid-columns: 1;
    }
    #hero__threeButtonSection__row{
        flex-direction:column;
    }
    #budgetSelect{
        width:100%;
    }
    #quiz__buttonGroup{
        border-radius: var(--featuredDeal-border-radius);
        box-shadow: var(--box-shadow);
        padding:var(--gap-m);
    }
    #keyFeatures__content .grid-justify-end,
    #keyFeatures__content .grid-justify-start{
        justify-self:center;
    }
    #keyFeatures .gap-xl{
        gap: var(--gap-l);
    }
    #retailers__container{
        gap:var(--gap-m) var(--gap-l);
    }
}