/*
  Based on https://github.com/ondras/turbo-visionary/
  (See also: https://scp-wiki.wikidot.com/theme:turbo-vision)
  VGA font from: https://int10h.org/oldschool-pc-fonts/
*/

@font-face {
    font-family: DOSVGA;
    x-src: url("assets/Perfect DOS VGA 437.woff2");
    src: url("assets/MorePerfectDOSVGA.woff2");
}

/* Aspect-ratio corrected font - from square pixels to 3:4 pixels */
@font-face {
    font-family: AcDOSVGA;
    src: url("assets/AcPlus_IBM_VGA_9x16.woff2");
}

:root {
    --dos-black-colour: #000;
    --dos-blue-colour: #00a;
    --dos-green-colour: #0a0;
    --dos-cyan-colour: #0aa;
    --dos-red-colour: #a00;
    --dos-magenta-colour: #a0a;
    --dos-brown-colour: #a50;
    --dos-lightgrey-colour: #aaa;
    --dos-darkgrey-colour: #555;
    --dos-light-blue-colour: #55f;
    --dos-lime-colour: #5f5;
    --dos-light-cyan-colour: #5ff;
    --dos-light-red-colour: #f55;
    --dos-light-magenta-colour: #f5f;
    --dos-yellow-colour: #ff5;
    --dos-white-colour: #fff;
    /* Font is 9x16px --> 1em = 1.7777ch */
    /* Aspect-corrected font is 9x16 in 3:4 or 27:64 --> 1em = 2.370370ch */
    --character-ratio: 2.370370;
    --screen-width: 80;
}

* {
    font-family: AcDOSVGA;
    line-height: 1;
    padding: 0;
    border: none;
    /* 100% viewport-width / desired-width-in-characters x font-ratio --> viewport-based font height */
    font-size: calc(100vw / var(--screen-width) * var(--character-ratio));
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    overflow-wrap: break-word;
}

body {
    margin: 0;
    color: var(--dos-white-colour);
    background-image: url(assets/bg_aspect.png);
    background-position: 0 0;
    background-size: 1ch 1em;
    background-repeat: repeat;
}

em {
    color: var(--dos-yellow-colour);
}

/* MENU BAR */

nav {
    position: relative;
    z-index: 1;
}

nav ul {
    margin: 0;
    padding: 0;
    color: var(--dos-black-colour);
    background-color: var(--dos-lightgrey-colour);
    cursor: default !important;
}

nav > ul {
    height: 1em;
}

nav ul li {
    position: relative;
    cursor: pointer;
    padding: 0 1ch;
    white-space: nowrap;
    text-indent: 0;
}

nav ul li::before {
    content: none;
}

nav ul li:empty {
    height: 1em;
}

nav ul li:empty::before {
    content: "";
    position: absolute;
    left: -0.5ch;
    right: -0.5ch;
    top: calc(0.4375em);
    border-top: calc(0.0625em) solid var(--dos-black-colour);
}

nav ul li:empty:hover {
    background-color: transparent !important;
}

nav > ul > li {
    float: left;
}

nav ul li em {
    color: var(--dos-red-colour);
}

nav > ul ul {
    box-shadow: 2ch 1em 0 0 rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    position: relative;
    padding: 1em 2ch;
    position: absolute;
    top: 1em;
    left: 0;
    display: none;
}

nav > ul ul::before {
    content: "";
    position: absolute;
    border-color: var(--dos-black-colour);
    left: calc(1.4375ch);
    right: calc(1.4375ch);
    top: calc(0.46875em);
    bottom: calc(0.46875em);
    border-style: solid;
    border-width: calc(0.0625em) 0.125em;
}

nav.cssOnly li:hover, nav ul ul li:hover, nav li.active {
    background-color: var(--dos-green-colour);
}

nav.cssOnly li:hover > ul, nav li.active > ul {
    display: block;
}

nav li a, nav li a:visited {
    color: var(--dos-black-colour);
}

/* WINDOWS */

.window {
    box-shadow: 2ch 1em 0 0 rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    position: relative;
    padding: 1em 1ch;
    margin-bottom: 2em;
    background-color: var(--dos-blue-colour);
}

.window::before {
    content: "";
    position: absolute;
    border-color: var(--dos-white-colour);
    left: calc(0.34375ch);
    right: calc(0.34375ch);
    top: calc(0.375em);
    bottom: calc(0.4375em);
    border-style: double;
    border-width: calc(0.1875em) 0.3125em;
}

.window > * {
    position: relative;
}

.window > h2:first-child {
    position: absolute;
    left: 50%;
    top: 0;
    margin: 0;
    padding: 0 1ch;
    transform: translate(-50%, 0);
    background-color: inherit;
    color: var(--dos-white-colour);
}

.window .close {
    position: absolute;
    top: 0;
    background-color: inherit;
}

.window .close::before {
    content: "[ ]";
    color: var(--dos-white-colour);
}

.window .close::after {
    position: absolute;
    top: 0;
    left: 1ch;
    content: "■";
    color: var(--dos-lime-colour);
}

.window .close.left {
    left: 2ch;
}

.window .close.right {
    right: 2ch;
}

.window > p {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1ch;
    margin-right: 1ch;
}

/* BODY ELEMENTS */

body > p {
    margin-top: 0;
}

ul {
    padding-left: 4ch;
}

ul > li {
    list-style: none;
    text-indent: -2ch;
}

ul > li::before {
    content: "• ";
}

label, input, button {
    cursor: pointer;
}

button, input[type=button] {
    padding: 0 1ch;
    min-width: 8ch;
    color: var(--dos-black-colour);
    box-shadow: 1ch 0.5em 0 #000;
    x-background-color: var(--dos-green-colour);
    margin-bottom: 1em;
}

button:hover, input[type=button]:hover {
    background-color: var(--dos-white-colour);
}

button:focus, input[type=button]:focus {
    color: var(--dos-white-colour);
}

button + button,
button + input[type=button],
input[type=button] + button,
input[type=button] + input[type=button] {
    margin-left: 3ch;
}

/* MEDIA ADAPTATIONS */

@media all and (orientation:landscape) {
    :root {
        /* Font is actual 9x16px --> 1em = 1.7777ch */
        --character-ratio: 1.777777;
    }
    
    * {
        font-family: DOSVGA;
        font-size: calc(100vw / var(--screen-width) * var(--character-ratio));
    }
    
    body {
        background-image: url(assets/bg.png);
    }
}