html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    max-width: 100dvw;

    background: var(--clr-base);
    color: var(--clr-text);
    font-family: var(--ff-body);
    font-size: var(--fs-300);
    line-height: 1.4;
    letter-spacing: 0.05em;

    overflow-x: hidden;

    &>* {
        margin-inline: auto;
        width: 100%;
    }
}

h1,
h2,
h3 {
    font-family: var(--ff-heading);
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-weight: 600;
}

h1 {
    font-size: var(--fs-700);
}

h2 {
    font-size: var(--fs-500);
}

h3 {
    font-size: var(--fs-400);
}

a {
    color: var(--clr-iris);
    border-radius: var(--space-3xs);
    cursor: pointer;

    &:hover,
    &:focus,
    &:focus-visible {
        color: var(--clr-gold);

        transition: color var(--animate-t) var(--animate-f);
    }

    &:focus-visible {
        outline-offset: 2px;
        outline: var(--clr-foam) solid 2px;
    }
}

::-webkit-scrollbar {
    width: 15px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: var(--clr-base);
    box-shadow: inset 0 0 0 1px var(--clr-high);
    border-radius: var(--space-3xs);
}

::-webkit-scrollbar-thumb {
    background-color: var(--clr-muted);
    border-radius: var(--space-3xs);
    border: 3px solid transparent;

    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--clr-subtle);
}
