main {
    align-content: center;
    background-image: repeating-conic-gradient(black 0 25%, #eee 0 50%);
    --square_size: 50px;
    --x: 0;
    --y: 0;
    background-position: var(--x) var(--y);
    background-size: calc(var(--square_size) * 2) calc(var(--square_size) * 2);
    display: grid;
    font-size: 10rem;
    height: 100%;
    inset: 0;
    justify-items: center;
    margin: auto;
    max-height: 2000px;
    max-width: 2000px;
    overflow: clip;
    position: absolute;
    width: 100%;
}

#controls {
    bottom: 0;
    display: flex;
    --margin: 10px;
    gap: var(--margin);
    margin: var(--margin);
    position: fixed;
    z-index: 99;
}

#controls > button {
    font-size: min(20%, 8vh);
    --size: 65px;
    height: min(var(--size), 12vh);
    opacity: 95%;
    padding: 0;
    --num: 5;
    width: min(var(--size), (100vw - var(--margin) * (var(--num) + 1)) / var(--num));
}

[data-text]::before {
    background-color: #000c;
    color: #64a0ff;
    content: attr(data-text);
    font-size: 18px;
    left: 50%;
    padding: .5em;
    position: absolute;
    -webkit-text-stroke: initial;
    transform: translate(-50%, -75%);
    width: 7em;
    z-index: 1;
}

@keyframes talk {
    50% { translate: 0 -3px }
}

[data-text] > div > div {
    animation: .3s infinite talk;
}

.join, .npc {
    color: #ff6464;
    position: relative;
    -webkit-text-stroke: 2px #400000;
}

:is(.join, .npc) > div {
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    translate: var(--x) var(--y);
}

@keyframes join {
  100% { rotate: x 1turn; translate: 0 }
}

.join > div {
    animation: 1s join;
    transform-origin: 50% 20%;
}

#me {
    caret-color: transparent;
    color: #64ff64;
    display: flex;
    -webkit-text-stroke: 2px #004000;
    width: min-content;
}

#me > div {
    position: relative;
}

nav {
    background-color: #0005;
}

.npc::before {
    translate: var(--x) var(--y);
}

@keyframes walk {
  25% { rotate: 8deg }
  75% { rotate: -8deg }
}

.walk > div > div {
    animation: 1s linear infinite walk;
}

.walk > div:nth-child(7n + 2) > div {
    animation-delay: -.15s;
}
.walk > div:nth-child(7n + 3) > div {
    animation-delay: -.3s;
}
.walk > div:nth-child(7n + 4) > div {
    animation-delay: -.45s;
}
.walk > div:nth-child(7n + 5) > div {
    animation-delay: -.6s;
}
.walk > div:nth-child(7n + 6) > div {
    animation-delay: -.75s;
}
.walk > div:nth-child(7n + 7) > div {
    animation-delay: -.9s;
}