* {box-sizing: border-box;}
@font-face {
   font-family: 'CiGamedev';
   src: url('../fonts/CiGamedevRegular-ovq3z.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;}
@font-face {
   font-family: 'RedikaPixel';
   src: url('../fonts/RedikapixelRegularDemo-KVq4l.otf') format('opentype');
   font-weight: normal;
   font-style: normal;}

BODY{font-family: "CiGamedev", 'Courier New', Courier, monospace;
   color: white;
   background-color: #02000f;
   overflow-y: hidden;
   margin: 0;
   padding: 0;
   overflow-x: hidden;}
/*stagger load*/ 
.loading {position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column; /* Stack the boxes vertically */
   justify-content: space-between; /* Evenly space out the boxes */
   pointer-events: none; /* Prevent interaction with the page while loading */}
.box {width: 100%;
   height: 25%; /* Each box takes up 25% of the height */
   background-color: #02000f;
   animation: disappear 0s forwards; /* No fade, just disappearance */}
@keyframes disappear {
   0% {visibility: visible; /* Boxes are visible initially */}
   100% {visibility: hidden; /* Make boxes disappear instantly */}}

/*scanlines*/
.scanlines{position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(transparent 1.5px, rgba(255, 255, 255, 0.1) 1px); /* Light scanlines */
   background-size: 100% 8px; /* Increased line thickness (8px height) */
   pointer-events: none; /* Ensure scanlines don't interfere with other content */
   animation: moveScanlines 0.9s linear infinite; /* Speed */}
   /*animation for moving scanlines*/
   @keyframes moveScanlines{
      0% {background-position: 0 0;}
      100% {background-position: 0 100%;}}
   /*scanline toggles*/
   .button-container{position: fixed;
      bottom: 20px;
      left: 20px;
      display: flex;
      flex-direction: column;
      gap: 5px;}
   .toggle-btn{padding: 5px 10px;
   font-size: 12px;
   color: rgb(0, 160, 255); /* Classic green text */
   background-color: #1c1c1c; /* Dark background for button */
   border: 2px solid  rgb(0, 26, 255); /* Green border */
   border-radius: 0px; /* No rounded corners */
   font-family: 'Courier', monospace; /* Monospace font */
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s; /* Smooth color transition */
   text-transform: uppercase; /* Capitalize the button text */}
   .toggle-btn:hover{background-color: rgb(48, 48, 51);
      color: rgb(159, 181, 255);}
   .scanlines.disabled{animation: none;
      background-image: none;}
   .scanlines.paused{animation-play-state: paused;}

/* Centering the content horizontally */
.centerbox {display: flex;
   flex-direction: column; /* Stack title and mainbox vertically */
   align-items: center;    /* Center everything horizontally */
   border: 2px solid rgba(255, 0, 0, 0);
   padding: 15px;
   height: 100vh;}

/* Styling for the title */
.title {background-color: rgba(12, 0, 122, 0.25);
   border: 2px white solid;
   width: 74.70%;  
   text-align: center;
   padding: 10px;
   font-size: 45px;}
.title .subtitle{font-size: 25px;}

/* Main container for the 3 columns, centered horizontally */
.mainbox {background-color: rgba(61, 86, 109, 0);
   border: 2px solid rgba(105, 43, 43, 0);
   padding: 1px;
   width: 75%;
   height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between; /* Distributes columns evenly */
   flex: 1;
   min-height: 0;}
      .navcolumn, .maincontent, .sidecontent{height: 100%;
         min-height: 0;}
.navcolumn {background-color: rgba(25, 71, 197, 0.5);
   border: 2px solid rgb(255, 255, 255);
   padding: 5px;
   /*height: 400px; */  
   flex: 20%;}
.navbar{display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   padding: 20px 0px 20px 0px;}
   .navbutton{padding: 10px;
      font-size: 14px;
      font-weight: bold;
      font-family: "CiGamedev", 'Courier', monospace; 
      color: rgb(255, 255, 255); 
      background-color: #1c1c1c; 
      border: 2px solid  rgb(255, 255, 255); 
      border-radius: 0px; 
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s; /* Smooth color transition */
      text-transform: uppercase;
      width: 100%;
      text-align: center;
      line-height: 1.2;
      text-decoration: none;
      letter-spacing: 1.5px;}
      .navbutton:hover{background-color: rgb(45, 45, 48);
         color: rgb(20, 20, 255);}
      .currentpage {
         color: rgba(255, 255, 255, 0.5);
         background-color: rgba(28, 28, 28, 0.5);
         border-color: rgba(255, 255, 255, 0.5);
         pointer-events: none;   /* 🔒 disables clicking */
         cursor: default;}

.maincontent {background-color: rgba(35, 108, 175, 0);
   border: 2px solid rgba(255, 255, 255, 1);
   padding: 5px;
   flex: 60%;
   border: 2px white solid;
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: hidden;}

.sidecontent {background-color: rgba(25, 71, 197, 0.5);
   border: 2px solid rgb(255, 255, 255);
   padding: 5px;
   flex: 22%;}

.togglecontent {overflow-y: scroll;
   overflow-x: hidden;
   height: 100%;
   border: 2px white solid;}

.togglebox {padding: 5px 15px 5px 15px; /*top right bottom left*/
   background-color: rgba(14, 0, 139, 0.5);
   border: 1px rgb(255, 255, 255) solid;
   cursor: pointer;}
   .togglebox:nth-child(odd) {background-color: rgba(0, 89, 255, 0.5);}
   .togglebox .content {display: none;
      padding-top: 10px;}
   .togglebox.active .content {display: block;}
   .togglebox .header {font-size: 20px;
      font-weight: bold;
      color: white;}
      h1{font-size: 25px;
         font-weight: bold;
         color: white;}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background: #68657a;}
::-webkit-scrollbar-thumb {background: #2c2663;}   
::-webkit-scrollbar-thumb:hover {background: #2c2663;}

.adprorotate{width: 100%;
   background-color: rgb(255, 255, 255);
   display: flex;
   flex-direction: column;}
.image-area{background-size: cover;
   background-position: center;
   margin: 2px;
   width: 275px;
   height: 275px;}

.redacted{color: transparent;
   pointer-events: none;
   background-color: #02000f;
   user-select: none;}
h1, h2, h3{text-indent: 32px;
   letter-spacing: 1px;}
p{font-size: 18px;
   text-indent: 20px;}
ul{list-style-type: square;}
   li{margin: 0px 0px 5px 0px;
      font-size: 17px;}

/*Listing*/
.listing{background-color: rgba(0, 26, 143, 1);
   padding: 5px; /*top left bottom right*/
   height: 100%;
   display: grid;
   grid-template-columns: repeat(4, minmax(200px, 1fr));
   justify-content: center;
   overflow-y: scroll;
   overflow-x: hidden;}
   .listingbox{border: 2px solid white;
      align-items: center;
      display: flex;
      flex-direction: column;
      width: 175px;
      height: 175px;
      margin: 0 auto;
      margin-top: 5px;
      margin-bottom: 5;}

/* Character File */