/* ==========================================================
   BLUE OYSTER TRANSMISSION
   style.css
========================================================== */

/* =========================
   VARIABLES
========================= */

:root{

    --bg:#f7f4ed;
    --panel:#faf8f2;
    --text:#222;

    --border:#777;
    --borderSoft:#999;

    --link:#222;

    --background:url("background2.png");

}

body.dark{

    --bg:#2b2b2b;
    --panel:#343434;
    --text:#dddddd;

    --border:#666;
    --borderSoft:#666;

    --link:#ffffff;

    --background:url("background.png");

}

/* =========================
   RESET
========================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/* =========================
   BODY
========================= */

body{

    font-family:monospace;

    color:var(--text);

    background-image:var(--background);

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    line-height:1.7;

}

/* =========================
   CONTAINER
========================= */

.container{

    width:min(960px,95%);

    margin:45px auto;

    background:var(--bg);

    border:1px solid var(--borderSoft);

    padding:26px;

}

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

header{

    text-align:center;

}

.logo{

    font-size:34px;

    font-weight:bold;

    text-transform:lowercase;

    line-height:1.15;

}

.logo span{

    font-size:15px;

    color:#888;

}

body.dark .logo span{

    color:#aaa;

}

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

nav{

    display:flex;

    justify-content:center;

    gap:26px;

    padding:14px 0;

    margin:25px 0;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}

nav a{

    color:var(--link);

    text-decoration:none;

    font-weight:bold;

    letter-spacing:1px;

}

nav a:hover{

    text-decoration:underline;

}

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

main{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:22px;

}

.left{

    width:100%;

}

.right{

    width:100%;

}

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

.box{

    background:var(--panel);

    border:1px solid var(--border);

    padding:18px;

    margin-bottom:20px;

}

.box h2{

    margin-bottom:14px;

    padding-bottom:8px;

    border-bottom:1px dashed var(--borderSoft);

    font-size:18px;

}

.box p{

    margin-bottom:15px;

}

.box p:last-child{

    margin-bottom:0;

}

/* =========================
   LINKS
========================= */

a{

    color:inherit;

}

a:hover{

    text-decoration:underline;

}

/* =========================
   PRE
========================= */

pre{

    overflow-x:auto;

    white-space:pre-wrap;

    color:var(--text);

    margin-top:18px;

}

/* =========================
   IMAGES
========================= */

img{

    max-width:100%;

    height:auto;

}

.gif{

    width:100%;

    display:block;

    border:1px solid var(--border);

}

/* =========================
   HR
========================= */

hr{

    border:none;

    border-top:1px dashed var(--borderSoft);

    margin:22px 0;

}

/* =========================
   SCROLL BOXES
========================= */

.scrollBox{

    height:180px;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:8px;

    margin-top:8px;

    scrollbar-width:thin;

}

/* Chrome */

.scrollBox::-webkit-scrollbar{

    width:8px;

}

.scrollBox::-webkit-scrollbar-track{

    background:transparent;

}

.scrollBox::-webkit-scrollbar-thumb{

    background:#999;

}

body.dark .scrollBox::-webkit-scrollbar-thumb{

    background:#666;

}

/* =========================
   LATEST ENTRIES
========================= */

.scrollBox a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:8px 0;

    text-decoration:none;

    color:inherit;

    border-bottom:1px dashed var(--borderSoft);

    transition:.15s;

}

.scrollBox a:last-child{

    border-bottom:none;

}

.scrollBox a:hover{

    background:rgba(0,0,0,.04);

    padding-left:6px;

}

body.dark .scrollBox a:hover{

    background:rgba(255,255,255,.05);

}

.epDate{

    width:65px;

    flex-shrink:0;

    color:#888;

}

body.dark .epDate{

    color:#aaa;

}

/* Episode title */

.scrollBox a span:last-child{

    flex:1;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* =========================
   STATUS LOG
========================= */

.scrollBox p{

    padding:8px 0;

    margin:0;

    border-bottom:1px dashed var(--borderSoft);

}

.scrollBox p:last-child{

    border-bottom:none;

}

/* =========================
   CHAPTER TABLE
========================= */

.chapters{

    width:100%;

    border-collapse:collapse;

    margin-top:18px;

}

.chapters td{

    padding:12px 8px;

    border-bottom:1px dashed var(--borderSoft);

}

.chapters tr:first-child{

    font-weight:bold;

}

.chapters tr:hover{

    background:rgba(0,0,0,.03);

}

body.dark .chapters tr:hover{

    background:rgba(255,255,255,.04);

}

/* =========================
   EPISODE BUTTON
========================= */

.episodeButton{

    display:inline-block;

    padding:7px 14px;

    border:1px solid var(--border);

    text-decoration:none;

    color:inherit;

    font-weight:bold;

    transition:.2s;

}

.episodeButton:hover{

    background:#ece8df;

}

body.dark .episodeButton:hover{

    background:#444;

}

/* =========================
   SOCIAL LINKS
========================= */

.box a{

    color:inherit;

}

.box a:hover{

    text-decoration:underline;

}

/* =========================
   SMALL UTILITIES
========================= */

.center{

    text-align:center;

}

.rightAlign{

    text-align:right;

}

.muted{

    color:#888;

}

body.dark .muted{

    color:#aaa;

}

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

footer{

    margin-top:30px;

    padding-top:18px;

    border-top:1px solid var(--border);

    text-align:center;

    color:#777;

    font-size:14px;

}

body.dark footer{

    color:#aaa;

}

/* =========================
   SELECTION
========================= */

::selection{

    background:#cfc7b8;

    color:#000;

}

body.dark ::selection{

    background:#555;

    color:#fff;

}

/* =========================
   FOCUS
========================= */

a:focus{

    outline:1px dashed var(--border);

    outline-offset:3px;

}

/* =========================
   TRANSITIONS
========================= */

body,
.container,
.box,
nav,
footer,
a{

    transition:

        background .2s ease,

        color .2s ease,

        border-color .2s ease;

}

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

@media (max-width:900px){

    main{
        grid-template-columns:1fr;
    }

    .container{
        width:96%;
        margin:20px auto;
        padding:18px;
    }

    nav{
        flex-wrap:wrap;
        gap:18px;
    }

    .logo{
        font-size:30px;
    }

}   /* ← YOU ARE MISSING THIS */

@media (max-width:600px){

    .logo{
        font-size:24px;
    }

    nav{
        gap:12px;
        font-size:14px;
    }

    .box{
        padding:14px;
    }

    .scrollBox{
        height:160px;
    }

    .epDate{
        width:56px;
        font-size:12px;
    }

}

/* =========================
   EPISODE PAGE SUPPORT
   (doesn't override episode.css)
========================= */

.story{

    color:inherit;

}

.story img{

    max-width:100%;

}

.banner{

    width:100%;

}

.storyHeader{

    color:inherit;

}

.storyText{

    color:inherit;

}

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

body::-webkit-scrollbar{

    width:10px;

}

body::-webkit-scrollbar-thumb{

    background:#999;

}

body.dark::-webkit-scrollbar-thumb{

    background:#666;

}

/* =========================
   END
========================= */

.rssButton{

display:inline-block;

margin-top:20px;

padding:10px 18px;

border:1px solid currentColor;

text-decoration:none;

color:inherit;

font-family:monospace;

letter-spacing:1px;

transition:.2s;

}

.rssButton:hover{

background:currentColor;

color:black;

}