/* -------------------- */
/* RESET */
/* -------------------- */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);

    color: var(--color-text);

    background: var(--color-background);
}

img {
    display: block;

    max-width: 100%;
}

a {
    text-decoration: none;

    color: inherit;
}

ul {
    list-style: none;
}

/* -------------------- */
/* LAYOUT */
/* -------------------- */

.container {
    width: min(var(--container-width), calc(100% - 80px));

    margin-inline: auto;
}

/* -------------------- */
/* LAYOUT */
/* -------------------- */

.text-blink {
    animation: textBlink 2.4s ease-in-out infinite;
}

@keyframes textBlink {
    0%, 100% {
        opacity: 1;
    }

    45% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }

    55% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .text-blink {
        animation: none;
    }
}