:root {
    transition: all 5s ease-out;
    --px: 100px;
    --py: 200px;
    --width: auto;
    --height: auto;
    --margin: 10vw;
    --br: 100%;
    --rotx: 60deg;
    --rotz: 0deg;
    --offset: -10vh;
    font-size: 5vw;
}

@property --spin {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    to { --spin: 1turn; }
}

html, body {
    margin: 0;
    overflow: hidden;
    height: 100%;
    color-scheme: light dark;
    background:
        radial-gradient(ellipse at 50% 120%, #f7fbff 0%, #d6e6f5 60%, #b9cfe4 100%);
    color: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
    html, body {
        background:
            radial-gradient(ellipse at 50% 120%, #0a1733 0%, #050a1a 60%, #000000 100%);
        color: #f0f0f0;
    }
}

body {
    perspective: 280vmin;
    perspective-origin: var(--px) var(--py);
}

.tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.tree p {
    overflow: hidden;
    border-radius: var(--br);
    background: repeating-radial-gradient(
         #0b3d0b 0%,
         #1f6b1f 55%,
         #f8f8ff 62%,
         #b8860b 66%,
         #c1272d 72%,
         #f8f8ff 80%);
    position: absolute;
    bottom: 100%;
    top: 0;
    transform:
        translateZ(-100vmin)
        translateY(var(--offset))
        rotateX(var(--rotx))
        rotateZ(var(--rotz))
        rotateZ(var(--spin));
    width: var(--width);
    height: var(--height);
    animation: spin 10s linear infinite;
    text-align: center;
    word-spacing: 0.25em;
    line-height: 1;
}

.tree p .shape {
    width: 50%;
    height: 100%;
}

.tree p .shape.left { float: left; }
.tree p .shape.right { float: right; }

.tree p .bauble {
    display: inline-block;
    transform: rotate(var(--rot, 0deg));
}

.tree p:nth-of-type(2n) {
    background: repeating-radial-gradient(
         #08300a 0%,
         #2e7d32 55%,
         #d4af37 64%,
         #8b0000 70%,
         #f8f8ff 76%,
         #2e7d32 82%);
}