/* Self-hosted Berkeley Mono */

@font-face {
    font-family: 'BerkeleyMono';
    src: url('../fonts/BerkeleyMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BerkeleyMono';
    src: url('../fonts/BerkeleyMono-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BerkeleyMono';
    src: url('../fonts/BerkeleyMono-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BerkeleyMono';
    src: url('../fonts/BerkeleyMono-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* Amber phosphor CRT, after https://codepen.io/dentednerd/pen/vYbgLMp
   (inspired by a Hyperplexed tutorial; credit to aleclownes.com/2017/02/01/crt-display.html) */

:root {
    --amber: 255 187 0;
    --radius: 4vmin;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'BerkeleyMono', 'Courier New', monospace;
    font-size: 12pt;
    color: #FFBB00;
    text-shadow: 0 0 0.5rem rgb(var(--amber) / 75%);
}

a {
    color: #FFBB00;
    text-decoration: underline;
}

::selection {
    background: #FFBB00;
    color: #000;
    text-shadow: none;
}

.one-em {
    height: 1.5em;
}

html {
  scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

/* Monitor bezel around the tube */
body {
    margin: 0;
    padding: 14px;
    background: #1a1a1a;
    overflow: hidden;
}

/* The tube */
.screen {
    position: fixed;
    inset: 14px;
    background: #000;
    border: solid 1px rgb(var(--amber) / 25%);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Layer: a single scan beam sweeping down the tube */
.scanlines {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgb(var(--amber) / 0%),
        rgb(var(--amber) / 30%) 45%,
        rgb(var(--amber) / 45%) 50%,
        rgb(var(--amber) / 30%) 55%,
        rgb(var(--amber) / 0%)
    );
    animation: sweep 30s linear infinite 18s backwards;
}

@keyframes sweep {
    from {
        transform: translateY(-6px);
    }
    40% {
        transform: translateY(100vh);
    }
    to {
        transform: translateY(100vh);
    }
}

/* Layer: the page, glowing at the edges of the tube */
.crt-content {
    position: relative;
    z-index: 3;
    height: 100%;
    overflow-y: auto;
    padding: 2em 0;
    box-shadow: inset 0 0 4vmin rgb(var(--amber) / 55%);
    scrollbar-width: thin;
    scrollbar-color: #FFBB00 #000;
}

.crt-content::-webkit-scrollbar {
    width: 8px;
}

.crt-content::-webkit-scrollbar-track {
    background: #000;
}

.crt-content::-webkit-scrollbar-thumb {
    background: #FFBB00;
}

/* Language switcher, top-right of the tube */
.lang-switch {
    position: absolute;
    top: 0.6rem;
    right: 1.1rem;
    z-index: 4;
    font-size: 10pt;
    letter-spacing: 0.1em;
}

.lang-switch a {
    padding: 0 0.3em;
    text-decoration: none;
}

.lang-switch a[aria-current] {
    text-decoration: underline;
}

.lang-switch a:not([aria-current]) {
    color: rgb(var(--amber) / 45%);
    text-shadow: none;
}

.lang-switch a:not([aria-current]):hover {
    color: rgb(var(--amber) / 85%);
}

.text-container {
    width: 90%;
    margin: auto;
}

.little-john {
    /* position: fixed; */
    /* right: 5px; */
    /* top: 5px; */
    width: 30%;
    padding: 2%;
}

@media screen and (max-width: 1200px) {
    .little-john {
	width: 50%;
    }
}

h1 {
    font-size: 16pt;
    font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {
    .scanlines {
        display: none;
    }
}

/* Printing a CRT makes no sense */
@media print {
    body {
        padding: 0;
        background: #fff;
        overflow: visible;
    }
    .screen {
        position: static;
        inset: auto;
        background: #fff;
        overflow: visible;
        border: none;
        border-radius: 0;
    }
    .scanlines {
        display: none;
    }
    .lang-switch {
        display: none;
    }
    .crt-content {
        height: auto;
        overflow: visible;
        box-shadow: none;
    }
    * {
        color: #000;
        text-shadow: none;
    }
}