@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+Mono:wght@100..900&display=swap');

:root {
    --fg: oklch(74.98% 0.1553 10.16);
    --bg: oklch(20% 0 0);
    --img-sep: url('data:image/svg+xml;utf8,<svg width="21px" height="21px" viewBox="0 0 5.6444403 5.6444403" xmlns="http://www.w3.org/2000/svg"><path style="fill:%23ff8097;stroke-width:0.264583" d="M 5.64444,2.82222 V 2.53999 L 3.104442,0 H 2.82222 Z m 0,2.82222 V 5.36221 L 0.282222,0 H 0 Z m -2.82222,0 H 3.104442 L 0,2.53999 V 2.82222 Z M 0,5.64444 H 0.282222 L 0,5.36221 Z"/></svg>');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans Mono","Noto Sans JP", monospace;
    font-size: 1rem;
}

a {
    text-decoration: none;
    color: var(--fg);
}

h1 {
    font-size: 2.986rem;
}

body {
    background-color: var(--bg);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"><text x="50%" y="50%" font-size="30" fill="%23FFFFFF20">+</text></svg>');
    background-repeat: repeat;
    color: var(--fg);
}

main {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 1060px;
    margin: 15px auto;
    row-gap: 1.5rem;
    z-index: 1;
}

main > header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

nav,
nav > span {
    display: flex;
    column-gap: 20px;
    row-gap: 20px;
    align-items: center;
    flex-grow: 1;
}

nav > span:nth-child(1):before,
nav > span:nth-child(2):after {
    content: "";
    flex-grow: 1;
    height: 1rem;
    background-image: var(--img-sep);
}

.divider {
    display: flex;
    column-gap: 20px;
    align-items: center;
}

.divider:before,
.divider:after {
    content: "";
    flex-grow: 1;
    height: 1rem;
    background-image: var(--img-sep);
}

article header > span {
    color: #0000;
    font-weight: bold;
    background-clip: padding-box,text !important;
    background-repeat: no-repeat !important;
    animation: typing steps(var(--n)) forwards;
    view-timeline-name: --into-view;
    animation-timeline: --into-view;
}

article > header > span {
    padding-right: 2ch;
    background:
        linear-gradient(-90deg,var(--fg) 1ch, #0000 0) 1ch 0 / 0 200%,
        linear-gradient(var(--fg) 0 0) 0 0;
    animation-range-end: 20%;
}

footer > header {
    margin: 1rem 0;
    text-align: right;
}

footer > p {
    margin-top: 1rem;
}

footer > header > span {
    padding-left: 2ch;
    background:
        linear-gradient(-270deg, var(--fg) 1ch, #0000 0) 1ch 0 / 0 200%,
        linear-gradient(var(--fg) 0 0) 0 0;
    background-position: right;
    animation-range-end: 10%;
}

article:after {
    margin-top: 1.5rem;
}

article:before {
    margin-bottom: 1.5rem;
}

main > article:after,
main > article:not(:first-of-type):before{
    display: block;
    content: "";
    height: 1rem;
    background-image: var(--img-sep);
}

section > article > p {
    margin-top: 1rem;
}

main > article > p {
    max-width: 80ch;
    margin: 1rem auto 0 auto;
}

main > footer {
    font-weight: 500;
    text-align: center;
}

section.status {
    margin: 0px 30px;
    padding: 0px 15px;
    border-left: 3px solid var(--fg);
    border-right: 3px solid var(--fg);
}

section.status:first-of-type {
    margin-bottom: 6px;
}

input[type=text] {
    padding: 2px 5px;
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--fg);
    outline: none;
}

button,
.button {
    padding: 2px 5px;
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--fg);
    cursor: pointer;
    user-select: none;
}

input[type="checkbox"] {
    appearance: none;
}

label:has(input:checked) {
    background: color-mix(in oklch, var(--fg) 30%, transparent);
}

.term {
    min-width: 75ch;
    flex-grow: 1;
}

.term > div {
    font-weight: 500;
}

aside:has(> .portal) {
    flex-grow: 1;
    padding: 20px 20px;
    min-height: 100%;
    border: 3px solid var(--fg);
    mask: conic-gradient(at 20px 20px,#0000 75%,#000 0) 0 0/calc(100% - 20px) calc(100% - 20px), conic-gradient(#000 0 0) content-box;
    animation: bb 7s ease-in-out infinite;
}

.portal {
    content: url("portal.svg");
    margin:auto;
    height: 295px;
    width: auto;
    user-select: none;
}

.typing {
    --s: .005s;
    color:#0000;
    background:
        linear-gradient(-90deg,var(--fg) 1ch,#0000 0) 10px 0,
        linear-gradient(var(--fg) 0 0) 0 0;
    background-size: 100% 200%;
    background-clip: padding-box,text;
    background-repeat: no-repeat;
}

body:not([data-cached=true]) .typing {
    background-size: 0 200%;
    animation:
        cursor 0.75s 10s steps(1),
        typing calc(var(--n)*var(--s)) steps(var(--n)) forwards;
    animation-delay: calc(var(--d)*var(--s));
}

body[data-cached=true] b span {
    --d: 0 !important;
}

.blink {
    animation: b calc(var(--f, 1s) * 1s) step-end calc(var(--d) / var(--f, 1));
}

.inverted {
    background-color: var(--fg);
    color: var(--bg);
}

.reveal {
    opacity: 0;
    animation: r 0s forwards calc(var(--d, 1s) * 1s);
}

.mirror {
    animation: mirror 5s step-end 3;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.scanlines {
    position: relative;
}

.scanlines:after,
.scanlines:before {
    display: block;
    position: fixed;
    content: "";
}

.scanlines:before {
    top: 100%;
    min-width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.4);
    animation: scanline 14s linear infinite;
}

.scanlines:after {
    top: 0px;
    min-height: 100%;
    min-width: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4) 51%);
    background-size: 100% 4px;
    animation: scanlines 3s steps(60) infinite;
}

@keyframes scanline {
    75% { top: 100% }
    to { top: 0% }
}

@keyframes scanlines {
    from { background-position: 0 50% }
}

@keyframes typing {
    from { background-size: 0 200% }
    to { background-size: calc(var(--n) * 1ch) 200% }
}

@keyframes cursor {
    50% { background-position: 0 -100%, 0 0 }
}

@keyframes bb {
    80% { border-color: var(--fg) }
    90% { border-color: #0000 }
}

@keyframes b {
    50% { opacity: 0 }
}

@keyframes r {
    to { opacity: 1 }
}

@keyframes mirror {
    96.99% { transform: ScaleX(0) }
    97% { transform: ScaleX(-1) }
}

@media only screen and (max-width: 1059px) {
    html,main {
        max-width: 100%;
    }

    main {
        margin: unset;
        padding: 15px;
    }

    .term {
        min-width: unset;
    }
}

@media only screen and (max-width: 768px) {
    section.status {
        margin: 10px 0px;
    }

    main > header {
        flex-direction: column-reverse;
    }

    nav {
        flex-wrap: wrap;
    }
}