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

body {
    font-family: arial, sans-serif;
    background-color: #000;
    color: #fff;
    min-height: 100vh;
    display: grid;
    align-content: flex-start;
    place-items: center;
    overflow: hidden;
    perspective: 600px;

    * {
        transform-style: preserve-3d;
    }
}

/* Base */

.main {
    display: block;
}

h1 {
    color: #000;
    font-size: 16em;
    text-shadow:
        -2px -2px 3px #111,
        3px 3px 3px #222;
    margin-bottom: 4px;
    @media (max-width: 48em) {
        font-size: 10em;
    }
}

h1::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  bottom: -25px;
  background-color: #ff00ef73;
  box-shadow: 0 0 10px #f700ff, 0 0 20px #0010ffb8, 0 0 40px #009fff;
}

.bold {
    font-size: 8em;
    text-shadow:
        -2px -2px 3px #111,
        3px 3px 3px #222;
}

p {
    color: #1f80fb;
    font-size: 2em;
    position: relative;
}

a {
    color: inherit;
}

a:link, a:visited, a:hover, a:active { text-decoration: none; }

.sweet-title {
    color: #000;
    font-weight: 900;
    line-height: 0.75em;
    text-align: center;
    text-shadow: 3px 1px 1px #ff00ff, 2px 2px 1px #165bfb, 4px 2px 1px #ff00ff,
                 3px 3px 1px #165bfb, 5px 3px 1px #ff00ff, 4px 4px 1px #165bfb,
                 6px 4px 1px #ff00ff, 5px 5px 1px #165bfb, 7px 5px 1px #ff00ff,
                 6px 6px 1px #165bfb, 8px 6px 1px #ff00ff, 7px 7px 1px #165bfb,
                 9px 7px 1px #ff00ff;
}

/* DNA: body has some required settings also. */

.scene {
    position: relative;
    width: 60vmin;
    height: 60vmin;
    margin-top: 7vmin;

    * { position: absolute; }
}

.dna {
    top: 50%;
    left: 50%;
    font-size: 8vmin;
    /* animation: dna 12s infinite linear; */

    &::after {
        content: '';
        position: absolute;
        inset: -4.5em -1.5em;
        background-image: linear-gradient(to right, transparent, 10%, black, 90%, transparent);
    }
}

.l0l0 {
    animation: l0l0 8s calc(var(--l0l0) * -2s) infinite linear;
    color: #000;
    text-shadow:
        -2px -2px 3px #03a0fe70,
        3px 3px 3px #6e22ad70;

    span {
        inset: -1em;
        display: grid;
        place-items: center;
        font-weight: 700;
        user-select: none;
        transform:
            translateY(calc((var(--i) - 6) * 0.6em))
            rotateY(calc(var(--i) * 20deg))
            translateZ(1.5em)
            rotateZ(-40deg);
    }
}

@keyframes dna {
    from { transform: rotateZ(0deg) rotateX(20deg) rotateZ(360deg); }
    to { transform: rotateZ(360deg) rotateX(20deg) rotateZ(0deg); }
}

@keyframes l0l0 {
    to { rotate: y -1turn; }
}

.l0l0-0 { --l0l0: 0; }
.l0l0-1 { --l0l0: 1; }
.l0l0-2 { --l0l0: 2; }
.l0l0-3 { --l0l0: 3; }

.i-0 {
    --i: 0;
}

.i-1 {
    --i: 1;
}

.i-2 {
    --i: 2;
}

.i-3 {
    --i: 3;
}

.i-4 {
    --i: 4;
}

.i-5 {
    --i: 5;
}

.i-6 {
    --i: 6;
}

.i-7 {
    --i: 7;
}

.i-8 {
    --i: 8;
}

.i-9 {
    --i: 9;
}

.i-10 {
    --i: 10;
}

.i-11 {
    --i: 11;
}

.i-12 {
    --i: 12;
}
.i-13 {
    --i: 13;
}