* {box-sizing: border-box;}
BODY{background-color: rgb(214, 232, 255);
   overflow-y: hidden;
   font-family: 'Minecraftia', 'Courier', monospace;
   font-size: 16px;}
@font-face{font-family: 'Pix32';
   src: url('fonts/Pix32.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;}
   
@font-face{font-family: 'Minecraftia';
   src: url('fonts/Minecraftia-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;}
   
@font-face{font-family: 'Pix32';
   src: url('fonts/Pix32.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;}


@font-face{font-family: 'Dogica';
   src: url('fonts/dogica.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;}

   
@font-face{font-family: 'PixelOperator';
   src: url('fonts/PixelOperator.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;}


.container{background-color: rgba(61, 86, 109, 0);
   border: 2px solid rgba(105, 43, 43, 0);
   padding: 1px;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between; /* Distributes columns evenly */
   flex: 1;
   min-height: 0;}
.leftside{width: 15%;
   padding: 10px 0px 10px 10px;} /*top right bottom left*/
   .navcolumn{background-color: rgb(255, 255, 255);
      border: 2px black solid;
      height: 100%;} 
   .title {width: 100%;  
      padding: 10px;
      font-size: 30px;
      font-family: "04B", 'Courier', monospace;}
   .title .subtitle{font-size: 25px;}
   .subtitle{font-family: 'Dogica', 'Courier', monospace;
      font-size: 12px;
      margin-left: 15px;
      background-color: rgb(255, 255, 255);}
   .navbar{display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 5px;
      padding: 20px 0px 20px 0px;
      align-items: center;
      display: flex;
      flex-direction: column;}
   .navbutton{padding: 10px;
      font-size: 14px;
      font-family: "04B", 'Courier', monospace; 
      color: #0b0e2b; 
      background-color: rgba(173, 173, 173, 0.5); 
      border: 2px solid  rgb(255, 255, 255); 
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s; /* Smooth color transition */
      text-transform: uppercase;
      width: 85%;
      text-align: center;
      line-height: 1.2;
      text-decoration: none;
      letter-spacing: 1.5px;}
      .navbutton:hover{background-color: rgba(180, 180, 180, 0.5);
         color: rgb(88, 88, 88);}
.rightside{width: 100%;}


.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{height: 100%;
   padding: 20px;}

.masonry {margin-top: 15px;
   margin-left: 5px;
   column-count: 5   ; /* Adjust the number of columns */
   column-gap: 12px; /* Space between columns */
   width: 99%;
   height: 100%;}

   .masonry img {width: 100%;
      margin-bottom: 12px;
      break-inside: avoid; /* Prevent images from breaking across columns */}
   .masonry img.active {outline: 3px solid #000000;}
   .masonry img:hover {outline: 3px solid #7c7c7c;}

.lightbox {display: none;
   position: absolute;
   z-index: 999;
   padding-top: 60px;
   right: 0;
   top: 0;
   width: 80%;
   height: 100%;
   background-color: rgba(0,0,0,0.6);}

.lightbox-content {display: block;
   margin-left: ;
   margin: auto;
   max-width: 90%;
   max-height: 80%;}

.close {position: absolute;
   top: 20px;
   right: 35px;
   color: white;
   font-size: 40px;
   cursor: pointer;}