:root {
    /* Brand colors */
    --primary-brand: #9678B5;
    --primary-shadow: #6A5580;

    /* Utility colors */
    --background: light-dark(#FEE, #242224);
    --background-container: light-dark(#EDD, #363336);

    --text: light-dark(black, white);

    /* Sizes */
    --margin: 2rem;
    --text-hero: 120px;
    --text-large: 48px;
    --text-medium: 36px;
    --text-small: 18px;
}

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    min-width: 100dvw;
    min-height: 100dvh;

    background-color: var(--background);
    color-scheme: light dark;
}

* {
    color: var(--text);
    font-size: var(--text-size);
}

.logo {
    transition: opacity 200ms;

    --text-size: var(--text-large);

    font-family: 'Fredoka';
    font-weight: 600;

    user-select: none;
    -webkit-user-select: none;
}

.vc,
.hc {
    display: flex;
    align-items: center;

    gap: calc(var(--margin) / 2);

    & * {
        margin: 0;
        padding: 0;
    }

    &:is(.vc) {
        flex-direction: column;
    }

    &:is(.hc) {
        flex-direction: row;
    }
}