body {
    background-color: #000;
    color: #fff;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    margin: 0;
    padding: 0;
}

#current-time,
#site-label {
    position: fixed;
    left: 5px;
    z-index: 4;
}

#current-time {
    top: 3px;
    font-size: 16px;
}

#site-label {
    top: 51px;
    font-size: 14px;
    padding-left: 0.5ch;
}

#about-label {
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    font-size: 14px;
    z-index: 4;
}

.about-link {
    color: inherit;
    text-decoration: none;
}

.about-link:is(:hover, :focus-visible) {
    text-decoration: underline;
}

#build-info {
    position: fixed;
    top: 3px;
    right: 8px;
    font-size: 12px;
    z-index: 5;
    user-select: text;
    display: none;
}

#updated-colon {
    cursor: pointer;
}

#right-interact {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 32px;
    background: transparent;
    cursor: pointer;
    z-index: 5;
}

.rainbow-letter {
    display: inline-block;
    background: linear-gradient(90deg, #ffb3c7, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #bdb2ff, #ffc6ff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.25), 0 0 14px rgba(255, 255, 255, 0.12);
    animation: rainbow-flow 2.2s linear infinite;
}

@keyframes rainbow-flow {
    from { background-position: 0% 50%; }
    to { background-position: 300% 50%; }
}

#youtube-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1;
}

#youtube-frame {
    width: min(68vw, 450px);
    aspect-ratio: 16 / 9;
}

#youtube-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

#nyan-cat {
    position: fixed;
    left: 0;
    bottom: 70px;
    width: 80px;
    height: auto;
    z-index: 3;
    pointer-events: none;
    display: none;
    transform: translateX(-120px);
}

#nyan-cat.run {
    display: block;
    animation: nyan-run 10s linear;
}

@keyframes nyan-run {
    from { transform: translateX(-120px); }
    to { transform: translateX(calc(100vw + 120px)); }
}

.about-links {
    position: fixed;
    left: 5px;
    top: 0;
    padding-top: 3lh;
    padding-left: 0.5ch;
    font-size: 16px;
}

.about-gap-before {
    margin-top: 1lh;
}

.cube-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
    z-index: 0;
}

.cube {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    animation: cube-rotate 8s linear infinite;
    cursor: pointer;
}

.cube-face {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #fff;
}

.cube-front {
    transform: translateZ(50px);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.cube-back   { transform: rotateY(180deg) translateZ(50px); }
.cube-right  { transform: rotateY(90deg) translateZ(50px); }
.cube-left   { transform: rotateY(-90deg) translateZ(50px); }
.cube-top    { transform: rotateX(90deg) translateZ(50px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(50px); }

.cube.opened .cube-front {
    transform: translateZ(50px) rotateX(-110deg);
}

.cube-nyan {
    position: absolute;
    width: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateY(0deg) rotateX(20deg);
    opacity: 0;
    transition: opacity 0.3s 0.2s;
    animation: cube-nyan-counter 8s linear infinite;
}

.cube.opened .cube-nyan {
    opacity: 1;
}

@keyframes cube-nyan-counter {
    from { transform: translate(-50%, -50%) rotateY(0deg) rotateX(20deg); }
    to { transform: translate(-50%, -50%) rotateY(-360deg) rotateX(20deg); }
}

@keyframes cube-rotate {
    from { transform: rotateX(-20deg) rotateY(0deg); }
    to { transform: rotateX(-20deg) rotateY(360deg); }
}

.youtube-link {
    color: #ff0033;
    text-decoration: none;
}

.youtube-link:is(:hover, :focus-visible) .youtube-rest {
    text-decoration: underline;
}

.youtube-link:is(:hover, :focus-visible) .youtube-white {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #fff;
}

.x-link {
    color: #fff;
    text-decoration: none;
    display: inline-grid;
}

.x-link .x-normal,
.x-link .x-fancy {
    grid-area: 1 / 1;
}

.x-link .x-fancy {
    visibility: hidden;
}

.x-link:is(:hover, :focus-visible) .x-normal {
    visibility: hidden;
}

.x-link:is(:hover, :focus-visible) .x-fancy {
    visibility: visible;
}

.x-link:is(:hover, :focus-visible) {
    text-decoration: underline;
}

.discord-link {
    color: #5865F2;
    text-decoration: none;
}

.discord-link:is(:hover, :focus-visible) .discord-rest {
    text-decoration: underline;
}

.discord-link:is(:hover, :focus-visible) .discord-so {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #fff;
}