body {
    background: #000;
    color: #fff;
    font-family: sans-serif;
    margin: 20px;
    padding: 0;
}

.label {
    font-size: small;
}

hr {
    border: none;
    border-top: 1px solid #fff;
}

pre {
    font-family: monospace;
    font-size: small;
    border: 1px solid #fff;
    padding: 10px;
    overflow-x: auto;
    white-space: pre;
}

a {
    color: #0ff;
}

a:visited {
    color: #0ff;
}

.foot {
    font-size: x-small;
    color: #808080;
    margin-top: 40px;
}

/* --- my code is actually kinda embarassing...turn..away..... --- */

/* --- frames --- */

.frame {
    display: none;
}

.frame:target {
    display: block;
}

.default {
    display: block;
}

.frame:target ~ .default {
    display: none;
}

/* --- script --- */

.transcript {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px;
    font-family: monospace;
    font-size: small;
    max-width: 420px;
    margin: 0 auto;
}

.message {
    visibility: hidden;
    animation: pop 0.001s forwards;
    margin: 4px 0;
}

.m1  { animation-delay: 0.2s; }
.m2  { animation-delay: 1.4s; }
.m3  { animation-delay: 2.6s; }
.m4  { animation-delay: 3.9s; }
.m5  { animation-delay: 5.1s; }
.m6  { animation-delay: 5.9s; }
.m7  { animation-delay: 6.7s; }
.m8  { animation-delay: 8.0s; }
.m9  { animation-delay: 8.8s; }
.m10 { animation-delay: 10.2s; }
.m11 { animation-delay: 11.8s; }
.m12 { animation-delay: 12.9s; }
.m13 { animation-delay: 14.1s; }
.m14 { animation-delay: 15.8s; }
.m15 { animation-delay: 16.9s; }
.m16 { animation-delay: 18.0s; }
.m17 { animation-delay: 19.0s; }
.m18 { animation-delay: 20.8s; }
.m19 { animation-delay: 22.0s; }
.m20 { animation-delay: 23.9s; }
.m21 { animation-delay: 25.5s; }
.m22 { animation-delay: 26.5s; }
.m23 { animation-delay: 27.8s; }
.m24 { animation-delay: 29.9s; }
.m25 { animation-delay: 32.5s; }
.m26 { animation-delay: 35.9s; }
.m27 { animation-delay: 37.5s; }
.m28 { animation-delay: 40.5s; }
.m29 { animation-delay: 41.6s; }
.m30 { animation-delay: 41.7s; }
.m31 { animation-delay: 41.8s; }
.m32 { animation-delay: 41.9s; }
.m33 { animation-delay: 42.0s; }
.m34 { animation-delay: 42.1s; }
.m35 { animation-delay: 42.2s; }
.m36 { animation-delay: 60.0s; }


@keyframes pop {
    to { visibility: visible; }
}