@layer reset, base;

@layer reset {
    :where(*, *:before, *:after) {
        box-sizing: border-box;
    }

    :where(*) {
        margin: 0;
        padding: 0;
    }

    :where(body) {
        min-height: 100dvh;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance;
    }

    :where(p) {
        text-wrap: pretty;
    }

    :where(ol, ul) {
        list-style: none;
    }

    :where(a) {
        color: inherit;
    }

    :where(img, video, svg) {
        max-width: 100%;
        height: auto;
    }
}

@layer base {
    :where(body) {
        align-content: center;
        padding: 2rem;
        font-family: system-ui, sans-serif;
        color: #231f20;
        background-color: #f2f2f2;
    }

    .window {
        margin-inline: auto;
        padding: 2rem;
        max-inline-size: 48rem;
        border-radius: .5rem;
        background-color: #fcfcfc;
    }

    .header {
        img {
            display: block;
            margin-inline: auto;
            max-inline-size: 75%;
        }

        h1 {
            margin-block-start: 2rem;
            line-height: 1.2;
            text-align: center;
            font-weight: 700;
            font-size: clamp(1rem, .6429rem + 1.7857vw, 1.5rem);
        }
    }

    .main {
        margin-block: 2rem;

        p {
            line-height: 1.4;
            text-align: center;
            font-weight: 300;
            font-size: clamp(.75rem, .5714rem + .8929vw, 1rem);

            &:not(:first-child) {
                margin-block-start: .5em;
            }
        }
    }

    .contact {
        --contact-gap: .5rem;

        ul {
            display: flex;
            justify-content: center;
            gap: var(--contact-gap);

            li {
                font-weight: 600;
                font-size: clamp(.5rem, .1429rem + 1.7857vw, 1rem);

                &:not(:first-child) {
                    &::before {
                        content: "•";
                        display: inline-block;
                        margin-inline-end: var(--contact-gap);
                    }
                }
            }
        }
    }
}