@charset "UTF-8"; :root { --col1: #C0FFF8; --col2: #00CCE0; --col3: rgba(32, 96, 128, 0.8); --pc: 3; --pm: 8px; --ps: 64px; --pcs: calc((var(--pm) * 2) + var(--ps)); --pos: calc(100% - (var(--pcs) * (var(--pc) - 1)) - (var(--pm) * 2) - 16px); --tw: 56px; } @keyframes boot-content { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @keyframes boot-ring { from { opacity: 0; transform: scale(8); } to { opacity: 1; transform: scale(1); } } @keyframes panel { from { background-position-y: 0, 0; } to { background-position-y: -64px, -144px, -1024px; } } @keyframes panel-open { from { background-position-y: 0, 0; } to { background-position-y: -512px; } } @keyframes ring-c { from { rotate: 0deg; } to { rotate: 360deg; } } @keyframes ring-cc { from { rotate: 45deg; } to { rotate: -315deg; } } html { background-color: #000000; background-image: url("/tex/bg.png"); background-repeat: repeat; color: var(--col1); font-family: "Courier New", monospace; font-size: 24px; font-variant: small-caps; font-weight: bold; min-width: 320px; scrollbar-color: var(--col1) var(--col3); text-shadow: 0 0 8px var(--col2); user-select: none; } body { display: block; height: 100vh; place-items: center; padding: 16px 0; text-align: center; } [title] { cursor: help; } a { border: 4px solid var(--col1); box-shadow: 0 0 8px var(--col2); display: inline-block; } b { display: inline-block; margin-left: 1ch; } blockquote { display: block; margin-left: 1ch; } hr { border: 1px solid var(--col1); box-shadow: 0 0 8px var(--col2); margin: 24px 16px; } input { display: none; } u { background-color: var(--col1); box-shadow: 0 0 8px var(--col2); color: var(--col3); padding: 0 8px; text-decoration: none; text-shadow: none; } #content { animation-duration: 1s; animation-iteration-count: 1; animation-name: boot-content; animation-timing-function: ease-out; height: 100%; width: 100%; } #ring-0, #ring-1, #ring-2 { border-color: var(--col1); border-style: solid; border-width: 2vmin; box-shadow: 0 0 16px var(--col2), 0 0 16px var(--col2) inset; position: fixed; z-index: 0; } #ring-0 { animation: boot-ring 1s ease-out 0s 1, ring-c 20s linear 0s infinite; height: 25vmin; left: calc(50vw - 12.5vmin); top: calc(50vh - 12.5vmin); width: 25vmin; } #ring-1 { animation: boot-ring 1.5s ease-out 0s 1; border-radius: 60vmin; height: 50vmin; left: calc(50vw - 25vmin); top: calc(50vh - 25vmin); width: 50vmin; } #ring-2 { animation: boot-ring 2s ease-out 0s 1, ring-cc 20s linear 0s infinite; height: 65vmin; left: calc(50vw - 32.5vmin); top: calc(50vh - 32.5vmin); width: 65vmin; } #about + .panel img { filter: drop-shadow(0px 0px 8px var(--col2)); float: right; height: min(100%, 50vw); margin-left: 16px; shape-margin: 16px; } #about + .panel > div { line-height: 1.5em; padding: 16px; } #pictures + .panel img, #sketches + .panel img { height: 240px; width: 240px; } #pictures + .panel a, #sketches + .panel a { margin: 8px; } #pictures + .panel > div, #sketches + .panel > div { padding: 8px; } .panel { animation-duration: 8s; animation-iteration-count: infinite; animation-name: panel; animation-timing-function: linear; background-clip: border-box; background-color: var(--col3); background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(rgba(0, 204, 224, 0) 0%, rgba(0, 204, 224, 0) 60%, rgba(0, 204, 224, 0.25) 80%, rgba(0, 204, 224, 0) 100%); background-repeat: repeat, repeat, repeat; background-size: 100% 8px, 100% 18px, 100% 1024px; border: 4px solid var(--col1); box-shadow: 0 0 16px var(--col2), 0 0 16px var(--col2) inset; display: inline-block; height: calc(100vh - 32px); margin: 0 var(--pm); overflow: hidden; position: relative; text-align: left; transition-duration: 0.5s; transition-property: height, width; transition-timing-function: ease-out; width: var(--ps); z-index: 1; backdrop-filter: blur(8px); } input:checked + .panel { width: var(--pos); } .panel > * { mix-blend-mode: screen; } .panel > div { box-shadow: 0 0 16px var(--col2); display: inline-block; height: 100%; opacity: 0; overflow-x: hidden; overflow-y: auto; pointer-events: none; position: relative; transition-delay: 0.5s, 0s; transition-duration: 0.25s; transition-property: box-shadow, opacity; transition-timing-function: ease-out; width: calc(100% - var(--tw)); } input:checked + .panel > div { box-shadow: 0 0 0px var(--col2); opacity: 1; pointer-events: auto; transform: scale(1); transition-delay: 0.5s, 0s; transition-duration: 0.5s; } .panel > div::after { animation-duration: 0.05s; animation-iteration-count: infinite; animation-name: panel-open; animation-timing-function: linear; background-color: var(--col1); background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(32, 96, 128, 0.75) 50%, rgba(0, 0, 0, 0) 100%); background-repeat: repeat; background-size: 100% 512px; content: ""; height: 100%; left: 0; opacity: 1; pointer-events: none; position: absolute; top: 0; transition-delay: 0.5s; transition-duration: 0.5s; transition-property: opacity; transition-timing-function: ease-out; width: 100%; } input:checked + .panel > div::after { opacity: 0; } .panel > label { display: inline-block; font-size: 32px; height: 100%; line-height: var(--tw); padding: 16px 0; text-orientation: upright; writing-mode: vertical-lr; } input:not(:checked) + .panel > label { cursor: pointer; } @media only screen and (orientation: portrait) { body { padding: 8px 16px 0 16px; } .panel { height: var(--ps); margin: var(--pm) 0; width: calc(max(100vw, 320px) - 32px); } input:checked + .panel { height: var(--pos); width: calc(max(100vw, 320px) - 32px); } .panel > div { height: calc(100% - var(--tw)); width: 100%; } .panel > label { display: block; height: auto; padding: 0 16px; writing-mode: horizontal-tb; } } @media only screen and (max-width: 400px) { body { font-size: 16px; } }