/* ============================================================
   GLOBAL THEME & LAYOUT
   ============================================================ */
/* --- GLOBAL & SCROLLBAR --- */
      ::-webkit-scrollbar { width: 10px; }
      ::-webkit-scrollbar-thumb { 
          background: #3D9CF5; 
          border-radius: 5px; 
          border: 2px solid #000; 
      }
      ::-webkit-scrollbar-thumb:hover { 
          background: #0ff; 
          box-shadow: 0 0 10px #0ff; 
      }

body {
  margin-left: 230px !important;
        
   /* Replace the URL with your GIF link or file path */
  background-image: url('space 2.gif');
            
  /* This keeps the background from moving when you scroll */
  background-attachment: fixed;
            
  /* This ensures the GIF covers the whole screen */
            background-size: auto;
            
            /* This centers the GIF */
            background-position: center;
            
            /* Optional: ensures no tiling if the GIF is small */
            background-repeat: repeat;
            
            /* Just for readability of your text over the GIF */
            color: white;
            font-family: sans-serif;
            margin: 0;
            padding: 50px;
        }

@font-face { font-family: Barriecito; src: url('Barriecito-Regular.TTF');} 
      h1 {
         font-family: Barriecito;
         font-size: x-large;
         animation: flicker 2s linear 1,
                    neon-pulse 3s infinite;
         text-align: center;
      }
      
      h2 {
         font-family: Barriecito;
         font-size: large;
         color: #E1EEF0;
      }
      
      H2-neon {
         font-family: Barriecito;
         font-size: large;
         text-align: center;
         animation: flicker 2s linear 1, neon-pulse 3s infinite;
      }
      
      h3 {
         font-family: Barriecito;
         text-align: center;
         font-size: medium;
         color: #E1EEF0;
      }

      p {
         font-family: Barriecito;
         text-align: justify;
         font-size: small;
      }

      a {
         font-family: Barriecito;
         text-align: start;
         font-size: small;
         animation: flicker 2s linear 1,
                    neon-pulse 3s infinite;
      }
      
      @font-face{ font-family: 'RubikGlitch'; src: url('RubikGlitchRegular.ttf');
        font-family: RubikGlitch;
        text-align: start;
        /*animation: glitch-jitter 0.15s infinite;*/
        animation: neon-pulse 1s infinite;
      }
      
      /* Neon Pink for Bold Text */
      .neon-bold {
          font-weight: bold;
          color: #E1EEF0;
          text-shadow: 
              0 0 5px #fff,
              0 0 10px #ff00ff,
              0 0 20px #ff00ff;
      }
      
      /* Neon Cyan for Italics */
      .neon-italic {
          font-style: italic;
          color: #fff;
          text-shadow: 
              0 0 5px #fff,
              0 0 10px #00ffff,
              0 0 20px #00ffff;
      }
      
      /* Neon Lime for Underline */
      .neon-underline {
          text-decoration: none; /* Removes standard thin underline */
          border-bottom: 2px solid #39ff14; /* Uses a thicker neon border instead */
          box-shadow: 0 4px 10px -2px #39ff14;
          color: #fff;
      }
      
      /* Optional: Neon Flicker Effect for Highlights */
      .neon-flicker {
          color: #fff;
          text-shadow: 0 0 10px #ffea00;
          animation: flicker 1.5s infinite alternate;
      }
      
      .hollow-white {
          font-family: 'RubikGlitch', sans-serif;
          color: black;
          /* We can make the stroke thick now because it sits BEHIND the fill */
          -webkit-text-stroke: 1px white; 
          paint-order: stroke fill; 
          
          text-shadow: 0 0 5px white;
          display: inline-block;
          animation: glitch-jitter 0.7s steps(3) infinite;
      }
      
      .hollow-red {
          font-family: 'RubikGlitch', sans-serif;
          color: black;
          -webkit-text-stroke: 2px #ff0000;
          paint-order: stroke fill;
          text-shadow: 0 0 5px #ff0000;
          
          /* Make the position relative so the "squares" stay near the text */
          position: relative; 
          display: inline-block;
          
          /* Use 'ease-in-out' for a more organic feel */
          animation: glitch-jitter 0.7s steps(3) infinite;
      }
      
      /* Sidebar Container */
      .sidebar {
          height: 100%;
          width: 220px; 
          position: fixed; /* Stays in place */
          z-index: 1; /* Sits on top of the background */
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
          border-right: 2px solid #3D9CF5; /* Neon line to match your glow */
          overflow-x: hidden;
          padding-top: 20px;
          font-family: Barriecito, sans-serif;
      }
      
      /* The Icon at the top */
      .sidebar-icon {
          display: block;
          margin: 0 auto 20px auto;
          width: 80px; /* Adjust size as needed */
          height: auto;
          filter: drop-shadow(0 0 5px #0ff); /* Makes your icon glow! */
      }
      
      /* Sidebar Links (Direct Accesses) */
      .sidebar a {
          padding: 15px 25px;
          text-decoration: none;
          font-size: 20px;
          color: #E1EEF0;
          display: block;
          transition: 0.3s;
      }
      
      /* Hover effect for links */
      .sidebar a:hover {
          color: #0ff;
          padding-left: 35px; /* Slight slide effect */
          text-shadow: 0 0 10px #0ff;
      }
      
      /* The Universal Content Box */
      .content-box {
          background-color: rgba(0, 0, 0, 0.75); /* Dark background so text pops */
          border: 2px solid #3D9CF5;             /* The blue neon border */
          border-radius: 15px;                   /* Smooth rounded corners */
          padding: 25px;
          margin: 20px auto;                     /* Centers the box with space around it */
          max-width: 800px;                      /* Keeps the text from stretching too wide */
          
          /* Adds a subtle outer glow to the box itself */
          box-shadow: 0 0 15px rgba(61, 156, 245, 0.4); 
          
          /* Ensuring everything inside uses your font */
          font-family: Barriecito, sans-serif;
          color: #E1EEF0;
      }
      
      /* The Secret Universe Glow */
      #universe-glow {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          pointer-events: none; /* Allows you to click things 'through' the glow */
          z-index: 9999; /* Keeps it on top of everything */
          transition: box-shadow 2s ease-in-out;
          box-shadow: inset 0 0 0px rgba(255, 0, 0, 0); /* Invisible by default */
      }
      
      /* When the secret is active, this class is added via JavaScript */
      #universe-glow.active {
          box-shadow: inset 0 0 150px rgba(255, 0, 0, 0.6), 
                      inset 0 0 50px rgba(255, 0, 0, 0.4);
          border: 10px solid #ff0000;
      }
      
       /* Elements are hidden by default */
      .the-truth {
          display: none;
          visibility: hidden;
          opacity: 0;
      }
      
      /* When JavaScript adds this class, the content appears */
      .the-truth.revealed {
          display: block;
          visibility: visible;
          opacity: 1;
          animation: neonReveal 2s ease-in-out;
      }
      
      /* 1. This forces the secret container to stay hidden until revealed */
      div.the-truth:not(.revealed) {
          display: none !important;
      }
      
      /* 2. This ensures it appears correctly once the code is entered */
      div.the-truth.revealed {
          display: block !important;
      }
      
      /* --- BOXES (FIXED SPACING) --- */
      .content-box {
          background-color: rgba(0, 0, 0, 0.75); border: 2px solid #3D9CF5;
          border-radius: 15px; padding: 25px; 
          margin: 20px auto 60px auto; /* Added large bottom margin (60px) */
          max-width: 800px;
          box-shadow: 0 0 15px rgba(61, 156, 245, 0.4);
      }

      .filter-grid {
          display: grid; 
          grid-template-columns: repeat(3, 1fr); 
          gap: 15px; 
          margin-top: 20px;
      }

      .filter-btn {
          background: rgba(0, 0, 0, 0.3); color: #888; border: 1px solid #333;
          padding: 10px; border-radius: 4px; font-family: Barriecito, sans-serif;
          cursor: pointer; transition: all 0.3s; font-size: 0.85em;
      }
      .filter-btn:hover, .filter-btn.active { color: #0ff; border-color: #0ff; box-shadow: 0 0 10px #0ff; }

      /* --- POSTS --- */
      .post-container { max-width: 600px; margin: 0 auto; }
      .post-entry {
          background-color: rgba(0, 0, 0, 0.8); border: 2px solid #3D9CF5;
          padding: 20px; margin-bottom: 40px; border-radius: 8px;
          box-shadow: 0 0 10px rgba(61, 156, 245, 0.2);
      }
      .post-header { display: flex; justify-content: space-between; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 15px; }
      .post-name { color: #0ff; font-weight: bold; text-shadow: 0 0 5px #0ff; }
      .post-tags { font-size: 0.75em; color: #3D9CF5; margin-bottom: 15px; text-transform: uppercase; }

      /* --- TYPEWRITER WARNING --- */
      .warning-text {
          display: block;
          color: #ff0000;
          font-family: monospace;
          font-size: 0.9em;
          text-shadow: 0 0 8px #ff0000;
          margin-bottom: 15px;
          line-height: 1.4;
          overflow: hidden;
          border-right: 2px solid #ff0000;
          /* Rapid typewriter animation */
          animation: 
            typing 3.5s steps(80, end),
            blink-caret 0.75s step-end infinite;
      }

      .proceed-link {
          display: inline-block;
          color: #ff0000; /* Red by default */
          text-decoration: underline;
          cursor: pointer;
          font-family: Barriecito, sans-serif;
          font-size: 1.1em;
          margin-top: 5px;
          transition: color 0.3s, text-shadow 0.3s; /* Smooth transition */
          text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
      }

      .proceed-link:hover { 
          color: #00ff00; /* Changes to Green on hover */
          text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00; /* Green glow */
      }
      
      /* Fades out the warning when the post is opened */
      .hidden-post-content[open] .warning-text {
          opacity: 0;
          max-height: 0;
          margin: 0;
          padding: 0;
          overflow: hidden;
          transition: all 0.5s ease;
          pointer-events: none;
      }
      
      /* Optional: Make the "Proceed" link also disappear or change text */
      .hidden-post-content[open] .proceed-link {
          display: none;
      }

      /* --- KEYFRAMES --- */
      @keyframes typing { 
          from { max-height: 0; opacity: 0; } 
          to { max-height: 300px; opacity: 1; } 
      }
      @keyframes blink-caret { 
          from, to { border-color: transparent; } 
          50% { border-color: #ff0000; } 
      }
      @keyframes neon-pulse { 
          0%, 100% { text-shadow: 0 0 10px #3D9CF5, 0 0 20px #0ff; } 
          50% { text-shadow: 0 0 20px #3D9CF5, 0 0 40px #0ff; } 
      }
      @keyframes flicker { 
          0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 
          20%, 24%, 55% { opacity: 0.3; } 
      }
      @keyframes glitch-jitter { 
          0% { transform: translate(0,0); } 
          10% { transform: translate(-1px,1px); } 
          100% { transform: translate(0,0); } 
      }

      /* --- COMMENTS --- */
      .comment-section { margin-top: 20px; padding: 12px; background: rgba(0,0,0,0.5); border: 1px solid #333; border-radius: 8px; }
      .comment-section summary { cursor: pointer; color: #3D9CF5; font-size: 0.9em; }
      .comment-form { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
      .name-input, .message-input { background: #000; border: 1px solid #3D9CF5; color: #fff; padding: 10px; border-radius: 4px; font-family: inherit; }
      .comment-btn { background: transparent; color: #3D9CF5; border: 1px solid #3D9CF5; padding: 8px 20px; cursor: pointer; align-self: flex-start; transition: 0.3s; }
      .comment-btn:hover { background: #3D9CF5; color: #000; box-shadow: 0 0 10px #3D9CF5; }
      
      /* Optional: Smooth fade-in and neon glow animation */
      @keyframes neonReveal {
          0% { opacity: 0; filter: blur(5px); }
          50% { color: #fff; text-shadow: 0 0 20px #00ffff; }
          100% { opacity: 1; filter: blur(0); }
      }
      
        @keyframes neon-pulse {
          0%, 100% {
            text-shadow: 0 0 10px #3D9CF5, 0 0 20px #0ff; /* Dimmer */
          }
          50% {
            text-shadow: 0 0 20px #3D9CF5, 0 0 40px #0ff, 0 0 60px #0ff; /* Brighter */
          }
        }
        
        @keyframes flicker {
          0%, 18%, 22%, 25%, 53%, 57%, 100% {
            text-shadow: 0 0 10px #fff, 0 0 20px #0ff; /* On */
            opacity: 1;
          }
          20%, 24%, 55% {
            text-shadow: none; /* Off */
            opacity: 0.3;
          }
        }
        @keyframes glitch-jitter {
            0% { transform: translate(0, 0); }
            10% { transform: translate(-1px, 1px); }
            20% { transform: translate(1px, -1px); }
            30% { transform: translate(-1px, -1px); }
            40% { transform: translate(1px, 1px); }
            50% { transform: translate(-1px, -1px); }
            60% { transform: translate(1px, 1px); }
            70% { transform: translate(-1px, -1px); }
            80% { transform: translate(1px, 1px); }
            90% { transform: translate(-1px, -1px); }
            100% { transform: translate(0, 0); }
        }
        
        @keyframes flash-squares {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

/* ============================================================
   YOUTUBE & MEDIA STYLES
   ============================================================ */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    width: 100%;
    margin-top: 20px;
}

.video-container {
    position: relative;
    border: 2px solid #fff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    overflow: hidden;
    background: #000;
}

 iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
}

/* ============================================================
   THE TRUTH (SECRET CONTENT)
   ============================================================ */
/* ============================================================
   GLOBAL SECRET STYLING (FORCE RED OVERRIDE)
   ============================================================ */

/* 1. The Container Logic */
.the-truth {
    display: none;
    opacity: 0;
}

.the-truth.revealed {
    display: block !important;
    opacity: 1 !important;
}

/* ============================================================
   THE ULTIMATE RED OVERRIDE
   ============================================================ */

/* This targets EVERYTHING inside the revealed section, 
   overriding your specific .neon-bold or .hollow-white classes */

.the-truth.revealed,
.the-truth.revealed *, 
.the-truth.revealed .neon-bold,
.the-truth.revealed .hollow-white,
.the-truth.revealed .flicker {
    color: #ff0000 !important;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #8b0000 !important;
    -webkit-text-stroke: 0px !important; /* Removes any white outlines you might have */
}

/* Special Case: Bold text stays white in the center for that 'hot' look */
.the-truth.revealed strong, 
.the-truth.revealed b {
    color: #ffffff !important;
    text-shadow: 0 0 10px #ffffff, 0 0 30px #ff0000 !important;
}

/* Special Case: Make sure links also turn red */
.the-truth.revealed a {
    color: #ff0000 !important;
    text-decoration: underline;
}

/* --- Keep the animations the same --- */
@keyframes red-flicker {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px #ffffff; }
    50% { opacity: 0.7; text-shadow: none; }
}

.the-truth.revealed img {
    border: 2px solid #ff0000;
    animation: glitch-shake 0.3s infinite;
    box-shadow: 0 0 20px #ff0000;
}

@keyframes glitch-shake {
    0% { transform: translate(0); }
    25% { transform: translate(-3px, 2px) skewX(5deg); filter: hue-rotate(90deg); }
    50% { transform: translate(3px, -2px); filter: contrast(1.5); }
    100% { transform: translate(0); }
}