@charset "utf-8";

@view-transition {
    navigation: auto;
}
:is(:root,*,*::before,*::after,::backdrop) {
    box-sizing: border-box;
    --white: hsl(0 0% 100%);
    --gridCount: 3;
    --breakpoint: 'xs';
    --modalScale: calc((100% / 3) * 2);
    interpolate-size: allow-keywords;
    transition-behavior: allow-discrete;
    @media screen and (width > 30rem) {
        --gridCount: 5;
        --breakpoint: 'sm';
    }
    @media screen and (width > 48rem) {
        --gridCount: 6;
        --breakpoint: 'md';
    }
    @media screen and (width > 60rem) {
        --breakpoint: 'lg';
    }
    @media screen and (width > 80rem) {
        --breakpoint: 'xl';
    }
    @media screen and (prefers-reduced-motion: reduce) {
        transition: none;
    }
}
html {
    position: relative;
    block-size: 100%;
    scroll-behavior: smooth;
    @media screen and (prefers-reduced-motion: reduce) {
        scroll-behavior: auto;
    }
}
body {
    position: relative;
    font-family: Roboto, sans-serif;
    margin-block: 0;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
    background-color: var(--liberty-gray-04);
    color: var(--liberty-blue);
    inline-size: max(100%,25rem);
    &::before {
        position: absolute;
        inset-block-start: -100rem;
        inset-inline-start: -100rem;
        visibility: hidden;
        z-index: -999;
        user-select: none;
        pointer-events: none;
        content: var(--breakpoint);
    }
}
main {
    position: relative;
    inline-size: 100%;
}
.allGifts {
    position: relative;
    display: block;
}
footer {
    position: relative;
    inline-size: 100%;
    block-size: 3rem;
    background-color: var(--liberty-blue);
}
#foundationHolder {
    --fadeTime: 0.5s;
    border: none;
    position: fixed;
    display: none;
    border-radius: 0.5rem;
    margin-inline: auto;
    margin-block: auto;
    padding-block: 0;
    padding-inline: 0;
    color: var(--liberty-blue);
    min-block-size: 12rem;
    max-block-size: min(48rem, calc(100% * (6 / (var(--gridCount) + 2))));
    inline-size: calc(100% * (3 / var(--gridCount)));
    opacity: 0;
    scale: var(--modalScale);
    justify-content: center;
    animation: vanish 0.25s;
    &[open] {
        display: block;
        opacity: 1;
        scale: 1;
        animation: appear 0.5s;
    }
    &[data-fading='true'] {
        animation: vanish 0.25s;
    }
    &::backdrop {
        background-color: hsl(var(--liberty-gray-h) var(--liberty-gray-s) var(--liberty-gray-l) / 0.85);
    }
    @media screen and (width > 48rem) {
        inline-size: min(24rem, calc(100% * (3 / (var(--gridCount) + 2))));
    }
    .closeBox {
        position: absolute;
        display: block;
        inset-block-start: 0.5rem;
        inset-inline-end: 0.5rem;
        background-color: var(--liberty-yellow);
        inline-size: 1.5rem;
        aspect-ratio: 1 / 1;
        cursor: pointer;
        padding-block: 0.25rem;
        padding-inline: 0.25rem;
        border: none;
        outline: none;
        appearance: none;
    }
}
@keyframes appear {
    0% {
        opacity: 0;
        scale: 0.67;
        display: none;
    }
    50% {
        scale: 1;
    }
    100% {
        opacity: 1;
        display: block;
    }
}
@keyframes vanish {
    from {
        opacity: 1;
        scale: 1;
        display: block;
    }
    to {
        opacity: 0;
        scale: 0.67;
        display: none;
    }
}