@import url('https://fonts.googleapis.com/css2?family=Special+Gothic:wght@400&display=swap');

@font-face {
  font-family: 'Alagard';
  src: url('https://pearlnightslair.neocities.org/assets/alagard.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tandy';
  src: url('https://pearlnightslair.neocities.org/assets/PxPlus_Tandy1K-II_200L-2y.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Birchleaf';
  src: url('https://pearlnightslair.neocities.org/assets/BirchLeaf.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
    --bodyfont: 'Special Gothic', sans-serif;
    --headerfont: 'Alagard', serif;
    --dropcapfont: 'Birchleaf', serif;
    --asciifont: 'Tandy', monospace;

    --color-bg:        #282A36;
    --color-line:      #6272A4;
    --color-selection: #44475A;
    --color-fg:        #F8F8F2;
    --color-comment:   #6272A4;
    --color-red:       #FF5555;
    --color-orange:    #FFB86C;
    --color-yellow:    #F1FA8C;
    --color-green:     #50FA7B;
    --color-cyan:      #8BE9FD;
    --color-purple:    #BD93F9;
    --color-pink:      #FF79C6;

    --background: var(--color-bg);
    --color:      var(--color-fg);
    --block:      var(--color-bg);

    --link:      var(--color-cyan);
    --linkhover: var(--color-purple);

    --footerlink:      var(--color-cyan);
    --footerlinkhover: var(--color-purple);

    --h1: var(--color-cyan);
    --h2: var(--color-fg);
    --h3: var(--color-fg);

    --header: var(--color-cyan);
    --footer: var(--color-fg);

    --menubg:         var(--color-selection);
    --menucolor:      var(--color-cyan);
    --menubghover:    var(--color-line);
    --menucolorhover: var(--color-purple);

    --text-sub:      var(--color-comment);
    --text-strike:   var(--color-red);
    --text-mark:     var(--color-yellow);
    --text-accent:   var(--color-pink);
    --text-positive: var(--color-green);
    --text-warning:  var(--color-orange);
    --text-code:     var(--color-green);
    --text-quote:    var(--color-pink);
    --border-accent: var(--color-purple);
    --border-subtle: var(--color-selection);
}

@media (prefers-color-scheme: light) {
    :root {
        --color-bg:        #FFFBEB;
        --color-line:      #6C664B;
        --color-selection: #CFCFDE;
        --color-fg:        #1F1F1F;
        --color-comment:   #6C664B;
        --color-red:       #CB3A2A;
        --color-orange:    #A34D14;
        --color-yellow:    #846E15;
        --color-green:     #14710A;
        --color-cyan:      #036A96;
        --color-purple:    #644AC9;
        --color-pink:      #A3144D;

        --background: var(--color-bg);
        --color:      var(--color-fg);
        --block:      var(--color-bg);

        --link:      var(--color-cyan);
        --linkhover: var(--color-purple);

        --footerlink:      var(--color-cyan);
        --footerlinkhover: var(--color-purple);

        --h1: var(--color-cyan);
        --h2: var(--color-fg);
        --h3: var(--color-fg);

        --header: var(--color-cyan);
        --footer: var(--color-fg);

        --menubg:         var(--color-selection);
        --menucolor:      var(--color-cyan);
        --menubghover:    var(--color-line);
        --menucolorhover: var(--color-purple);
    }
}

* { margin:0; padding:0; }

body {
    background:var(--background);
    font:1rem var(--bodyfont);
    color:var(--color);
}

#main-header {
    font:2.5em var(--headerfont);
    color:var(--header);
    text-align:center;
    margin-bottom:10px;
}

#main-header a {
    color:var(--header);
    text-decoration:none;
}

#main-header a:hover, #main-header a:focus {
    color:var(--linkhover);
}

#main-menu {
    font:1.1em var(--headerfont);
    width:100%;
    text-align:center;
}

#main-menu ul {
    list-style:none;
}

#main-menu li {
    display:inline-block;
    margin: .25em .25em 0 0;
}

#main-menu li a {
    font:1.1em var(--headerfont);
    padding:7px;
    color:var(--menucolor);
    text-decoration:underline;
}

#main-menu li a:hover, #main-menu li a:focus {
    color:var(--menucolorhover);
    background: none;
    font-family: var(--dropcapfont);
}

main {
    margin-top:10px;
    margin-bottom:10px;
    background:var(--block);
    padding:20px;
    border: 10px solid var(--block);
}

main h1 {
    font:1.8em var(--headerfont);
    color:var(--h1);
    margin:0 0 10px 0;
}

main h2 {
    font:1.5em var(--headerfont);
    color:var(--h2);
    margin:20px 0 10px 0;
    padding-bottom: 1em;
    padding-top: 1em;
}

main h3 {
    font:1.3em var(--headerfont);
    color:var(--h3);
    padding-bottom: 1em;
    padding-top: 1em;
}

main h4 {
    font:1em var(--headerfont);
    font-style:italic;
    color:var(--h3);
    padding-bottom: 1em;
    padding-top: 1em;
}

p {
    line-height:1.5;
    margin:10px 0 10px 0;
}

main hr {
    margin-top: 1em;
    margin-bottom: 1em;
    border: none;
    border-top: 1px dashed var(--border-subtle);
}

main a {
    color:var(--link);
}

main a:hover, main a:focus {
    color:var(--linkhover);
}

main ul {
    list-style-position: outside;
    margin-left: 25px;
}

main ul li {
    line-height:1.5;
}

main img {
    max-width:100%;
}

main input, textarea, select, button {
    background: var(--color-selection);
    color: var(--color-fg);
    font: 1rem var(--bodyfont);
    border: 1px dashed var(--link);
    padding: 8px;
    margin: 2px;
}

main :is(input, textarea, select):focus {
    outline: none;
    border-color: var(--linkhover);
}

main blockquote, main .box {
    padding:10px;
    border-left: 3px solid var(--color-pink);
    color: var(--color-fg);
    font-style: italic;
}

main details {
    background: var(--color-selection);
    padding:10px;
    margin:10px 0 10px 0;
}

main details summary {
    cursor:pointer;
}

s, del   { color: var(--text-strike); }
sub, sup { color: var(--text-sub); }
small    { color: var(--text-sub); }

mark {
    background: var(--text-mark);
    color: var(--color-bg);
    padding: 0 0.2em;
}

code, kbd, samp {
    font-family: var(--asciifont);
    color: var(--text-code);
    background: var(--color-selection);
    padding: 0.1em 0.35em;
    border-radius: 2px;
}

abbr[title] {
    text-decoration: underline dotted var(--color-comment);
    cursor: help;
}

ul li::marker,
ol li::marker {
    color: var(--text-quote);
}

#main-footer {
    text-align:center;
    padding:15px;
    color:var(--footer);
}

#main-footer a {
    color:var(--footerlink);
}

#main-footer a:hover, #main-footer a:focus {
    color:var(--footerlinkhover);
}

.scrollbox {
    background: var(--block);
    padding: 5px;
    max-height: 250px;
    overflow: auto;
    border: 1px solid var(--link);
}

ul.coffins {
    list-style: none;
    padding-left: 0;
}

ul.coffins li::before {
    content: "⚰ ";
    color: var(--link);
    margin-right: 0.5em;
}

ul.coffins li {
    margin: 0.3em 0;
}

.tombstone {
    position: relative;
    background: none;
    font-size: 1.2rem;
    font-family: var(--headerfont);
    font-variant: small-caps;
    margin: 0.3rem auto;
    color: var(--link);
    padding: 0.7rem;
    text-align: center;
    display: block;
    cursor: pointer;
    overflow: hidden;
    border: 2px dashed var(--link);
    letter-spacing: 0.1em;
    width: auto;
}

.tombstone:hover {
    color: var(--linkhover);
    border-color: var(--linkhover);
    font-family: 'Alagard', serif;
}

.button-row {
    display: flex;
    gap: 0.5rem;
}

.button-row .tombstone {
    flex: 1;
    margin: 0;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
    border: 1px dashed var(--border-subtle);
    font-family: 'Special Gothic', sans-serif;
}

th, td {
    padding: 8px 8px 8px 1em;
    text-align: left;
    border: 1px dashed var(--border-subtle);
}

th {
    font-family: var(--headerfont);
    font-weight: normal;
    letter-spacing: 0.05em;
}

@media (max-width: 600px) {
    thead { display: none; }

    tr {
        display: block;
        margin-bottom: 8px;
    }

    td {
        display: block;
        border: none;
    }

    td:first-child {
        font-family: var(--headerfont);
        font-weight: normal;
    }
}

.page { display: none; width: 100%; }
.page:target { display: block; width: 100%; }
#home { display: block; width: 100%; }

@supports selector(:has(*)) {
    main:has(#magazine-rack:target) #home { display: none; }
    main:has(#webbed-sites:target) #home { display: none; }
}

#container:has(#magazine-rack:target) #main-menu a[href="#magazine-rack"],
#container:has(#webbed-sites:target) #main-menu a[href="#webbed-sites"],
#container:not(:has(.page:target)) #main-menu a[href="#home"] {
    color: var(--menucolorhover);
}

#container {
    width: calc(100% - 20px);
    padding:10px;
    margin-top:10px;
}

#main-menu li {
    margin-bottom:15px;
    display:inline-block;
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    background:var(--menubg);
    color:var(--link);
    z-index:1000;
    padding:5px;
}

#skip a:focus {
    top: 0;
}

@media screen and (min-width: 800px) {
    #container {
        max-width:1000px;
        width:90%;
        margin:25px auto 0 auto;
        display:flex;
        flex-wrap:wrap;
    }

    body {
        background: var(--background);
        font: 1rem var(--bodyfont);
        color: var(--color);
        position: relative;
    }

    body::after {
        content:
            '                                        /\\ \a'
            'o    o   o        o   *   *   *   .    /  \\ o   o   o   "   o   \'   *     \a'
            '       .   .      .     O   "   .     /    \\  o   *   .   o   *   *   "   o \a'
            ' *   *     .     / \\  \'   *   *      /      \\   .   \'   \'   .       *   \'   O    \a'
            '   .      / \\   /   \\   O   \'   "   /        \\    o   \'   "   *   .       " \a'
            '         /   \\ /     \\             /          \\                        .\a'
            '         \'._. /       \\           /.---\'\'\'\'----.\\                      / \\\a'
            '          |  / .-.-.-. \\          \\        _   /     .._.._.._.._    /   \\\a'
            '          |   |       |---.....___ |      |_| |      |              /     \\\a'
            '           \\__        |---.....___ |       _  |      \\ .--\'\'\'\'--   /       \\      \a'
            '              |                    |      | | |----...|           /         \\\a'
            '      /\\      |                    |      |_| |----...|          /           \\\a'
            '     /  \\     |                    :          |       :         /             \\\a'
            '    /    \\    |                    \'    /\\    |       \'        / _____________ \\ \a'
            '   /      \\   :       |                /  \\   :   .._.._.._.._ \\_______________/\a'
            '  /.-.--.-.\\ \'       :                /    \\  \'   \\__      __/  |  _    -  _  |\a'
            '   |  _   |           \'              /      \\      |     :  |   | |_|   \' |_| |\a'
            '   | |_|  |                         /.-.--.-.\\     |     :  \'   |       -     |\a'
            '   |      |  \'\'\'\'----....            |   _  |      \'     ....---|       \'  _  |\a'
            '   |______|              \'\'\'\'----....|  |_| |....----\'\'\'\'       \'--.    - | | |\a'
            '    [____]   \'\'\'\'----....            |      |            ....------\'    \' |_| |\a'
            '    |    |               \'\'\'\'----....|______|....----\'\'\'\'           |   -     |\a'
            '    |    |      .ttttttttttt.         [____]                        |   \'     :\a'
            '   .|    |   .ttttttttttttttttttt.    |    |      .tttttttt.   .tttt.    .tttttt.\a'
            ' .ttttttttttttttttttttttttttttttttttttttttttttttttttttprlttttttttttttttttttttttttt.\a'
            '\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'\'.\a';

        position: fixed;
        bottom: 0;
        left: 0;

        font-family: var(--asciifont);
        line-height: 1.3;
        z-index: -1;
        opacity: 0.2;
        white-space: pre;

        pointer-events: none;
        user-select: none;
    }

    #main-header {
        flex: 1 1 100%;
        text-align:left;
    }

    #main-menu {
        flex: 1 1 100%;
        text-align:left;
    }

    main {
        flex: 1 1 calc(75% - 30px);
        overflow:auto;
        height:calc(500px - 30px);
    }

    #main-footer {
        flex: 1 1 calc(100% - 30px);
    }
}

#main-menu li#btn4-all {
    font: 1.1em var(--headerfont);
    padding: 7px;
    color: var(--menucolor);
    text-decoration: underline;
    cursor: pointer;
}

#main-menu li#btn4-all:hover, #main-menu li#btn4-all:focus {
    color: var(--menucolorhover);
    font-family: var(--dropcapfont);
}