:root {
    background: #24273a;
    color: #cad3f5;
    font-family: sans-serif;
}

html,body { margin: 0; }

.realcontent {
    padding: 4vw;
    width: 92dvw;
    overflow-x: hidden;
}

@font-face {
    font-family: Pacifico;
    src: url(../assets/pacifico.woff2);
}

ul { list-style-type: none; }

a { color: unset; text-decoration: unset; }
:visited { color: unset; }

.title {
    line-height: 1;
    margin-block: .1em;
    font-family: Pacifico, Comic Sans MS, cursive;
    font-size: clamp(3rem, 10rem, 25vw);
    white-space: nowrap;
}

.title::first-letter {
    letter-spacing: -0.19rem;
}

.card {
    padding: .1rem;
    padding-left: 1rem;
    margin-bottom: 1rem;
    background-color: #51576d;
    border-radius: 10px;
}

.card span {
    padding: 0 1rem;
}

/*
#title::after {
    content: "";
    display: inline-block;
    width: 4rem;
    height: 8rem;
    background-color: red;
    mask-image: url("../assets/tail.svg");
    background-repeat: no-repeat;
    background-size: contain;
    animation: ease-in-out alternate-reverse infinite 3s tail-wag;
    transform-origin: bottom left;
}
*/

.subtitle {
    font-size: 2rem;
}

@keyframes tail-wag {
    0% {
        transform: translate(-1.2rem, -2rem) rotate(30deg);
    }
    100% {
        transform: translate(-1.2rem, -2rem) rotate(60deg);
    }
}