body{
    background-color: #000;
    color: #0F0;
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
@keyframes bars{to{--barsplus: 30px;}}
div#box{
    --barsplus: 0px;
    display: grid;
    place-content: safe center;
    place-items: safe center;
    background: #0008;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    perspective: 0;
    height: max-content;
    width: max-content;
    box-sizing: border-box;
    max-height: 100vh;
    max-width: 100vw;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    /* BUG `both-edges` causes the bottom scrollbar to shrink, and it's unable to scroll fully to the right (by the width of the vertical scrollbar)
        normal:
        |        ||
        |        \|
        |   /```\#| ← right up to the vertical scrollbar (just the corner is empty)

        with both-edges:
        |        ||
        |        \|
        |  /```\##| ← aditional space (width of the vertical scrollbar)

        even with no vertical scrollbar:
        |        |
        |        |
        |  /```\#| ← aditional space (width of the vertical scrollbar)

        (but it can scroll all the way to the left edge)
    */
    padding: 1rem;
    padding-top: 0;
    border: 10px solid #CC0;
    border-image: repeating-linear-gradient(
        -45deg,
        #CC0 var(--barsplus) calc(15px + var(--barsplus)),
        #CC02 calc(15px + var(--barsplus)) calc(30px + var(--barsplus))
    ) 10;/* same as border-size */
    animation: bars 3s linear infinite reverse running;
    box-shadow: 4px 4px 8px 8px #CC02,
        inset 4px 4px 8px 8px #CC02;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}
@keyframes shadowcolor{to{--rainbowanglecolor: 360deg;}}
@keyframes rocking{
        0%{--turn:   0deg;}
        25%{--turn: -10deg;}
        75%{--turn:  10deg;}
    100%{--turn:   0deg;}
}
@keyframes turn{
    from{--turn: 0deg;}
    to{--turn: 360deg;}
}
@keyframes turnhalf{
        0%{--turn:   0deg;}
        50%{--turn: 170deg;}
    100%{--turn:   0deg;}
}
@keyframes turnhalfround{
        0%{--turn:    0deg;}
        25%{--turn:  200deg;}
    100%{--turn: -360deg;}
}
body>img{
    --rainbowanglecolor: 0deg;
    --turn: 0deg;
    position: fixed;
    top: 50%;
    left: 50%;
    overflow: hidden;
    translate: -50% -50%;
    rotate: var(--turn);
    perspective: 0;
    height: max(100vh,1000px);
    filter:
        drop-shadow(0px 0px .2rem #0A0)
        drop-shadow(0px 0px .6rem #0A0);
    filter:
        drop-shadow(0px 0px .2rem oklch(75% 0.127 var(--rainbowanglecolor)))
        drop-shadow(0px 0px .6rem oklch(75% 0.127 var(--rainbowanglecolor)));
    animation:
        shadowcolor      2s    linear         0s        2 normal  running,
        shadowcolor       .5s  linear         4s        2 normal  running,
        rocking          1s    linear         4s        1 normal  running,
        shadowcolor      2.5s  linear         5s       10 normal  running,
        turn            10s    ease-in       10s        1 normal  running,
        shadowcolor      1s    linear        30s        2 normal  running,
        rocking          2s    linear        30s        2 normal  running,
        shadowcolor      2.84s linear        32s      200 normal  running,
        turn            60s    ease-in-out   60s        1 reverse running,
        rocking          3s    ease-in-out  180s        3 normal  running,
        shadowcolor      6s    linear       600s      100 normal  running,
        turnhalf       600s    ease-in      600s        1 normal  running,
        shadowcolor      3s    linear      1200s     2000 normal  running,
        rocking          4s    linear      1800s        4 normal  running,
        turnhalfround 3600s    ease-in     3600s        1 normal  running,
        shadowcolor      6s    linear      7200s      600 normal  running,
        turn          3600s    ease        7200s        1 reverse running,
        shadowcolor      3s    linear     10800s infinite normal  running;
    user-select: none;
    pointer-events: none;
}
@keyframes textflicker{
        0%  {--textshadowcolorglow: #020;}
        1%  {--textshadowcolorglow: #0C0;}
        2.5%{--textshadowcolorglow: #040;}
        4.5%{--textshadowcolorglow: #090;}
        30%  {--textshadowcolorglow: #060;}
        50%  {--textshadowcolorglow: #0A0;}
        70%  {--textshadowcolorglow: #080;}
        95%  {--textshadowcolorglow: #0C0;}
    100%  {--textshadowcolorglow: #0F0;}
}
div#projects{
    display: flex;
    flex-direction: column;
    place-items: safe center;
}
div#projects>a{
    --textshadowcolorglow:#0A0;
    color: #0D0;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    text-shadow: .2rem .3rem .2rem #000;
    filter: drop-shadow(0px 0px 10px var(--textshadowcolorglow));
    animation: textflicker 5s linear 0s infinite running;
    perspective: 0;
}
div#projects>a.hidden:not(.show){display: none;}
div#projects>a:not(:first-child)::before{
    display: block;
    content: "\204C   \1F666   \204D";
    white-space: pre;
    padding: .2rem 0;
    font-size: .8rem;
    text-shadow: none;
    color: #0A0;
}
div#projects>a:nth-child(5n+2){
    animation-delay: 4s;
    animation-duration: 7s;
}
div#projects>a:nth-child(3n+4){
    animation-delay: 1s;
    animation-duration: 6s;
}
div#projects>a:nth-child(7n+6){animation-delay: 3s;}
div#projects>a:visited{color: #0A0;}/* can't edit more → https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector */
div#projects>a:hover,
div#projects>a:active{
    color: #0F0;
    filter: drop-shadow(0px 0px 10px #0F0);
}
div#social{
    padding: 10px 20px;
    border: .2rem outset #0A0;
    background-color: #0008;
}
div#social>a{
    color: #0AF;
    text-decoration: none;
}
div#social>a:not(:first-child):not(hr+*)::before{
    content: "\7C  ";
    color: #0A0;
    font-weight: 800;
}
div#social>a:visited{color: #05F;}
div#social>a:hover,
div#social>a:active{
    color: #0FF;
    text-shadow: 0px 0px 15px #00F,
        0px 0px 15px #00F,
        0px 0px 15px #00F;
}
hr{border: .1rem outset #0A0;}
@keyframes textglow{to{--textshadowcolorglow: #F90;}}
h1,h2{
    --textshadowcolorglow: #D60;
    color: #F90;
    font-family: 'Times New Roman', Times, serif;
    text-shadow: .2rem .3rem .2rem #000;
    filter: drop-shadow(0px 0px 15px var(--textshadowcolorglow));
    animation: textglow 2s cubic-bezier(.45,.05,.55,.95) 0s infinite alternate running;
    perspective: 0;
}
h1{font-size: 3rem;}
h1::before{content: "\A9C1  ";}
h1::after{content: " \A9C2";}
h1::before,
h1::after{
    font-size: large;
    vertical-align: text-top;
}
h2{font-size: 2.5rem;}
h2::before{content: "\FF1C  ";}
h2::after{content: " \FF0F\FF1E";}
::selection{
    background-color: #222;
    color: #0F0;
}
::selection:window-inactive{color: #0A0;}
@supports not selector(::-webkit-scrollbar){
    *{
        scrollbar-width: thin;
        scrollbar-color: #0A07 transparent;
    }
    *:hover{scrollbar-color: #0A0 transparent;}
}
::-webkit-scrollbar{
    width: 1.2rem;
    height: 1.2rem;
}
::-webkit-scrollbar-thumb:vertical:window-inactive{border-right-style: dashed;}
::-webkit-scrollbar-thumb:horizontal:window-inactive{border-bottom-style: dashed;}
::-webkit-scrollbar-thumb:vertical{
    background: transparent;
    border-right: .3rem solid #0A0;
    border-radius: 0;
}
:hover::-webkit-scrollbar-thumb:vertical{
    background-color: #000;
    box-shadow: inset .4rem 0 .4rem 0 #0A0;
    border: none;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
::-webkit-scrollbar-thumb:horizontal{
    background: transparent;
    border-bottom: .3rem solid #0A0;
    border-radius: 0;
}
:hover::-webkit-scrollbar-thumb:horizontal{
    background-color: #000;
    box-shadow: inset 0 .4rem .4rem 0 #0A0;
    border: none;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
::-webkit-scrollbar-thumb:hover:vertical{box-shadow: inset .4rem 0 .4rem 0 #0F0;}
::-webkit-scrollbar-thumb:hover:horizontal{box-shadow: inset 0 .4rem .4rem 0 #0F0;}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner{
    display: none;
    background: transparent;
}