@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  .nav {
    flex-direction: column;
  }
}

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

@font-face {
  font-family: 'Agraham';
  src: url('/fonts/agraham/Agraham.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Greater Theory';
  src: url('/fonts/greater-theory/GreaterTheory.otf');
  font-weight: normal;
}


@font-face {
  font-family: 'GoudyBookLetter';
  src: url('/fonts/goudy-bookletter/GoudyBookletter1911.otf');
  font-weight: normal;
}

@font-face {
  font-family: 'LeagueScript';
  src: url('/fonts/LeagueMono-2.300/LeagueMono-2.300/static/OTF/LeagueMono-NarrowLight.otf');
  font-weight: normal;
}


.socials {
  color: var(--eggshell);
}

.socials:hover{
  color: var(--slate-gray);
}

.socials img {
  color: var(--eggshell);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.socials:hover img {
  color: var(--slate-gray);
  transform: scale(1.1); /* Slight zoom */
  filter: brightness(1.2); /* Slight lightening */
}






@keyframes blue_hover {
  0%      { background-color: hsla(90, 47%, 73%, 0); }
  12%     { background-color: hsla(90, 47%, 73%, .2); }
  25%     { background-color: hsla(90, 47%, 73%, .25); }
  37%     { background-color: hsla(90, 47%, 73%, .37); }
  50.000%     { background-color: hsla(90, 47%, 73%, .5); }
  62%      {background-color: hsla(90, 47%, 73%, .62); }
  75.000%     { background-color: hsla(90, 47%, 73%, .75); }
  100.00%     { background-color: hsla(90, 47%, 73%, .85); }
}

@keyframes yellow_fade {
  0%   { background-color: hsla(38, 70%, 65%, 1); }
  100% { background-color: hsla(0, 0%, 100%, 1); }
}

.nav-bar {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.6s ease-out;
}

.nav-bar.animate {
  opacity: 1;
  transform: translateY(0);
}



.footer {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.footer.animate {
  opacity: 1;
  transform: translateY(0);
}

.content {
  opacity: 0;
  transform: translateX(-150px);
  transition: all 0.6s ease-out;
}

.content.animate {
  opacity: 1;
  transform: translateX(0);
}

.focus-button:hover {
  transform: scale(1.1);
  animation: yellow_fade 0.6s ease-out reverse;
}