/* Camera Obscura Classic - Website CSS
Created by Erik Northfell on 12/26/2023.
Last modified: 12/26/2023
------------------------------------ */

/* Font Family */
@font-face {font-family: 'League-Spartan';src: url('/assets/fonts/league-spartan/2.220/variable/WOFF2/LeagueSpartan-VF.woff2') format('woff2-variations');font-weight: 200 900;}

/* Basic Styles*/
html, body { color: #212121; background: url('/assets/images/background-tiles.png'); background-attachment: fixed; font-family: 'Kreon', serif; }
body { min-height: 100vh;font-size:18px; }
h1, h2, h3, h4, h5, h6 {font-family: 'UnifrakturCook', cursive; font-weight: bold; }
h3 {font-size:1.5rem;}
a, a:hover { color: #ff8471; text-decoration: underline; }
svg {fill: currentColor;}
h2.page-title { font-size: 4rem; }

/* Sidebar */
#camob-logo img {width:100%;height:auto;display:block;}
header#header { position: relative; }
header#header #header-inner { position: sticky; width: 100%; top: 0; left: 0; background: #212121;padding:1.5rem 1.5rem 0 1.5rem; }
header#header h2 { font-weight: 400; color: #fff; font-size: 1.2rem;margin:1rem 0; }
#logo-section #camob-logo { color: #fff; fill: #fff;width: 100%;height: auto; }
nav#main-nav { margin: 1rem 0 0 0; }
nav#main-nav ul { margin: 0 -1.5rem; padding: 0; }
nav#main-nav ul li { margin: 0; padding: 0; list-style: none; text-align: left; display: inline-block;width:calc(100% / 3); }
nav#main-nav a { text-align:center;font-size: 1.9rem; font-weight: 600; display: block; padding: 0.5rem 0.75rem; text-decoration: none; font-family: 'UnifrakturCook', cursive; color: #808080; background: #313131; }
nav#main-nav a.active, nav#main-nav a:hover { background: #414141; color: #fff; }
.striped-footer {height:1.5rem; margin-bottom:1.5rem;background: repeating-linear-gradient(-45deg,#212121,#212121 15px,#ffc107 15px,#ffc107 30px); }
.striped-footer.sidebar-striped-footer { height: 1rem; margin:0 -1.5rem -1.5rem -1.5rem; }
#socialmedia { display: block;text-align:center;padding: 1rem 0; }
#socialmedia a { font-size:1.75rem;margin-right: 1rem; display: inline-block; position: relative; color: #fff;  }
#socialmedia a:hover {color:#808080;}
.copyright {font-size:0.9rem;text-align: center; margin-top: 1rem; color: #999;padding: 0 0 0.5rem 0;}
.copyright a { text-decoration: none; color: #999; }
.copyright a:hover { text-decoration: underline; color: #ffc107; }
#header-inner .copyright, #header-inner .sidebar-striped-footer {display:none;}
@media (min-width: 768px) {
    nav#main-nav { margin: 1rem 0; }
    nav#main-nav ul li { width: 100%; display: block; }
    nav#main-nav a { font-size: 1.9rem; padding: 0.5rem 1.5rem; text-align: left; }
    header#header #header-inner { padding: 1.5rem 1.5rem 0.5rem 1.5rem; }
    #socialmedia { text-align:left;padding: 0; }
    #header-inner .copyright, #header-inner .sidebar-striped-footer {display:block;}
}

/* Main */
#main { padding: 1.5rem .5rem .5rem .5rem; background: #fff; }
@media (min-width: 768px) {
    #main { padding: 2rem; }
    #comic-single { margin:0; }
}

/* Comic Navigation */
.comic-nav-area {text-align: center;display: flex;justify-content: center;align-items: center;}
.comic-nav {font-size: 0;}
.comic-nav svg {color:#000;fill:#000;opacity:0.3;width:3.5rem;height:3.5rem;display:inline-block;}
.comic-nav a {display:inline-block;}
.comic-nav a svg {opacity:1;}
.comic-nav a:hover svg {color:#808080;fill:#808080;}
.comic-single-image {width:100%;height:auto;display:block;}
.navigation-dropdown {padding:0.5rem;background-color:#fcfcfc;border-radius:.5rem;border:2px solid #212121;}
.comic-nav-area.top {margin-bottom:1rem;}
.comic-nav-area.bottom {margin-top:1rem;}
.page-title {color:#242424;font-size:1rem;font-weight:bold;font-family: 'UnifrakturCook', cursive;}
@media (min-width: 768px) {
    .page-title {font-size:1.3rem;}
}

/* Comic Commentary */
#comic-commentary {margin-top:1.5rem;}
#comic-commentary h2 {font-size:1.75rem;}

/* Home */
#attract-mode {margin-bottom:2rem;}
#home-block {padding:1rem;background-color: #212121;}
#home-block img {width:100%;height:auto;}
#home-block #home-nav .column:hover .home-nav-img { border-color: #808080; }
#home-block #home-nav .column:hover h2 { color: #808080; }
#home-chapter-links { padding: 2rem; }
#home-block .home-chapter-link h2 {color:#fff;text-align: center;font-size:2rem;font-family: 'UnifrakturCook', cursive;}
#home-block .home-chapter-link img { border: 2px solid #fff; }

/* Archive */
#archive-chapters .column {text-align:center;}
#archive-chapters .column h2 {font-size:1.3rem;}
#archive-chapters .column h3 {font-size:1rem;font-weight:normal;}

/* Mobile Footer */
#mobile-footer {display:block;background-color:#212121;margin:0 -.5rem -.5rem -.5rem;padding-top:1rem;}
#mobile-footer .striped-footer.sidebar-striped-footer {margin: 0;}
@media (min-width: 768px) {
    #mobile-footer {display:none;}
}