:root {
      font-size: 16px;
      --reddie: #EE003F;
      --orangie: #FF9150;
      --yellowie: #F8F211;
      --greenie: #5BFD0F;
      --cyanie: #37FFB3;
      --blueie: #0242FD;
      --hotiepink: #FF22A4;
      --pinkie: #EBD9FF;
      --pinkieie: #FF89E1;
    }

    @font-face {
      font-family: 'Ayumin';
      src: url('../fonts/JF-Dot-AyuMin18.ttf') format('truetype');
    }

    @font-face {
      font-family: 'Rammetto';
      src: url('../fonts/rammetto-one.regular.ttf') format('truetype');
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      image-rendering: pixelated;
    }

    body {
      background: url('../images/ekubo.png');
      font-family: 'Ayumin', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .gallery-container {
      display: grid;
      width: 750px;
      aspect-ratio: 1 / 1;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 0.5rem;
      background: black;
      padding: 0.5rem;
    }
    .middle-box {
      grid-column: 2 / 4;
      grid-row: 2 / 4;
      background: var(--hotiepink);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      border: 2px solid black;
      padding: 1rem;
      z-index: 2;
    }

    .middle-box h2 {
      font-family: 'Rammetto', sans-serif;
      font-size: 1.25rem;
      color: white;
      margin-bottom: 0.5rem;
    }

    .year-buttons {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    .year-buttons button {
      font-family: 'Ayumin', sans-serif;
      background: var(--yellowie);
      border: 2px solid black;
      padding: 0.5rem 1rem;
      cursor: pointer;
      font-size: 0.9rem;
      transition: background 0.2s;
    }

    .year-buttons button:hover {
      background: var(--cyanie);
    }
.gallery-box {
  position: relative;
  background-size: cover;
  background-position: center;
  border: 2px solid black;
  color: white;
  text-shadow: 1px 1px 0 black;
  font-weight: bold;
  font-size: 0.75rem;
}
.gallery-box .label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 255, 0.5);
  border: 2px double black;
  padding: 2px 6px;
  pointer-events: none;
}
::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}

::-webkit-scrollbar-track {
  background: #F8F211;
  border: 1px solid #0242FD;
  box-shadow: inset 0 0 4px #000;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #FF22A4, #FF89E1, #FF22A4);
  border: 1px solid #000;
  border-radius: 0.375rem;
  box-shadow: 0 0 4px #FF22A4;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #FF89E1, #FF22A4, #FF89E1);
  border-color: #F8F211;
  box-shadow: 0 0 6px #F8F211;
}

::-webkit-scrollbar-corner {
  background: #FF22A4;
}