* {
        padding: 0;
        margin: 0;
}

html {
        scroll-behavior: smooth;
        scrollbar-width: none;
}

body {
        padding: 0;
        margin: 0;
        font-size: 1em;
        background: black;
        color: white;
        font-family: monospace, sans-serif;
        --duration: 500ms;
}

body:not(.started) {
        cursor: pointer;
}

body.outro #container {
        animation: outro 3s ease 0s both;
}
@keyframes outro {
        to {
                transform: translateY(100vh);
        }
}
body #container {
        -webkit-tap-highlight-color: transparent;
}

@keyframes bye {
        to {
                transform: scaleY(0);
        }
}

.bye {
        animation: bye var(--duration) ease;
}

body::-webkit-scrollbar {
        display: none;
}

a {
        color: inherit;
}

/*
#container.dark {
        background: black;
        color: white;
}
*/

div.sensor {
        height: 100vh;
}

div.dots {
        height: 100vh;
        grid-column: 1 / -1;
        image-rendering: pixelated;
}

#container > div {
        display: grid;
}

#container > div > div {
        display: flex;
        flex-direction: column;
        transform-origin: 0 0;
}

#container > div > div > div {
        transform-origin: 0 0;
        background: currentColor;
        transition: background-color 1s ease;
        width: var(--w);
        /*background-image: url("frame.svg");*/
}

#container.dir > div > div > div {
        transform-origin: 0 100%;
}

div.line {
        height: 1px;
}

div.stroke {
        height: 3px;
}

div.em {
        height: 1em;
}

div.gold {
        height: 1.618em;
}

div.buren {
        height: 8.7cm;
}

div.viewportgr {
        height: calc(100vh / 1.618);
}

div.viewport {
        height: 100vh;
}

div.milian {
        height: 187cm;
}

div.leander {
        height: 193cm;
}

#container div > div.overlay {
        grid-column: 1 / -1;
        position: sticky;
        top: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: inherit;
        grid-auto-rows: var(--rows);
        pointer-events: none;
}

#container div > div.overlay > div {
        background: currentColor;
        width: calc(var(--mk) * 1%);
        height: 1px;
        transition:
                transform 0.7s ease,
                width 0.3s ease;
}

#container.rot div > div.overlay > div {
        transform: rotate(90deg);
}

body:not(.active) {
        cursor: none;
}

@keyframes fadein {
        from {
                opacity: 0;
                transform: scale(0);
        }
}

#fullscreen {
        position: fixed;
        top: 0;
        right: 0;
        cursor: pointer;
        transition: opacity 0.3s ease;
        z-index: 999999999;
}

#fullscreen:after {
        display: inline-block;
        content: "";
        background: currentColor;
        width: 2em;
        height: 2em;
        margin: 2em;
}

:fullscreen #fullscreen,
body:not(.active) #fullscreen {
        opacity: 0;
}

div.status {
        width: 100%;
        display: block;
        border: 1px solid;
        margin-bottom: 0.3em;
}

div.status > div {
        height: 3px;
        transform-origin: 0 0;
        display: block;
        background: currentcolor;
}

@media print {
        div.viewport,
        div.milian,
        div.leander {
                display: none;
        }
        div.typo,
        div.status,
        #fullscreen {
                display: none;
        }
        #container div > div {
                max-height: 100vh;
        }
}

.marker {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 9999999999;
        pointer-events: none;
        animation: goaway 0.3s ease 5s both;
        background: black;
        --s: 4px;
}

@keyframes goaway {
        to {
                opacity: 0;
        }
}

.marker > div.corner:nth-child(2) {
        top: 0;
        right: 0;
        animation-delay: 0.25s;
}
.marker > div.corner:nth-child(3) {
        bottom: 0;
        right: 0;
        animation-delay: 0.5s;
}
.marker > div.corner:nth-child(4) {
        bottom: 0;
        left: 0;
        animation-delay: 0.75s;
}

div.typo {
        pointer-events: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 50vh;
        z-index: 9999999;
        transition: color 0.5s ease;
}

body.preview div.typo {
        display: none;
}

div.typo > div.wrapper {
        display: flex;
        flex-wrap: wrap;
        margin: 2em 2px 0 4px;
        line-height: 1.1;
}

@media (max-width: 800px) {
        div.typo p.hash{
                display: none;
        }
}

div.typo p {
        font-size: 0.7em;
        padding: 1em 2em 1em 0;
        white-space: pre-line;
        text-transform: uppercase;
}

div.block {
        display: flex;
        height: 100vh;
        width: 100vw;
        background: blue;
        animation: drop 0.5s ease 0s both;
}

@keyframes drop {
        to {
                height: 0;
        }
}

.slide {
        display: block;
        height: 30vh;
        margin-top: 1px;
        animation: slide 0.75s ease 0s both;
}

@keyframes slide {
        0%,
        100% {
                height: 0;
        }
        20%,
        40% {
                height: 30vh;
        }
}
.layer {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: white;
        z-index: 999999999;
        animation: fader 1s ease 0s both;
}

@keyframes fader {
        to {
                opacity: 0;
        }
}
* {
        break-before: avoid;
        break-after: avoid;
}