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

/* The following CSS applies on all screen sizes */

/* Colors and fonts */
:root {
    /* Fonts */
    --bodyfont: 'Special Gothic', sans-serif;
    --headerfont: 'Alagard', serif;
    --dropcapfont: 'Birchleaf', serif;
    
    /* Main colors - ACTUAL Dracula */
    --background: #020202;
    --color: #D3D3D3;
    --block: #020202;

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

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

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

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

    /* Menu colors */
    --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;

        /* Menu colors */
        --menubg: #e8e8e8;
        --menucolor: #4a4a4a;
        --menubghover: #d0d0d0;
        --menucolorhover: #1a1a1a;
    }
}

* { margin:0; padding:0; }

/* Main body styling */
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;
}

/* Styling for the menu */

#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);
}

/* Content styling */

main {
    margin-top:10px;
    background:var(--block);
    padding:15px;
    border: 2px dashed var(--link);
}

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);
    border-top: 2px dashed var(--link);
}

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

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

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

/* Coffins list styling */
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 button styling */
.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 - side by side */
.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;
  }
}

/* Page visibility routing - IMPORTANT */
.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);
}

/* The following CSS ONLY applies to mobile/small screens */

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

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

/* Skip to content button */

#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;
}

/* The following CSS ONLY applies to desktop/big screens */

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

    #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);
    }
}