body {
    background-color: black;

    --border-width: 0.6vw;
    --diagonal-border-width: calc(var(--border-width) * var(--root-two));
    --root-two: 1.41;
    --active-color: red;
    --active-shadow: 6px;

    --box-height: 80vh;
    --box-width: 80vw;

    --menu-opt-width: 12vh;
    --menu-opt-font: 4vh;

    --m-space: calc((var(--menu-opt-width) / 2) + var(--border-width));

    --space-taken-by-menu: calc((var(--menu-opt-width) * 2) + (var(--border-width) * 4));
    --content-width: calc(var(--box-width) - var(--space-taken-by-menu));
    --content-height: calc(var(--box-height) - var(--space-taken-by-menu));
}


@media (max-aspect-ratio: 1/1) {
    body {
        --menu-opt-width: 12vw;
        --menu-opt-font: 4vw;
        --box-height: 95vh;
        --box-width: 95vw;
    }
}

.menu {
    height: var(--box-height);
    width: var(--box-width);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menuOpt {
    color: var(--active-color);
    position: absolute;
    text-align: center;
    filter: drop-shadow(0px 0px var(--active-shadow) var(--active-color));
    font-size: var(--menu-opt-font);
}

.menuPart {
    box-sizing: border-box;
    border-style: solid;
    border-color: var(--active-color);
}

.hOpt {
    height: var(--menu-opt-width);
    width: var(--box-width);
}
.vOpt {
    height: var(--box-height);
    width: var(--menu-opt-width);
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.top, .left {
    top: 0;
    left: 0;
}

.bottom, .right {
    bottom: 0;
    right: 0;
}

.hOpt .text {
    height: 100%;
    width: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-width: var(--border-width) 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hCorner, .vCorner {
    z-index: 100;
    position: absolute;
    transform: skew(var(--xSkew), var(--ySkew));
}

.hCorner {
    height: 100%;
    width: 50%;
}

.vCorner {
    height: 50%;
    width: 100%;
}

.top, .bottom {
    --ySkew: 0deg;
}

.top .hRight {
    --xSkew: -45deg;
}

.top .hLeft {
    --xSkew: 45deg;
}

.bottom .hRight {
    --xSkew: 45deg;
}

.bottom .hLeft {
    --xSkew: -45deg;
}

.left, .right {
    --xSkew: 0deg;
}

.left .vTop {
    --ySkew: 45deg;
}

.left .vBottom {
    --ySkew: -45deg;
}

.right .vTop {
    --ySkew: -45deg;
}

.right .vBottom {
    --ySkew: 45deg;
}

.vOpt .text {
    height: 60%;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-width: 0px var(--border-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vTop {
    top: var(--m-space);
    border-width: var(--diagonal-border-width) var(--border-width) 0px var(--border-width) ;
}

.hRight {
    right: var(--m-space);
    border-width: var(--border-width) var(--diagonal-border-width) var(--border-width) 0px;
}

.vBottom {
    bottom: var(--m-space);
    border-width: 0px var(--border-width) var(--diagonal-border-width) var(--border-width);
}

.hLeft {
    left: var(--m-space);
    border-width: var(--border-width) 0px var(--border-width) var(--diagonal-border-width);
}

.menuOpt a:active  {
    --active-color: goldenrod;
}
.menuOpt:hover {
    --active-color: white;
    --active-shadow: 16px;
    text-shadow: var(--active-color) 0 0 calc(var(--active-shadow) / 2);
}
a, a:visited {
    color: var(--active-color);
}

h3 {text-decoration:underline;}

.content:hover {
    --active-color: white;
    --active-shadow: 8px;
}
.content {
    position: absolute;
    width: var(--content-width);
    height: var(--content-height);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid var(--border-width) var(--active-color);
    color:#FFFFFF;
    font-weight:bold;
    font-size:1em;
    box-shadow: 0px 0px calc(2 * var(--active-shadow)) 2px var(--active-color), inset 0px 0px calc(2 * var(--active-shadow)) 2px var(--active-color);
    box-sizing: border-box;
}

.inner {
    position: absolute;
    inset: 16px;
    padding-right: 16px;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-color: var(--active-color) rgba(0,0,0,0);
    scrollbar-width: thin;
    word-break: break-word;
}

.content a, .content a:visited {
    color: red;
}
.content a:active  {
    color: goldenrod;
}

div.footer {
    position: absolute;
    text-align:right;
    right: 16px;
    bottom: 16px;
}
ul {
    padding-inline-start: 3vw;
}

:root {
    --logo-animation-time: 2.5s;
}

@property --wnot {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@keyframes roll-wnot {
    0% {
        --wnot: 0;
    }
    100% {
        --wnot: 60;
    }
}
@property --wdash {
    syntax: "<number>";
    inherits: false;
    initial-value: 15;
}
@keyframes roll-dash {
    0% {
        --wdash: 15;
    }
    100% {
        --wdash: 60;
    }
}
@property --wd1 {
    syntax: "<number>";
    inherits: false;
    initial-value: 15;
}
@keyframes roll-d1 {
    0% {
        --wd1: 15;
    }
    100% {
        --wd1: 60;
    }
}
@property --wd2 {
    syntax: "<number>";
    inherits: false;
    initial-value: 15;
}
@keyframes roll-d2 {
    0% {
        --wd2: 15;
    }
    100% {
        --wd2: 60;
    }
}

#toplogo {
    animation: roll-d1 calc(var(--logo-animation-time) * 0.5) calc(var(--logo-animation-time) * 0.25) infinite alternate ease-in-out both,
    roll-dash var(--logo-animation-time) calc(var(--logo-animation-time) * 0.75) infinite alternate ease-in-out both,
    roll-d2 calc(var(--logo-animation-time) * 0.5) calc(var(--logo-animation-time) * 0.5) infinite alternate ease-in-out both,
    roll-wnot var(--logo-animation-time) 0s infinite alternate ease-in-out both;
    --dash-stroke-width: calc(var(--wdash) * 1px);
    --d1-stroke-width: calc(var(--wd1) * 1px);
    --d2-stroke-width: calc(var(--wd2) * 1px);
    --not-stroke-width: calc(var(--wnot) * 1px);
}