@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;

    --background: #020202;
    --color: #D3D3D3;
    --block: #020202;

    --link: #a8a8a8;
    --linkhover: #c0c0c0;

    --footerlink: #a8a8a8;
    --footerlinkhover: #c0c0c0;

    --h1: #D3D3D3;
    --h2: #D3D3D3;
    --h3: #D3D3D3;

    --header: #D3D3D3;
    --footer: #D3D3D3;

    --menubg: #0c0c0c;
    --menucolor: #a8a8a8;
    --menubghover: #000000;
    --menucolorhover: #c0c0c0;
}

@media (prefers-color-scheme: light) {
    :root {
        --background: #f5f5f5;
        --color: #1a1a1a;
        --block: #f5f5f5;

        --link: #4a4a4a;
        --linkhover: #1a1a1a;

        --footerlink: #4a4a4a;
        --footerlinkhover: #1a1a1a;

        --h1: #1a1a1a;
        --h2: #1a1a1a;
        --h3: #1a1a1a;

        --header: #1a1a1a;
        --footer: #1a1a1a;

        --menubg: #e8e8e8;
        --menucolor: #4a4a4a;
        --menubghover: #d0d0d0;
        --menucolorhover: #1a1a1a;
    }
}

* { 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-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:none;
}

#main-menu li a:hover, #main-menu li a:focus {
    color:var(--menucolorhover);
    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(--link);
}

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: #0c0c0c;
    color: var(--color);
    font: 1rem var(--bodyfont);
    border: 1px solid var(--link);
    padding: 8px;
    margin: 2px;
}

main blockquote, main .box {
    padding:10px;
    border-left:2px dashed var(--link);
}

main details {
    background:rgb(0,0,0,0.1);
    padding:10px;
    margin:10px 0 10px 0;
}

main details summary {
    cursor:pointer;
}

#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(--header);
    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 {
    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(--color);
    font-family: 'Special Gothic', sans-serif;
}

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

th {
    font-family: var(--headerfont);
    font-weight: normal;
}

@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;
    }
}
    .bats {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAVKADAAQAAAABAAAAVAAAAAC3aM1AAAACtElEQVR4Ae2bwXIjMQhEna39/1/OZqr2YHpkQQeU+PB8MgZa6I3UNYfk4zH/+RTJD4nd8N31wn7+hIigTQCgbYRRAKCRRzvq+ttqAPW8Vc3zbzrDb/c/z2Z/54TayPYNAN3zsbMAtZHtG9S/9tXfy7qe+L1V6l1H98wJrT+IUiVAS5jqRQCtsypVArSEqV4E0DqrUiVAS5jqRQCtsypVHn0nezFB9l6qM2l9ltdltV7zozEndBTn4wFQgA4TGJb7+6WnHqVLnPYg1c/m0bzbr/tzY10/9HPlA45+ANA+w6AA0ICjH6j/XIpbj1gsudJ4LlO9bv203vOs13fV17zGYT+cUMXTjAHaBKjtAFUizTjc//9arodkI6zWyHpO5o/ujxM6/OgACtBhAsNyFX9zPaeiObyNltzo/rjyrWdxbwbonUnrF4C28N2bV37X9ZSsf7XmfbK5X9x5snqdLOyHE6p4mjFAmwC1HaBKpBlf99/1DHfJ4DFu84H6o/vlhA4/MYACdJjAsNzK31yPUY2sX+uHt3STc+fJ6nWBsB+uvOJpxgBtAtR2gCqRZhzu/wutlqe80Hynn0f3xwkdfrQABegwgWG5lYe6npKNtFoj6zmZP7o/rvzwowMoQIcJDMtdf2Pf/WQeqZ7VrZ/W0/2rvua3MVd+i8dPAtRntu0A6BaPn7z8LPOMzPPcVXU91dd8pp/1az7Ty/Lb+TihGT4zD1ATWFYO0IyQmZ/2l8ryWw/6EtCZtD7L6wxar/nRmBM6ipP/lx/GCdBxoD/hL+qB45swBY/uGQ81n0ZWDtCMkJkHqAksKwdoRsjMA9QElpUDNCNk5gFqAsvKT7yTue+dOsNv92fMtnlO6BaPnwSoz2zbAdAtHj+p/uUr3DvUA7trvLteIMAJDTj6AUD7DIMCQAOOfvAPD547mE3xmmcAAAAASUVORK5CYII=') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
      .tv {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAB8klEQVR4Aezc0ZKCMAxAUdz//+fd8lY7S2LqVQteB2aoISEcMoxP/mz857eV7Pe2XGrre9uP0eZeAYo2eLZigsJPTNATgN5aj/2+v6f6vYXfuvXX3o/73vZjtBknFOXcNkEFhQXgcjMTur+HKvvYciWXOPfZ64/54XoGNCz47UFB4QkQ9AOg43sMbmH5cqX7d0Lh5ymooLAAXI6Y0Fvr6Up7u535jQCdv/oFMwWFH6qggsICcDknVFBYAC7nhJ4UFG573XJOKPxsBBUUFoDLOaGCwgJwOSdUUFgALueECgoLwOWcUEFhAbjcyhMK3+p7ygkKOwsqKCwAl3NCBYUF4HJOqKCwAFzOCRUUFoDLOaGCwgJwuatNKMxTLydo3SzMEDTkqQcFrZuFGYKGPPWgoHWzMEPQkKceFLRuFmYIGvLUg4LWzcIMQUOeelDQulmYIei2hUDVoKBVseR8QROgaljQqlhyvqAJUDUsaFUsOV/QBKgaFrQqlpxPgI7/a3T2dUIWhwnQ+ApfFhUUfuCCLgg6/mcT3OLT5bL+svh/DRx+54Qe0swFBJ1zO8wS9JBmLvAIaPaOGX93znXyuqysvyye3f9d54+A3iW4iAUEjX3KUUHLZHHCDOj4Trn6OhYcojOgQwmXvYCgvQZwLCiA2Jf4AwAA//+BUy1vAAAABklEQVQDAJ19jKmdXWUfAAAAAElFTkSuQmCC') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
      .need4pede {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAC8klEQVR4Xu2bSXbjMAwFnfsfuhOvEtJ+LJZASkrn964fIAyFQZSsfDz4379O5aP7P8nZw7Uaffx9NH2+w2hnlAkYya/Fxd4DlBkpjQBVuFj5dkD7kO+2Amw8Vr/Jf8UODdAfBAL0dSWkQ2FNWkBWX4+8HelSQHwP0Rp007EGh1M9M/IB2hIIUNuCoB+gvw0oxXtkrfy0uXsn2x27vUMDVJ5D6aYUoAHa9MD2kbcOqh1a3ZGrr6d8hvJ3CzZAC0gD9PFY2kABugGo3UG2otVzaGEAl1yq8n0mG6Bj7gG6pC+/jQTo1UCtf6rY3X63tyut9GR45IYRoIMWDFCeT2qgxkKAXgBUVegrvrvt0NJOZN5tvjMdGqBjqg3DAJ1oQfMbU4CeANSOeB/STJHqaeyzYPPHkbcGAxR+AglQ1/3pUOBlG+oFKD3rWgd3WwGUX/WcGqDpULfTqOPoFGInMh26u0Op/lQxW3HSp3isfPUOLX/bFKBtCQO0a2makFIDkfFnLCUHb66f8WnHeqR/+cgTQHvOtAmthPnOls2P8m3srfhyhDouQGWLBOjilyMBejJQ2fCnqy/dqWfs0NMJSYcBKoGReoASISm/HVCKn25adH1VTsc2C1Q/eloHlHCAEiEpD1AJjNT/HFA74hYQ7TAqSFVO/il/le9TmQzSywFKmBKi66ty8k/5B2hXgQCttuT/DnQxn7I5GnG74l7eh652UM54s4HV+QaoLBjdlAL0bkApHqpofz3dhcmfvd6OPPnHL0fIAMkDlAhJeYBKYKT+54ESILtzLFDrv2p/az4zwW0NgGi+edcwE/PI7NZ8ZoLbGkCAMoGZIrGVbw17LCLbWxtkJnkbACU045NsVORUIJIPfc8kF6CifAG6+K+nA/QCoNVn79JOEtM2q2rjUfozHRqgLQH9oQNVWlVsw8Gc4iP51vjToa87tDSRK4D2ARyxSV21U04dS/ImtiPJ07n0iM2dwMg2ASN5gHaECRjJA3Qn0E9LKxhQWKgrEwAAAABJRU5ErkJggg==') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
      .skull {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACgElEQVR4Xu2cwW7EIAxENz/UU9X/P1c97Q+16jFE2qfR2ICy06uNMY/BAZLt8Vj89/H59VuZwvPn+6iMp8Za2vl/sgGqThn4B2iAviQwfcmPiqyued3xSU8BSoREe4CKwMg9QImQaN8OKNVA1y7ykd0DVEb2ukGABuj5qDpuu6gkFPO7hNtOoWOGKiDVvxpwgBYTDdAAfX099/ZLfhSIeran2yo1nivY5Us+QM0prFZUdTxzeI8o1CU4tJ8O1N1nVrcv5jlfodVAVj/Vx/FEocUSDdC7AaUSQOOdvc+kfJYrNEBpikw77Svdg4CZHjaPQhGR5nABqipkd8UQjurxBqj5sdr4UAzQAKVFrNnLl7x7dKOEdtsnVuc7xjsC9KxoVQABCjUzQLWSiV9MtwOtLglqwiKvi3t3/vKS707IBUbtu/MPUPFXIjQhAboaKF2vUU2kGaYl69rV/l1/eR/qdkgT4AKcLQB5yc9OMEChJqmKvj1QF4jb3gXs9k/t5SVPAWnAbnuKT3a3f2ofoKu3TTRD3Qqh+GTvzl9WqJrw7u+Ych9KMyraA1QERu4BSoREeztQOgmJ+T5mHy3V/LrHm9fIeY3savLcnkoA9ZYPHQZC7UBpRrrt6gB3q9n5+q5YIQEaoGcCWfLwUFABuZcfxQLN75QCtFjhARqg2snEraGr72Onb5to4x6gYhEKUBEYuQcoERLt6r6x219MH92X11CqmQEKc9gNSI2PkhMdolARGLlvB5QU5toJiGsPUJfg0D5AAzT/P/SkAaqBrmC641N+2y15SpjsASp+rxmgk+8v306ho8LosoQUufr+c+x/eg0NUFUion8UKgIj97sB/QO2i5BOPft0WwAAAABJRU5ErkJggg==') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
      .chained {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACz0lEQVR4Xu2b224CMQxE4f8/uu0DqmAXOB48yWbF9NWJL8cTJ1rU6yV/VgJXq7c4uwSoWQQB+gVAf8QalxLFUsncQAaoqChaHqBESLR/PdAugO1+dQzR/m5+kh7U5J857yZMQKgg2t/Nj+I/2AN0j6vFpLXZdCuTwkghtH95hboLIGDbpquAuv4l0UmLXyjy6IIJGNkpf4mRtDhAqTeXjz6O5Mi/4VpRKAGkttF+sq/uX342nb3g0fkHKEl+Y5cakiPPdIcD3aZgfXb8OVffmRVR3OdMgCj+23iVZNQAlDBpguJRQ1X/JAgpXoDun47U0ChUvGQOByodCTqPB9gJoFSf48hLAQ8ARiEDlAiJ9gAVgdHy6UC3CXWfRVTg0fZWfZUZGqBCiwN0DysKFQRUWTocqHVoVyqavMZaX+XIWwNOhlUJZ60vQM1ftwJ0AlAayl175RiOXNPN/+3+ZwodGnAkqaLvofUFKH8PpQ/QD/YAXQAonSw6UrR/tL2bn32GUsHdhMl/197NL0A3HQjQriRXB0odJruZj+yO8mvZc8svcMu3Oijryb+hm7/9Uuom5EekeezmLwOlnzwo/coHF/Ix057Pd2baARqgZgJmd9MVSjP1bDOT+kGX1tv9n8BoBaRqFrC36gvQfQcD1Kzq4UCtQ9tcvMOdtb7KkbcGdBAw+7DWF6ATfkamZxIJpNIk8jHTvpxCpV8FC6SsBT6JR5cOxc9/gYhf7AO0oPr7JVEoAFNn9nJARxdwNv8P/a4kTx2lE0f7yb66/wClDomXWIAeDZQe+vQOFfPfLT/af2Us/ictLb7toplH7zgVcICqxMRn0eyGSaKTFkehLJVPgNJMpah0hNWc3CNIjS/f8gRIPYIBCkQD9A5QS94vZiopOgolQmZ7V/HmdDR3DoVqEXl1gDIjaUWASrh4cYAyo+9ZseIMPTX9ADW3L0DNQH8BB0YQZM08hTUAAAAASUVORK5CYII=') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
      .jhonnyinnit76 {
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAjVJREFUeF7t3NFuwjAQRNHw/x/dqqgPxUK5mnoMjri8erPYJ+utE1XcjuP4OvzUBG6C1izviQTtegpa9hRU0LZAOZ89VNCyQDmdFSpoWaCczgoVtCxQTnfFCv2Z89nnre8mBLVC7093VmixEAQtYj5LNQJTD03jo+lfsYeOC0yB0nhBQUDQMtD2oOkE0z8qs/mpp0ZbmoIbPXR2weMcR4DZ/IIOwoKGPc8KpT4SVhj11PDrMHxpC2j0UFoBbVlBSdAKDYXCcCs0BKNHwcl005fPHsOiCazooa/uibRgQUkoHBc0BKPw7UFpS9MCCODV49Vz6X96qKAnt1zQ8n9wC7ohKPUgahGX7pnPDuEEQgd3ul7Q8PWboH/AGj1U0ElQ6nm7bXGaLxUEXf8w/p8KpS8QlITCcUFDMAoXlIQmx3cDpp5JL8RPOVb0UDq3Tt6f6csFnSZ8TCDop4Pu1jPH+5G+r6WK/vhzqKCLtzztKCsUbsDlKzRdQLkgMV1UgZRtxTmUDsa0xWjO7XFBy6KCfhroux89qWdXK/LZYpd+we9PGZWL6jSdoGVtQQWdE6BjFfVgqkB6dk/zR6tdcQ6lCQhKQuG4oCEYhQtKQsN4Gyz8+veGr+ihgpbvqaCC9gRWbPl0dvQ6b/WjcTrf03hBq5x7/AazFbrgpp6ldMuXwS+VboceeikwmqygJBSOCxqCUbigJBSOCxqCUbigJBSOCxqCUbigJBSOCxqCUbigJBSOCxqCUfg391/QAU6aT64AAAAASUVORK5CYII=') 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid; 
  }
  
.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"] {
    background: var(--menubghover);
    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:1200px;
        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);
    }
}