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

* {
    margin: 0;
    padding: 0;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

@font-face {
    font-family: 'Pacifico';
    src: url('fonts/Pacifico-Regular.woff2') format('woff2');
}

body {
    background-color: #f0eee6;
}

h1 {
    font-family: Pacifico;
    font-weight: normal;
}

h1.revealed {
    overflow: hidden;
    padding: 0.5em;
}

h1.revealed span {
    will-change: transform;
    padding: 0.2em 0.2em;
    margin: -0.2em -0.2em;
    display: inline-block;
    animation: reveal 1.3s cubic-bezier(0.19, 1, 0.22, 1);
    animation-fill-mode: backwards;
    animation-delay: calc(var(--index, 0) * 0.03s);
}

@keyframes reveal {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.container {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}