* {box-sizing: border-box;}
@font-face {
   font-family: 'Almond Milky';
   src: url('fonts/AlmondMilky.otf') format('opentype');
   font-weight: normal;
   font-style: normal;}
@font-face {font-family: 'Minecraftia';
   src: url('fonts/Minecraftia-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;}
@font-face {font-family: '04B';
   src: url('fonts/04B_30__.TTF') format('truetype');
   font-weight: normal;
   font-style: normal;}

h1, h2, h3{font-family: "Almond Milky", "04B", "Minecraftia",'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   letter-spacing: 1px;
   text-indent: 15px;}

BODY{font-family: 'Minecraftia',"Almond Milky", 'Courier New', Courier, monospace;
   color: white;
   background-image: url('imgs/fd40a4b8b151c4e432106576187d03c9-1231752521.gif');
   overflow-y: hidden;
   margin: 0;
   padding: 0;
   overflow-x: hidden;}
/*stagger load*/ 

/* 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: 40%;  
   padding: 10px;
   font-size: 35px;
   border-radius: 10px;
   margin-right: 35%;
   font-family: "04B", 'Almond Milky', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
.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(1, 1fr);
   gap: 12px;
   padding: 20px 0px 20px 0px;}

   .navbutton{padding: 10px;
      font-size: 14px;
      font-weight: bold;
      font-family: "Almond Milky", 'Courier', monospace; 
      color: rgb(255, 255, 255); 
      background-color: rgba(11, 112, 194, 0.75); 
      border: 2px solid  rgb(255, 255, 255); 
      border-radius: 15px; 
      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: rgba(0, 0, 185, 0.5);
         color: rgb(255, 255, 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: 10px 5px 0px 10px; /*top right bottom left*/
   background-color: rgba(14, 0, 139, 0.1);
   border: 1px rgb(255, 255, 255) solid;
   cursor: pointer;}
   .togglebox:nth-child(odd) {background-color: rgba(0, 89, 255, 0.2);}
   .togglebox .content {display: none;}
   .togglebox.active .content {display: block;}
   .togglebox .header {font-size: 18px;
      font-weight: bold;
      color: white;}
      h1{font-size: 25px;
         font-weight: bold;
         color: white;}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background: #c5beeb;}
::-webkit-scrollbar-thumb {background: #6f60f3;}   
::-webkit-scrollbar-thumb:hover {background: #5a49f0;}


.redacted{color: transparent;
   pointer-events: none;
   background-color: #02000f;
   user-select: none;}
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 */