/* ============================================ */
/* THEMES PANEL (APPLIES TO ALL PAGES) */
/* ============================================ */

@font-face {
  font-family: 'Fixedsys Excelsior';
  src: url('FONTS/fixedsysexcelsior.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.themes-panel {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9998; /* One below accessibility panel */
  background: #000000;
  border: 2px solid #ff0000;
  padding: 10px;
  font-family: 'Fixedsys Excelsior', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #ff0000;
  width: 220px;
  max-width: 220px;
  transition: top 0.3s ease;
}

/* when accessibility panel is NOT collapsed, move themes panel down */
body:not(.accessibility-collapsed) .themes-panel {
  top: 270px;
}

/* when accessibility panel IS collapsed, keep themes panel at top */
body.accessibility-collapsed .themes-panel {
  top: 85px;
}

/* =========================== */
/* SMALLER SCREEN BREAKPOINT */
/*==============================*/

@media (max-width: 1250px) { 
  .themes-panel {
    top: auto;
    bottom: 20px;
    left: 20px;
    transition: bottom 0.3s ease;
  }
  
  /* When accessibility panel is NOT collapsed, move themes panel up */
  body:not(.accessibility-collapsed) .themes-panel {
    bottom: 270px;
    top: auto;
  }
  
  /* When accessibility panel IS collapsed, keep themes panel at bottom */
  body.accessibility-collapsed .themes-panel {
    bottom: 85px;
    top: auto;
  }
}
/*======================*/
/*=====================*/

.themes-panel-header {
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  border-bottom: 1px solid #ff0000;
  padding-bottom: 5px;
  font-size: 14px;
}

.themes-warning {
  font-size: 9px;
  text-align: center;
  margin-bottom: 8px;
  padding: 5px;
  border: 1px solid #ff0000;
  background: rgba(255, 0, 0, 0.1);
  line-height: 1.3;
  font-weight: bold;
}

.theme-option {
  cursor: pointer;
  user-select: none;
  padding: 3px 5px;
  margin: 2px 0;
  display: flex;
  align-items: center;
  transition: all 0.1s ease;
}

.theme-option:hover {
  color: #000000;
  background: #ff0000;
}

.theme-checkbox {
  display: inline-block;
  width: 3ch;
  margin-right: 5px;
  flex-shrink: 0;
}

.theme-label {
  flex: 1;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.themes-collapse-btn {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #000000;
  border: 2px solid #ff0000;
  color: #ff0000;
  cursor: pointer;
  padding: 2px 8px;
  font-family: 'Fixedsys Excelsior', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1;
  user-select: none;
  transition: all 0.1s ease;
}

.themes-collapse-btn:hover {
  background: #ff0000;
  color: #000000;
}

/* Collapsed state */
.themes-panel.collapsed .theme-option,
.themes-panel.collapsed .themes-warning {
  display: none;
}

/* ==================================*/
/* THEMES HIGH CONTRAST */
/*===================================*/

body.high-contrast .themes-panel {
  border-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

body.high-contrast .themes-panel-header {
  border-bottom-color: #ffffff;
}

body.high-contrast .themes-warning {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

body.high-contrast .theme-option:hover {
  color: #000000 !important;
  background: #ffffff !important;
}

body.high-contrast .theme-option:hover .theme-checkbox,
body.high-contrast .theme-option:hover .theme-label {
  color: #000000 !important;
}

body.high-contrast .themes-collapse-btn {
  border-color: #ffffff;
  color: #ffffff;
}

body.high-contrast .themes-collapse-btn:hover {
  background: #ffffff;
  color: #000000;
}


/*===========================================*/
/*===========================================*/
/* ========== MAINFRAME ====================*/
/*==========================================*/
/*=========================================*/


/* accessibility panel mainframe styles */

body.theme-mainframe .accessibility-panel {
  border-color: #20C20E;
  box-shadow: 0 0 10px rgba(32, 194, 14, 0.3);
  color: #20C20E;
}

body.theme-mainframe .accessibility-panel-header {
  border-bottom-color: #20C20E;
}

body.theme-mainframe .accessibility-option:hover {
  color: #000000 !important;
  background: #20C20E !important;
}

body.theme-mainframe .accessibility-option:hover .accessibility-checkbox,
body.theme-mainframe .accessibility-option:hover .accessibility-label {
  color: #000000 !important;
}

body.theme-mainframe .accessibility-collapse-btn {
  border-color: #20C20E;
  color: #20C20E;
}

body.theme-mainframe .accessibility-collapse-btn:hover {
  background: #20C20E;
  color: #000000;
}

/* high contrast styles for accessibility panel -- always override themes */
body.high-contrast.theme-mainframe .accessibility-panel {
  border-color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

body.high-contrast.theme-mainframe .accessibility-panel-header {
  border-bottom-color: #ffffff !important;
}

body.high-contrast.theme-mainframe .accessibility-option:hover {
  color: #000000 !important;
  background: #ffffff !important;
}

body.high-contrast.theme-mainframe .accessibility-option:hover .accessibility-checkbox,
body.high-contrast.theme-mainframe .accessibility-option:hover .accessibility-label {
  color: #000000 !important;
}

body.high-contrast.theme-mainframe .accessibility-collapse-btn {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.high-contrast.theme-mainframe .accessibility-collapse-btn:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* MAINFRAME themes panel */
body.theme-mainframe .themes-panel {
  border-color: #20C20E;
  color: #20C20E;
}

body.theme-mainframe .themes-panel-header {
  border-bottom-color: #20C20E;
}

body.theme-mainframe .themes-warning {
  border-color: #20C20E;
  background: rgba(32, 194, 14, 0.1);
}

body.theme-mainframe .theme-option:hover {
  color: #000000 !important;
  background: #20C20E !important;
}

body.theme-mainframe .theme-option:hover .theme-checkbox,
body.theme-mainframe .theme-option:hover .theme-label {
  color: #000000 !important;
}

body.theme-mainframe .themes-collapse-btn {
  border-color: #20C20E;
  color: #20C20E;
}

body.theme-mainframe .themes-collapse-btn:hover {
  background: #20C20E;
  color: #000000;
}

/* ============================================ */
/* MAINFRAME THEME - GLOBAL STYLES */
/* ============================================ */

/* Navigation */
body.theme-mainframe nav a {
  color: #20C20E !important;
  border-color: #20C20E;
}

body.theme-mainframe nav a:visited {
  color: #20C20E !important;
}

/* Nav hover with glow - green */
@keyframes pulseGlowGreen {
  0%, 100% {
    filter: drop-shadow(0 0 3px #20C20E) drop-shadow(0 0 6px #20C20E);
  }
  50% {
    filter: drop-shadow(0 0 6px #20C20E) drop-shadow(0 0 12px #20C20E);
  }
}

body.theme-mainframe nav a:hover {
  animation: pulseGlowGreen 2s ease-in-out infinite alternate;
}

body.theme-mainframe nav a.active {
  animation: pulseGlowGreen 3s ease-in-out infinite alternate;
}

/* NAVGLITCH */

nav a.active.glitch {
    animation:
        navShake 0.5s ease-in-out,
        pulseGlow 3s ease-in-out infinite alternate;
}

nav a.active.glitch::before {
    animation: navTearLeft 0.5s ease-in-out;
    color: #ff00ff;
    z-index: 1;
}

nav a.active.glitch::after {
    animation: navTearRight 0.5s ease-in-out;
    color: #00ffff;
    z-index: 2;
}

@keyframes navShake {
    0%,
    100% {
        transform: translateY(-2px) translate(0, 0);
    }
    10% {
        transform: translateY(-2px) translate(-2px, 0);
    }
    20% {
        transform: translateY(-2px) translate(2px, 0);
    }
    30% {
        transform: translateY(-2px) translate(-1px, 0);
    }
    40% {
        transform: translateY(-2px) translate(3px, 0);
    }
    50% {
        transform: translateY(-2px) translate(-2px, 0);
    }
    60% {
        transform: translateY(-2px) translate(1px, 0);
    }
    70% {
        transform: translateY(-2px) translate(-3px, 0);
    }
    80% {
        transform: translateY(-2px) translate(2px, 0);
    }
    90% {
        transform: translateY(-2px) translate(-1px, 0);
    }
}

@keyframes navTearLeft {
    0%,
    100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
    5% {
        opacity: 0.8;
        clip-path: inset(23% 0 67% 0);
        transform: translateX(-8px);
    }
    15% {
        opacity: 0.7;
        clip-path: inset(61% 0 12% 0);
        transform: translateX(-5px);
    }
    25% {
        opacity: 0.9;
        clip-path: inset(8% 0 88% 0);
        transform: translateX(-10px);
    }
    35% {
        opacity: 0.6;
        clip-path: inset(47% 0 31% 0);
        transform: translateX(-6px);
    }
    45% {
        opacity: 0.8;
        clip-path: inset(72% 0 15% 0);
        transform: translateX(-9px);
    }
    55% {
        opacity: 0.7;
        clip-path: inset(19% 0 73% 0);
        transform: translateX(-7px);
    }
    65% {
        opacity: 0.9;
        clip-path: inset(54% 0 28% 0);
        transform: translateX(-11px);
    }
    75% {
        opacity: 0.6;
        clip-path: inset(33% 0 59% 0);
        transform: translateX(-5px);
    }
    85% {
        opacity: 0.8;
        clip-path: inset(68% 0 7% 0);
        transform: translateX(-8px);
    }
    95% {
        opacity: 0.5;
        clip-path: inset(11% 0 81% 0);
        transform: translateX(-4px);
    }
}

@keyframes navTearRight {
    0%,
    100% {
        opacity: 0;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
    8% {
        opacity: 0.7;
        clip-path: inset(41% 0 48% 0);
        transform: translateX(7px);
    }
    18% {
        opacity: 0.9;
        clip-path: inset(77% 0 9% 0);
        transform: translateX(9px);
    }
    28% {
        opacity: 0.6;
        clip-path: inset(14% 0 79% 0);
        transform: translateX(5px);
    }
    38% {
        opacity: 0.8;
        clip-path: inset(52% 0 36% 0);
        transform: translateX(11px);
    }
    48% {
        opacity: 0.7;
        clip-path: inset(29% 0 64% 0);
        transform: translateX(6px);
    }
    58% {
        opacity: 0.9;
        clip-path: inset(66% 0 18% 0);
        transform: translateX(10px);
    }
    68% {
        opacity: 0.6;
        clip-path: inset(7% 0 86% 0);
        transform: translateX(8px);
    }
    78% {
        opacity: 0.8;
        clip-path: inset(44% 0 42% 0);
        transform: translateX(7px);
    }
    88% {
        opacity: 0.7;
        clip-path: inset(81% 0 3% 0);
        transform: translateX(9px);
    }
    98% {
        opacity: 0.5;
        clip-path: inset(26% 0 68% 0);
        transform: translateX(4px);
    }
}

body.theme-mainframe nav a.active.glitch {
    position: relative !important;
    animation:
        navShake 0.5s ease-in-out,
        pulseGlowGreen 3s ease-in-out infinite alternate !important;
}

/* nav buttons force font */
body.theme-mainframe.page-homepage nav,
body.theme-mainframe.page-homepage nav a,
body.theme-mainframe.page-homepage nav button {
    font-family: 'Fixedsys Excelsior', 'Courier New', monospace !important;
}

/* external link icon - green */
body.theme-mainframe a[href^="http"]::after {
  content: url("IMAGES/external_green.png");
}

/* ============================================ */
/* MAINFRAME THEME - HOMEPAGE SPECIFIC */
/* ============================================ */

/* GRID BACKGROUND ANIMATION */

body.theme-mainframe.page-homepage {
    position: relative;
    height: 100vh;
    margin: 0;
    padding: 30px;
    background: linear-gradient(#000000 25%, #20c20e 50%, #20c20e 50%, #000000 100%);
    background-attachment: fixed;
    font-family: "Fixedsys Excelsior", "Courier New", monospace;
    color: #20C20E;
}

body.theme-mainframe.page-homepage .wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 auto;
    perspective: 360px;
    perspective-origin: 50% 50%;
    pointer-events: none;
    z-index: 0;
}

body.theme-mainframe.page-homepage .top-plane {
    width: 200%;
    height: 130%;
    position: absolute;
    bottom: -30%;
    left: -50%;
    background-image: linear-gradient(#20c20e 2px, transparent 2px),
        linear-gradient(to right, #20c20e 2px, transparent 2px);
    background-size:
        100px 100px,
        100px 100px;
    background-position:
        -1px -1px,
        -1px -1px;
    transform: rotateX(85deg);
    animation: planeMoveTop 2s infinite linear;
}

body.theme-mainframe.page-homepage .bottom-plane {
    width: 200%;
    height: 130%;
    position: absolute;
    top: -30%;
    left: -50%;
    background-image: linear-gradient(#20c20e 2px, transparent 2px),
        linear-gradient(to right, #20c20e 2px, transparent 2px);
    background-size:
        100px 100px,
        100px 100px;
    background-position:
        -1px -1px,
        -1px -1px;
    transform: rotateX(-85deg);
    animation: planeMoveBot 2s infinite linear;
}
/*================================*/

/* BODY */

body.theme-mainframe.page-homepage header h1 {
    font-family: 'Fixedsys Excelsior';
    font-size: 2em;
    letter-spacing: 2px;
    margin-bottom: 5px;
}
body.theme-mainframe.page-homepage h1,
body.theme-mainframe.page-homepage h2,
body.theme-mainframe.page-homepage h3,
body.theme-mainframe.page-homepage h4,
body.theme-mainframe.page-homepage h5 {
    font-family: 'Fixedsys Excelsior';
    margin: 0;
    padding: 0;
}

body.theme-mainframe.page-homepage p {
  font-family: 'Fixedsys Excelsior';
    margin: 0;
    padding: 0;
    font-size: small;
}

/* MAINCONTAINER */
body.theme-mainframe .maincontainer {
  border-color: #20C20E;
  box-shadow: 0 0 20px #20C20E;
}

/* HEADER + MARQUEE */
body.theme-mainframe header marquee,
body.theme-mainframe footer marquee {
  border-color: #20C20E;
  color: #20C20E;
  font-family: "Fixedsys Excelsior";
}

/* SMALL BOX BORDERS */
body.theme-mainframe.page-homepage .multibox,
body.theme-mainframe.page-homepage .linksbox,
body.theme-mainframe.page-homepage .sillybox,
body.theme-mainframe.page-homepage .nextbox,
body.theme-mainframe.page-homepage .patreonbox,
body.theme-mainframe.page-homepage .performancebox,
body.theme-mainframe.page-homepage .recentblogbox {
  border-color: #20C20E;
}

/* INTROBOX */
body.theme-mainframe.page-homepage .introbox {
  background: rgba(32, 194, 14, 0.2) !important;
  scrollbar-color: #20C20E black;
}

body.theme-mainframe.page-homepage .introbox::-webkit-scrollbar-track {
  border-color: #20C20E;
}

body.theme-mainframe.page-homepage .introbox::-webkit-scrollbar-thumb {
  border-color: #20C20E !important;
}

@keyframes scrollbarGlowGreen {
  0%, 100% {
    box-shadow: 0 0 3px #20C20E, 0 0 6px #20C20E;
  }
  50% {
    box-shadow: 0 0 6px #20C20E, 0 0 12px #20C20E;
  }
}

body.theme-mainframe.page-homepage .introbox::-webkit-scrollbar-thumb:hover {
  animation: scrollbarGlowGreen 2s ease-in-out infinite alternate;
}

/* MULTIBOX */
body.theme-mainframe.page-homepage .multibox {
    border-image: url(BORDERS_AND_ASSETS/desktopbordergreen.png) 30 14 12 15 fill / 30px 14px 12px 15px;
    padding: 30px 14px 12px 15px;
}

/* profile pic */
body.theme-mainframe.page-homepage .profilepic {
  border-color: #20C20E;
}

body.theme-mainframe.page-homepage .profilepic-link:hover .profilepic {
  border-color: #20C20E;
  box-shadow: 0 0 3px #20C20E, 0 0 6px #20C20E;
}

/* photo credit */
body.theme-mainframe.page-homepage .photo-credit a {
  color: #20C20E;
}

/* LINKS COLORS */
body.theme-mainframe.page-homepage .nextbox a:link,
body.theme-mainframe.page-homepage .performancebox a:link,
body.theme-mainframe.page-homepage .recentblogbox a:link {
  color: #ff00ff;
}

body.theme-mainframe.page-homepage .nextbox a:visited,
body.theme-mainframe.page-homepage .performancebox a:visited,
body.theme-mainframe.page-homepage .recentblogbox a:visited {
  color: #006644;
}

/* RECENTBLOGBOX */

body.theme-mainframe.page-homepage .recentblogbox {
    border-image: url(BORDERS_AND_ASSETS/desktopbordergreen.png) 30 14 12 15 fill / 30px 14px 12px 15px;
    padding: 30px 14px 12px 15px;
    background-image: url(IMAGES//starstwinkle.gif);
    background-repeat: repeat;
    background-size: auto;
}

body.theme-mainframe.page-homepage .recentblogbox .mini-post {
  border-color: #20C20E;
}

body.theme-mainframe.page-homepage .recentblogbox .mini-post:hover {
  box-shadow: 0 0 8px rgba(32, 194, 14, 0.3);
}

/* NEIGHBORSBOX */
body.theme-mainframe.page-homepage .neighborsbox h5 {
  background: rgba(32, 194, 14, 0.2);
}

/* TODOBOX */
body.theme-mainframe.page-homepage .todobox {
    border-image: url(BORDERS_AND_ASSETS/desktopbordergreen.png) 30 14 12 15 fill / 30px 14px 12px 15px;
    padding: 30px 14px 12px 15px;
    background: transparent;
    display: flex;
    flex-direction: column;
    max-height: 450px;
}

body.theme-mainframe.page-homepage .todobox h4 {
    margin-top: 0;
    margin-bottom: 10px;
    flex-shrink: 0;
}

body.theme-mainframe.page-homepage .todobox ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;

    scrollbar-width: thin;
    scrollbar-color: #20C20E black;
}

body.theme-mainframe.page-homepage .todobox ul::-webkit-scrollbar {
    width: 12px;
    background: black;
}

body.theme-mainframe.page-homepage .todobox ul::-webkit-scrollbar-track {
    background: black !important;
    border: 1px solid #20c20e;
}

body.theme-mainframe.page-homepage .todobox ul::-webkit-scrollbar-thumb {
    background: black !important;
    border: 2px solid #20c20e !important;
    transition: all 0.2s ease-in-out;
}

body.theme-mainframe.page-homepage .todobox ul::-webkit-scrollbar-thumb:hover {
    background: black !important;
    border: 2px solid #20c20e !important;
    animation: scrollbarGlowGreen 2s ease-in-out infinite alternate;
}

body.theme-mainframe.page-homepage .todobox li {
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: small;
    font-family: "Fixedsys Excelsior", monospace;
}

body.theme-mainframe.page-homepage .todobox li:last-child {
    margin-bottom: 0;
}

/* LINKSBOX */
body.theme-mainframe.page-homepage .linksbox a {
  color: #20C20E;
}

body.theme-mainframe.page-homepage .linksbox a:hover {
  text-decoration-color: #20C20E;
}

/* Linksbox glitch effect */
body.theme-mainframe.page-homepage .linksbox.glitch::before {
  border-color: #ff00ff;
}

body.theme-mainframe.page-homepage .linksbox.glitch::after {
  border-color: #00ffff;
}

/* SILLYBOX */
body.theme-mainframe.page-homepage .sillybox {
    border-image: url(BORDERS_AND_ASSETS/desktopbordergreen.png) 30 14 12 15 fill / 30px 14px 12px 15px;
    padding: 30px 14px 12px 15px;
}


/* MUSIC PLAYER */
body.theme-mainframe.page-homepage .player {
  border-color: #20C20E;
  background: linear-gradient(0deg, rgba(0, 20, 0, 1) 0%, rgba(0, 40, 0, 1) 30%, rgba(0, 60, 0, 1) 100%) !important;
  box-shadow: 1px 1px 10px 0 rgba(32, 194, 14, 0.27) inset !important;
}

body.theme-mainframe.page-homepage .window {
    font-family: "Fixedsys Excelsior", "Courier New", monospace !important;
    font-size: 11px !important;
    padding: 10px !important;
    width: 290px !important;
}

body.theme-mainframe.page-homepage .wheel {
  background: linear-gradient(#000a00, #000a00) padding-box,
    linear-gradient(to top, #20C20E, #0a5a00) border-box !important;
  box-shadow: 1px 1px 10px 0 rgba(32, 194, 14, 0.27) inset !important;
}

body.theme-mainframe.page-homepage #musicplayer {
  background: linear-gradient(0deg, #001a00, #000a00) padding-box,
    linear-gradient(to top, #20C20E, #0a5a00) border-box !important;
  box-shadow: 1px 1px 10px 0 rgba(32, 194, 14, 0.27) inset !important;
}

body.theme-mainframe.page-homepage .current-time,
body.theme-mainframe.page-homepage .total-duration,
body.theme-mainframe.page-homepage .wheelcontrols,
body.theme-mainframe.page-homepage .wheelcontrols button,
body.theme-mainframe.page-homepage .player button,
body.theme-mainframe.page-homepage .controls button {
  color: #44ff44 !important;
}

body.theme-mainframe.page-homepage .songtitle {
    color: #44ff44!important;
    display: block !important;
    font-family: "Fixedsys Excelsior", "Courier New", monospace !important;
    margin: 0 !important;
}

body.theme-mainframe.page-homepage .seek_slider {
  background: #002a00 !important;
}

body.theme-mainframe.page-homepage .seek_slider::-webkit-slider-thumb {
  background: #20C20E !important;
  border-color: #20C20E !important;
}

body.theme-mainframe.page-homepage .seek_slider::-moz-range-thumb {
  background: #20C20E !important;
  border-color: #20C20E !important;
}

/* ============================================ */
/* HOMEPAGE MAINFRAME MOBILE RESPONSIVE STYLES */
/* ============================================ */
@media (max-width: 870px) { 
  
  /* HAMBURGER MENU BUTTON */
  body.theme-mainframe .mobile-nav-toggle {
    background: black;
    border: 2px solid #20c20e;
  }
  
  body.theme-mainframe .mobile-nav-toggle span {
    background: #20c20e;
  }
  
  /* adjust nav height */
  body.theme-mainframe nav {
    top: 100px !important; 
  }
  
  /* Disable nav glitch effects on mobile */
  body.theme-mainframe nav a.active.glitch {
    animation: none !important;
  }
  
  body.theme-mainframe nav a.active.glitch::before,
  body.theme-mainframe nav a.active.glitch::after {
    display: none !important;
  }
  
  /* Remove transform effects that interfere with mobile nav */
  body.theme-mainframe nav a:hover,
  body.theme-mainframe nav a.active {
    transform: none !important;
    animation: none !important;
  }
  
  /* Mobile nav dropdown */
  body.theme-mainframe nav {
    border: 2px solid #20c20e;
  }

  /* Mobile nav links */
  body.theme-mainframe nav a {
    border-bottom: 1px solid #20c20e;
  }
  
  body.theme-mainframe nav a:hover,
  body.theme-mainframe nav a.active {
    background: rgba(32, 194, 14, 0.1) !important;
  }
  
  /* PROFILEPIC */
 body.theme-mainframe.page-homepage .profilepic-mobile {
        width: 100%;
        max-width: 300px;
        aspect-ratio: 1 / 1;
        border: 2px solid #20c20e;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
  
 body.theme-mainframe.page-homepage .profilepic-link-mobile:hover .profilepic-mobile {
        box-shadow: 0 0 5px #20c20e;
    }
  
 body.theme-mainframe.page-homepage .photo-credit-mobile a {
        color: #20c20e;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        position: static;
        line-height: 1;
    }
  
  /* INTROBOX */
  body.theme-mainframe.page-homepage .introbox-mobile {
        display: block !important;
        background: rgba(32, 194, 14, 0.1) !important;
        padding: 15px;
        font-family: "Fixedsys Excelsior", monospace;
        line-height: 1.6;
        font-size: 1rem;
        max-height: 400px;
        overflow-y: auto;
        order: 2;
        border: none;

        scrollbar-width: thin;
        scrollbar-color: #20c20e black;
    }
  
  body.theme-mainframe.page-homepage .introbox-mobile::-webkit-scrollbar {
        width: 8px;
        background: black;
    }

   body.theme-mainframe.page-homepage .introbox-mobile::-webkit-scrollbar-track {
        background: black;
        border: 1px solid #20c20e;
    }

    body.theme-mainframe.page-homepage .introbox-mobile::-webkit-scrollbar-thumb {
        background: black;
        border: 1px solid #20c20e;
    }
  
  /* NEXTBOX */
  body.theme-mainframe.page-homepage .nextbox-mobile {
        display: block !important;
        border: 2px solid #20c20e;
        padding: 10px;
        order: 3;
        margin-top: 45px;
    }
  
  body.theme-mainframe.page-homepage .nextbox-mobile a:link {
        color: #ff00ff;
        text-decoration: none;
    }

    body.theme-mainframe.page-homepage .nextbox-mobile a:visited {
        color: #006644;
        text-decoration: none;
    }
  
  /* PERFORMANCEBOX */
  body.theme-mainframe.page-homepage .performancebox-mobile {
        display: block !important;
        border: 2px solid #20c20e;
        padding: 10px;
        order: 4;
        min-height: 80px;
        margin-bottom: 45px;
    }

 body.theme-mainframe.page-homepage .performancebox-mobile a:link {
        color: #ff00ff;
        text-decoration: none;
    }

   body.theme-mainframe.page-homepage .performancebox-mobile a:visited {
        color: #006644;
        text-decoration: none;
    }
  
  /* RECENTBLOGBOX */
 body.theme-mainframe.page-homepage .recentblogbox-mobile {
        display: block !important;
        border: 2px solid #20c20e;
        padding: 10px;
        background-image: url(IMAGES/starstwinkle.gif);
        background-repeat: repeat;
        background-size: auto;
        min-height: 400px;
        flex-direction: column;
        order: 5;
    }
  
   body.theme-mainframe.page-homepage .recentblogbox-mobile .mini-post {
        margin: 6px 0;
        padding: 6px;
        border: 1px solid #20c20e;
        border-radius: 6px;
        background: black;
        font-size: 0.8em;
        display: block;
        width: 95%;
        color: #20c20e;
    }

    body.theme-mainframe.page-homepage .recentblogbox-mobile .mini-post:hover {
        background: black;
        box-shadow: 0 0 5px rgba(32, 194, 14, 0.3);
    }
  
  body.theme-mainframe.page-homepage .recentblogbox-mobile a:link {
        color: #20c20e;
    }

    body.theme-mainframe.page-homepage .recentblogbox-mobile a:visited {
        color: #20c20e;
    }
  
  /* PATREONBOX */
  body.theme-mainframe.page-homepage .patreonbox-mobile {
        display: block !important;
        border: 2px solid #20c20e;
        padding: 10px;
        min-height: 80px;
        order: 6;
    }
  
  /* TODOBOX */
  body.theme-mainframe.page-homepage .todobox-mobile {
        display: block !important;
        border: 2px solid #20c20e;
        padding: 10px;
        max-height: 311px;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: #20c20e black;
        grid-column: 1;
    }
  
  body.theme-mainframe.page-homepage .todobox-mobile::-webkit-scrollbar-track {
        background: black;
        border: 1px solid #20c20e;
    }

    body.theme-mainframe.page-homepage .todobox-mobile::-webkit-scrollbar-thumb {
        background: black;
        border: 1px solid #20c20e;
    }
  
  body.theme-mainframe.page-homepage .todobox-mobile li {
        margin-bottom: 5px;
        line-height: 1.3;
        font-family: "Fixedsys Excelsior", monospace;
        font-size: 1rem;
    }

   body.theme-mainframe.page-homepage .linksbox-mobile {
        border: 2px solid #20c20e;
        padding: 10px;
        text-align: left;
        min-height: 200px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        grid-column: 2;
    }
  
  /* LINKSBOX */
  body.theme-mainframe.page-homepage .linksbox-mobile a:link {
        color: #20c20e;
    }

   body.theme-mainframe.page-homepage .linksbox-mobile a:visited {
        color: #20c20e;
    }
  
  /* NEIGHBORSBOX */
  body.theme-mainframe.page-homepage .neighborsbox-mobile h5 {
        margin: 10px 0 5px 0;
        font-size: 1em;
        background: rgba(32, 194, 14, 0.2);
        padding: 5px;
    }
  
  /* BLINKIESBOX */
  body.theme-mainframe.page-homepage .blinkiesbox-mobile {
        display: flex !important;
        flex-wrap: wrap;
        gap: 2px;
        justify-content: center;
        border: none;
        padding: 10px;
        order: 9;
        border-top: 2px dashed #20c20e;
    }
}

/* ============================================ */
/* MAINFRAME THEME - SCHEDULE PAGE SPECIFIC */
/* ============================================ */

/* GRID BACKGROUND ANIMATION */

body.theme-mainframe.page-schedule {
    position: relative;
    height: 100vh;
    margin: 0;
    padding: 30px;
    background: linear-gradient(#000000 25%, #20c20e 50%, #20c20e 50%, #000000 100%);
    background-attachment: fixed;
    font-family: "Fixedsys Excelsior", "Courier New", monospace;
    color: #20C20E;
}

body.theme-mainframe.page-schedule .wrap {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 auto;
    perspective: 360px;
    perspective-origin: 50% 50%;
    pointer-events: none;
    z-index: 0;
}

body.theme-mainframe.page-schedule .top-plane {
    width: 200%;
    height: 130%;
    position: absolute;
    bottom: -30%;
    left: -50%;
    background-image: linear-gradient(#20c20e 2px, transparent 2px),
        linear-gradient(to right, #20c20e 2px, transparent 2px);
    background-size:
        100px 100px,
        100px 100px;
    background-position:
        -1px -1px,
        -1px -1px;
    transform: rotateX(85deg);
    animation: planeMoveTop 2s infinite linear;
}

body.theme-mainframe.page-schedule .bottom-plane {
    width: 200%;
    height: 130%;
    position: absolute;
    top: -30%;
    left: -50%;
    background-image: linear-gradient(#20c20e 2px, transparent 2px),
        linear-gradient(to right, #20c20e 2px, transparent 2px);
    background-size:
        100px 100px,
        100px 100px;
    background-position:
        -1px -1px,
        -1px -1px;
    transform: rotateX(-85deg);
    animation: planeMoveBot 2s infinite linear;
}

/* ============================================ */
/* MAINFRAME THEME - BLOG PAGE SPECIFIC */
/* ============================================ */

/* Add blog-specific styles here when ready */
/* Example: */
/* body.theme-mainframe.page-blog .blog-post-card { ... } */

/* ============================================ */
/* MAINFRAME THEME - ABOUT PAGE SPECIFIC */
/* ============================================ */

/* Add about-specific styles here when ready */

/* ============================================ */
/* MAINFRAME THEME - CONNECT PAGES */
/* ============================================ */

/* Connect contrast page - NO THEMING (always stays high contrast) */

/* Add other connect page styles here when ready */
/* body.theme-mainframe.page-connect { ... } */
/* body.theme-mainframe.page-connect-static { ... } */

/* ============================================ */
/* MAINFRAME THEME - PHOTOPAGE (NO THEMING) */
/* ============================================ */


/* ============================================ */
/* MAINFRAME THEME - GALLERY PAGES (NO THEMING) */
/* ============================================ */

/* ============================================ */
/* MAINFRAME THEME - SHRINES PAGE */
/* ============================================ */

/* Add shrines-specific styles here when ready */

/* ============================================ */
/* MAINFRAME THEME - SITEMAP PAGE */
/* ============================================ */

/* Add sitemap-specific styles here when ready */

/* ============================================ */
/* ============================================ */
/* PAPER THEME */
/* ============================================ */
/* ============================================ */

/* ============================================ */
/* PAPER THEME - PANEL STYLING */
/* ============================================ */

body.theme-paper .themes-panel {
  /* Add panel colors here */
}

body.theme-paper .themes-panel-header {
  /* Add header colors here */
}

body.theme-paper .themes-warning {
  /* Add warning colors here */
}

body.theme-paper .theme-option:hover {
  /* Add hover colors here */
}

body.theme-paper .theme-option:hover .theme-checkbox,
body.theme-paper .theme-option:hover .theme-label {
  /* Add hover text colors here */
}

body.theme-paper .themes-collapse-btn {
  /* Add button colors here */
}

body.theme-paper .themes-collapse-btn:hover {
  /* Add button hover colors here */
}

/* Paper theme styling for accessibility panel */
body.theme-paper .accessibility-panel {
  /* Add panel colors here */
}

body.theme-paper .accessibility-panel-header {
  /* Add header colors here */
}

body.theme-paper .accessibility-option:hover {
  /* Add hover colors here */
}

body.theme-paper .accessibility-option:hover .accessibility-checkbox,
body.theme-paper .accessibility-option:hover .accessibility-label {
  /* Add hover text colors here */
}

body.theme-paper .accessibility-collapse-btn {
  /* Add button colors here */
}

body.theme-paper .accessibility-collapse-btn:hover {
  /* Add button hover colors here */
}

/* High contrast ALWAYS overrides themes for accessibility panel */
body.high-contrast.theme-paper .accessibility-panel {
  border-color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

body.high-contrast.theme-paper .accessibility-panel-header {
  border-bottom-color: #ffffff !important;
}

body.high-contrast.theme-paper .accessibility-option:hover {
  color: #000000 !important;
  background: #ffffff !important;
}

body.high-contrast.theme-paper .accessibility-option:hover .accessibility-checkbox,
body.high-contrast.theme-paper .accessibility-option:hover .accessibility-label {
  color: #000000 !important;
}

body.high-contrast.theme-paper .accessibility-collapse-btn {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.high-contrast.theme-paper .accessibility-collapse-btn:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* High contrast override for themes panel */
body.high-contrast.theme-paper .themes-panel {
  border-color: #ffffff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

body.high-contrast.theme-paper .themes-panel-header {
  border-bottom-color: #ffffff !important;
}

body.high-contrast.theme-paper .themes-warning {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

body.high-contrast.theme-paper .theme-option:hover {
  color: #000000 !important;
  background: #ffffff !important;
}

body.high-contrast.theme-paper .themes-collapse-btn {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.high-contrast.theme-paper .themes-collapse-btn:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* ============================================ */
/* PAPER THEME - GLOBAL STYLES */
/* ============================================ */

body.theme-paper {
  /* Add global background, colors, etc. here */
}

/* Grid background planes */
body.theme-paper .top-plane,
body.theme-paper .bottom-plane {
  /* Add grid colors here */
}

/* Main container */
body.theme-paper .maincontainer {
  /* Add container styling here */
}

/* Header and marquees */
body.theme-paper header marquee,
body.theme-paper footer marquee {
  /* Add marquee styling here */
}

/* Navigation */
body.theme-paper nav a {
  /* Add nav link colors here */
}

body.theme-paper nav a:visited {
  /* Add visited link colors here */
}

/* Nav hover with glow */
@keyframes pulseGlowPaper {
  0%, 100% {
    /* Add glow animation here */
  }
  50% {
    /* Add glow animation here */
  }
}

body.theme-paper nav a:hover {
  /* Add hover animation here */
}

body.theme-paper nav a.active {
  /* Add active animation here */
}

/* External link icon */
body.theme-paper a[href^="http"]::after {
  /* Add external link icon styling here */
}

/* ============================================ */
/* PAPER THEME - HOMEPAGE SPECIFIC */
/* ============================================ */

/* Add homepage-specific styles here */
/* Example: */
/* body.theme-paper.page-homepage .multibox { ... } */

/* ============================================ */
/* PAPER THEME - SCHEDULE PAGE SPECIFIC */
/* ============================================ */

/* Add schedule-specific styles here */

/* ============================================ */
/* PAPER THEME - BLOG PAGE SPECIFIC */
/* ============================================ */

/* Add blog-specific styles here */

/* ============================================ */
/* PAPER THEME - ABOUT PAGE SPECIFIC */
/* ============================================ */

/* Add about-specific styles here */

/* ============================================ */
/* PAPER THEME - CONNECT PAGES */
/* ============================================ */

/* Connect contrast page - NO THEMING (always stays high contrast) */

/* Add other connect page styles here */

/* ============================================ */
/* PAPER THEME - PHOTOPAGE (NO THEMING) */
/* ============================================ */

/* ============================================ */
/* PAPER THEME - GALLERY PAGES (NO THEMING) */
/* ============================================ */


/* ============================================ */
/* PAPER THEME - SHRINES PAGE */
/* ============================================ */

/* Add shrines-specific styles here */

/* ============================================ */
/* PAPER THEME - SITEMAP PAGE */
/* ============================================ */

/* Add sitemap-specific styles here */