* {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: #800000;
}

::-webkit-scrollbar-thumb {
    background-color: red;
}

body {
    margin: 0 auto;
    background-image: url("img/background.png");
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    padding: 10px;
}

.blink {
    animation: blinker 1s linear infinite;
    color: red;
    font-weight: bold;
}

@keyframes blinker {
    50% {opacity: 0;}
}

@font-face {
    font-family: 'Octobre';
    src: url(/assets/fonts/Octobre-Regular.otf);
}

summary {
    list-style: none;
    font-size: larger;
    font-weight: bold;
}

/* --- CRT OVERLAY --- */

.crt-overlay {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 9999;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
}

/* --- CRT TOGGLE --- */
.crt-toggle-container{
    display: flex;
    align-items: center;
    color: red;
    font-weight: bold;
    margin-bottom: 20px;
    gap: 10px;
    justify-content: center;
}

/* HIDE CHECKBOX */
.crt-switch input{
    display:none;
}

/* SWITCH */
.crt-switch{
    position: relative;
    width: 50px;
    height: 24px;
}

/* SLIDER BACKGROUND */
.crt-slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background-color: black;
    border:2px solid red;
    border-radius:20px;
    transition:.2s;
    box-shadow:0 0 8px red;
}

/* HIDE CRT WHEN OFF */
.crt-off .crt-overlay {
    display: none;
}

/* CRT TOGGLE KNOB */
.crt-slider::before{
    content:"";
    position:absolute;
    height:16px;
    width:16px;
    left:3px;
    bottom:2px;
    background: red;
    border-radius:50%;
    transition:.2s;
    box-shadow:0 0 6px red;
}

/* ON */
.crt-switch input:checked + .crt-slider{
    background:#800000;
}

/* MOVE KNOB */
.crt-switch input:checked + .crt-slider::before{
    transform:translateX(24px);
}

/* --- GRID LAYOUT --- */
.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "left main right";
    grid-template-columns: 1.5fr 4fr 1.5fr;
    grid-template-rows: auto 1fr;
    width: 100%;
    max-width: 1200px;
    height: 95vh;
    margin: 10px auto;
    background-color: black;
    border: 6px solid black;
}

/* --- HEADER --- */
header {
    grid-area: header;
    background-color: #800000;
    text-align: center;
    padding: 1%;
    border-bottom: 6px solid black;
}

header h1 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 2.5em;
    color: red;
    text-shadow: 2px 2px black;
    margin: 5px 0;
}

/* --- MARQUEE --- */
.marquee {
    height: 22px;
    background-color: black;
    margin-bottom: 1%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-flex;
    width: max-content;
    animation: scroll 90s linear infinite;
    line-height: 22px;
    font-size: larger;
    color: red;
    font-family: monospace;
    font-weight: bold;
    margin: 0;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* --- NAVBAR --- */
.navbar {
    background: black;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.navbar a {
    font-family: 'Octobre';
    font-size: larger;
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 20px;
}

.navbar a:hover {
    background-color: #800000;
}

/* === MOBILE NAVBAR === */
.navbar-mobile {
    background: black;
    font-size: larger;
}

.navbar-mobile ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.navbar-mobile a {
    font-family: 'Octobre';
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 20px;
}

.navbar-mobile a:active {
    background-color: #800000;
}

.navbar summary {
    list-style: none;
    font-family: 'Octobre';
    font-size: larger;
    font-weight: bold;
}

.navbar-mobile {
    display: none;
}

/* DROPDOWN BUTTON https://www.w3schools.com/howto/howto_js_dropdown.asp */

    /* Dropdown Button */
.dropbtn {
    background-color: black;
    border: none;
    cursor: pointer;
    font-family: 'Octobre';
    font-size: larger;
    /* display: block; */
    color: white;
    font-weight: bold;
    padding: 20px;
}

/* Dropdown button on hover */
.dropbtn:hover {
  background-color: #800000;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  /* display: inline-block; */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  border: 1px solid red;
  min-width: 160px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 20px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #800000;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* https://www.w3schools.com/howto/howto_js_dropdown.asp */

/* MOBILE OTHER DROPDOWN */
/* I was too lazy to figure out how to get the mobile drop down menu to display properly so I just used my beloved <details> lol */

.mobile-dropdown {
    font-family: 'Octobre';
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    font-size: large;
}

/* --- LEFT SIDEBAR --- */
.sidebar-left {
    grid-area: left;
    background: black;
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
    text-align: center;
    overflow-y: scroll;
}

.sidebar-left img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

textarea {
    max-width: 100%;
    resize: none;
}

.map span {
    color: red;
    font-weight: bold;
    padding: 5px;
    border: 1px dashed red;
}

.map a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: white;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.map a:hover {
    background-color: #800000;
}

/* --- RIGHT SIDEBAR --- */
.sidebar-right {
    grid-area: right;
    background: black;
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
    text-align: center;
    overflow-y: scroll;
}

.sidebar-right img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.sidebar-right span {
    font-weight: bold;
    color: red;
    display: block;
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
}

/* --- MAIN CONTENT AREA --- */
main {
    grid-area: main;
    padding: 20px;
    overflow-y: scroll;
    min-height: 0;
    border-left: 1px solid #800000;
    border-right: 1px solid #800000;
    border-top: 1px dashed #800000;
    border-bottom: 1px dashed #800000;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .container {
        grid-template-areas:
        "header"
        "left"
        "main"
        "right";
        grid-template-columns: 1fr;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .marquee {
        display: none;
    }

    .navbar {
        display: none;
    }

    .navbar-mobile {
        display: block;
    }

    .sidebar-left {
        border-bottom: 1px solid #800000;
    }

    .sidebar-right {
        border-bottom: 1px solid #800000;
    }
}