:root {
    --lightest-green: #cbcc6f;
    --light-green: #99b373;
    --medium-green: #72a45a;
    --dark-green: #678a5a;
    --darkest-green: #3f5929;
    --light-earth: #f1d09f;
    --medium-earth: #d57e3a;
    --darke-earth: #554436;
    --dark-earth: #ac815f;
    --darkest-earth: #683d15;
    --yellow: #f6de51;
    --orange: #fba931;
    --red: #dc481f;
    --boxbackground: rgba(83, 83, 83, 0.603);
     --boxbackground2: rgba(85, 95, 76, 0.685);
/*     --boxbackground2: rgba(99, 114, 85, 0.685);*/
     --boxbackground3: rgba(85, 95, 76, 0.685);
      --boxbackground4: rgba(55, 59, 44, 0.767);
  }
  @import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap');
    body{
          font-family: "Gaegu", sans-serif;
            font-weight: 400;
            font-style: normal;
                }
                html, body {
  height: 100%;
  overflow-y: auto;
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(-5px, 5px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.bg-image{
   background: url(../img/aboutPage/transparent/3px-tile.png);
}

.dogge:hover {
  animation: tilt-n-move-shaking 0.25s infinite;
}
@keyframes glowing-ring {
  0% { box-shadow: 0 0 8px 4px rgba(255, 235, 150, 0.4); }
  50% { box-shadow: 0 0 15px 8px rgba(255, 235, 150, 0.8); }
  100% { box-shadow: 0 0 8px 4px rgba(255, 235, 150, 0.4); }
}

.kei {
  filter: sepia(0.2) brightness(1.05);
  transition: transform 0.3s ease;
  border-radius: 0.5rem;
}

.kei:hover {
  animation: glowing-ring 1.5s infinite ease-in-out;
  transform: scale(1.03);
}


  /* Scrollbar bonito para el contenedor central */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--boxbackground);
  border-radius: 8px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--medium-green);
  border-radius: 8px;
  border: 2px solid var(--boxbackground); /* efecto de padding */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--dark-green);
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--medium-green) var(--boxbackground);
}