/* =========================
   GLOBAL
========================= */

* {
    box-sizing: border-box;
}

body {
    background: #111 url();
    font-family: 'Crimson Text', verdana, arial;
    font-size: 12px;
    color: #C1C1C1;
    letter-spacing: 0.5px;
    line-height: 16px;
    margin: 0;
}

.blue-theme #theme-text {
    color: #4771C5;
    text-shadow:
        0 0 4px #4771C5,
        0 0 10px #4771C5,
        0 0 20px #4771C5;
}

p {
    margin: 0 0 1em 0;
}

h2 {
    margin: 0 0 1em 0;
    font-family: 'Crimson Text', verdana, arial;
    font-size: 16px;
    color: #C1C1C1;
    letter-spacing: 0.5px;
    line-height: 19px;
}

a:link,
a:visited,
a:active {
    font-weight: bold;
    color: #e44e53;
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
    color: #b41b1f;
    opacity: 1;
}

b {
    color: #aaa;
    font-weight: bold;
}

i {
    font-style: italic;
    color: #aaa;
}

u {
    color: #aaa;
    text-decoration: underline;
}

hr {
    border: none;
    border-top: 1px dashed #555555;
    margin: 10px 0;
}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar-thumb {
    background-color: #111;
    border-radius: 0px;
    border: 1px solid #666;
}

::-webkit-scrollbar {
    width: 7px;
    height: 0px;
    background: transparent;
}


/* =========================
   FONTS
========================= */

.jacquard-12-regular {
    font-family: "Jacquard 12", system-ui;
    font-weight: 400;
    font-style: normal;
}


/* =========================
   LAYOUT WRAPPER
========================= */

#layout {
    width: 940px;
    margin: 0 auto;
}


/* =========================
   HEADER
========================= */

#header1,
#menu1,
#footer1 {
    width: 100%;
}

#header2 {
    height: 180px;
    background: #111 url(https://porcelainpills.neocities.org/me/red.gif) no-repeat center;
}

#sitename a {
    font: 20px courier new;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 8px;
    background: #101010;
    border-radius: 30px;
    padding: 4px 20px;
}



/* =========================
  NAVIGATION
========================= */

#topnav {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    padding: 8px 0;
    margin-bottom: 0px;

    background: #111;
    border-bottom: 1px dashed #222;
}

/* BLOCK LINKS */
#topnav a {
    display: inline-block;
    padding: 4px 10px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ccc;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px #0f0f0f;

    transition: transform 0.15s ease,
                background 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* HOVER = "PRESSABLE BUTTON" FEEL */
#topnav a:hover {
    transform: translateY(-1px);
    background: #222;
    border-color: #e44e53;
    color: #e44e53;
}

/* ACTIVE CLICK FEEL */
#topnav a:active {
    transform: translateY(1px);
}


#menu2 {
    height: 20px;
    line-height: 20px;
    margin: 0 0 3px 0;
    padding: 1px;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#menu2 a {
    font: bold 12px monospace, georgia;
    text-transform: uppercase;
    padding: 4px;
    letter-spacing: 1px;
    color: #ccc;
    transition: color 0.3s ease, opacity 0.3s ease;
}

#menu2 a:hover {
    color: #ffffff;
}


/* =========================
   3 COLUMN STRUCTURE
========================= */

.main-columns {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}


/* LEFT SIDEBAR */

#left1 {
    flex: 0 1 220px;
    max-width: 220px;
}

#left2 {
    padding: 12px;
    background: #171717;
    border-right: 1px dashed #222;
    color: #c0c0c0;
}


/* CONTENT */

#content1 {
    flex: 0 0 500px;
    width: 500px;
}

#content2 {
    padding: 12px;
    background: #202020;
}

#content1 img {
    max-width: 100%;
}


/* RIGHT SIDEBAR */

#right1 {
    flex: 0 1 180px;
    max-width: 180px;
}

#right2 {
    padding: 12px;
    background: #171717;
    border-left: 1px dashed #222;
    color: #c0c0c0;
}


/* =========================
   IMAGE SIDEBAR
========================= */

.image-sidebar {
    margin-bottom: 10px;
}

.image-sidebar-img {
    float: left;
    width: 100%;
    max-width: 220px;
    margin: 8px 10px 10px 0;
}

.image-sidebar-img img {
    width: 100%;
    height: auto;
    display: block;
}

.image-sidebar-text h2 {
    margin-top: 0;
    font-size: 16px;
    color: #c0c0c0;
}

.image-sidebar-text p {
    margin: 8px 0;
    color: #c0c0c0;
}

a,
#header2,
.image-sidebar-img img {
    transition: all 0.5s ease;
}


/* =========================
   CONTENT BOXES
========================= */

.box {
    background: #2e2e2e;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.box2 {
    background: #2e2e2e;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    gap: 10px;
}

.box img {
    width: 50px;
    height: auto;
    flex-shrink: 0;
    border: 1px solid #3E3E3E;
}

.box p {
    margin: 0;
    color: #ccc;
}

.scrollbox {
    background: #111;
    height: 100px;
    overflow: auto;
    overflow-x: hidden;
    margin-top: 4px;
}

/* =========================
   SERIES BOX
========================= */

.series-box {
    background: #2e2e2e;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
}

/* spacing under description */
.series-box p {
    margin-top: 0px;
    margin-bottom: 5px;
}

/* individual fic entries */
.series-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding-top: 5px;
    padding-bottom: 2px;

    border-top: 1px dashed #3a3a3a;
}

/* first entry doesn't need divider */
.series-entry:first-of-type {
    border-top: none;
    padding-top: 2px;
}

/* thumbnails */
.series-entry img {
    width: 50px;
    height: auto;
    flex-shrink: 0;
    border: 1px solid #3E3E3E;
}

/* =========================
   TITLES
========================= */

.title {
    font-size: 18px;
    font-family: 'UnifrakturCook', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

.title2 {
    font-size: 18px;
    font-family: 'UnifrakturCook', serif;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    display: inline-flex;
    align-items: center;
}

.title2::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: 6px;
    background: url("https://porcelainpills.neocities.org/me/tiny%20red%20rose.png") no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

body.blue-theme .title2::after {
    background: url("https://porcelainpills.neocities.org/me/tiny%20blue%20rose.png") no-repeat center;
    background-size: contain;
}

body.blue-theme #topnav a {
    color: #fff;
    border-color: #2a3a5a;
}

body.blue-theme #topnav a:hover {
    background: #1b2433;
    color: #4771C5;
    border-color: #4771C5;
}



/* =========================
   MISC
========================= */

summary {
    cursor: pointer;
}

textarea {
    font: 10px calibri;
    letter-spacing: 1px;
    background: #333;
}

hr.sideleft {
    border-top: 1px dashed #222;
    border-bottom: none;
    margin: 10px 0;
}


/* =========================
   FOOTER
========================= */

.footer-main {
    width: 100%;
    background: transparent;
    padding: 10px;
    margin-top: 6px;
    border-top: 1px dashed #222;
}

.footer-credit {
    width: 100%;
    background: #111;
    text-align: center;
    font-size: 11px;
    padding: 6px 0;
    border-top: 1px solid #222;
}

.footer-credit a {
    color: #ccc;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 760px) {

    #layout {
        width: 100%;
        padding: 0 10px;
    }

    .main-columns {
        flex-direction: column;
        align-items: center;
    }

    #content1 {
        order: 1;
        width: 100%;
        max-width: 500px;
    }

    #left1 {
        order: 2;
        width: 100%;
        max-width: 500px;
    }

    #right1 {
        order: 3;
        width: 100%;
        max-width: 500px;
    }

    .image-sidebar-img {
        width: 35%;
        max-width: 180px;
    }
}
     


/* =========================
   BLUE THEME OVERRIDES
========================= */

body.blue-theme a {
    color: #4771C5;
}

body.blue-theme a:hover {
    color: #C1D1F4;
    opacity: 0.8;
}

body.blue-theme #header2 {
    background: #111 url(https://porcelainpills.neocities.org/me/blue.gif) no-repeat center;
}

body.blue-theme .image-sidebar-img img {
    content: url("https://porcelainpills.neocities.org/me/icon-blue.png");
}


/* =========================
   CYBER TOGGLE
========================= */

.cyber-toggle {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
    cursor: pointer;
    margin-bottom: 20px;
}

.cyber-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cyber-toggle span {
    position: absolute;
    inset: 0;
    background: #171717;
    border-radius: 50px;
    border: 2px solid #e44e53;
    box-shadow:
        0 0 8px rgba(228, 78, 83, 0.6),
        inset 0 0 6px rgba(0,0,0,0.8);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.cyber-toggle span::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    background: #e44e53;
    border-radius: 50%;
    box-shadow:
        0 0 10px rgba(228, 78, 83, 0.8),
        inset 0 0 4px rgba(255,255,255,0.3);
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.cyber-toggle input:checked + span {
    border-color: #4771C5;
    box-shadow:
        0 0 10px rgba(71, 113, 197, 0.8),
        inset 0 0 6px rgba(0,0,0,0.8);
}

.cyber-toggle input:checked + span::before {
    transform: translate(28px, -50%);
    background: #4771C5;
    box-shadow:
        0 0 12px rgba(71, 113, 197, 0.9),
        inset 0 0 4px rgba(255,255,255,0.3);
}


/* =========================
   PARAGRAPH NEON TEXT
========================= */

#theme-text {
    font-family: 'Crimson Text', monospace;
    font-size: 1rem;
    color: #e44e53;
    text-shadow:
        0 0 4px #e44e53,
        0 0 10px #e44e53,
        0 0 20px #e44e53;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#theme-text .text-blue {
    display: none;
}

.blue-theme #theme-text .text-red {
    display: none;
}

.blue-theme #theme-text .text-blue {
    display: inline;
}

@keyframes pulseRed {
    0%, 100% {
        text-shadow: 0 0 4px #e44e53, 0 0 10px #e44e53, 0 0 20px #e44e53;
    }
    50% {
        text-shadow: 0 0 6px #e44e53, 0 0 14px #e44e53, 0 0 28px #e44e53;
    }
}

@keyframes pulseBlue {
    0%, 100% {
        text-shadow: 0 0 4px #4771C5, 0 0 10px #4771C5, 0 0 20px #4771C5;
    }
    50% {
        text-shadow: 0 0 6px #4771C5, 0 0 14px #4771C5, 0 0 28px #4771C5;
    }
}