.terminal-bg {
  background-color: rgb(34, 34, 34);
}

.logo-font {
  font-family: 'Courier New', Courier, monospace;
}

html,
body {
  overflow-x: hidden;
}

nav {
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: 50;
}

#tailwindLogo {
  display: inline-block;
  filter: brightness(0) invert(1);
  width: 19px;
  height: 19px;
  vertical-align: text-top;
}

#tailwindLogo:hover {
  filter: none;
}

.invert {
  filter: brightness(0) invert(1);
}

.typst {
  padding: 3pt;
  filter: invert(1);
  background: linear-gradient(270deg, #DC6252 0%, #BD7A0B 100%);
}

/* Technical skills animations */
@keyframes scroll-rtl {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--scroll-width)));
  }
}

@keyframes scroll-ltr {
  from {
    transform: translateX(calc(-1 * var(--scroll-width)));
  }

  to {
    transform: translateX(0);
  }
}

.animate-scroll-rtl {
  animation: scroll-rtl 10s linear infinite;
  width: max-content;
}

.animate-scroll-ltr {
  animation: scroll-ltr 10s linear infinite;
  width: max-content;
}

.animate-scroll-rtl:hover,
.animate-scroll-ltr:hover {
  animation-play-state: paused;
}

/* Footer animations */
.icons a i {
  color: white;
  transition: color 1s ease;
}

.icons a img {
  filter: brightness(0) invert(1);
  transition: filter 1s ease;
}

.icons a:hover i {
  color: inherit;
}

.icons a:hover img {
  filter: none;
}

@keyframes colorWavePhp {

  0%,
  100% {
    color: white;
  }

  5%,
  45% {
    color: #8b5cf6;
    /* purple */
  }

  50% {
    color: white;
  }
}

@keyframes colorWaveJs {

  0%,
  100% {
    color: white;
  }

  5%,
  45% {
    color: #efd544;
    /* yellow */
  }

  50% {
    color: white;
  }
}

@keyframes colorWaveHtml {

  0%,
  100% {
    color: white;
  }

  5%,
  45% {
    color: #ef4444;
    /* red */
  }

  50% {
    color: white;
  }
}

@keyframes colorWaveCss {

  0%,
  100% {
    color: white;
  }

  5%,
  45% {
    color: #2563eb;
    /* blue */
  }

  50% {
    color: white;
  }
}

@keyframes colorWaveSvg {

  0%,
  100% {
    filter: brightness(0) invert(1);
    opacity: 1;
  }

  5%,
  45% {
    filter: none;
    opacity: 1;
  }

  50% {
    filter: brightness(0) invert(1);
    opacity: 1;
  }
}

.icons a:nth-child(1) i {
  animation: colorWavePhp 8s ease-in-out infinite;
}

.icons a:nth-child(2) i {
  animation: colorWaveJs 8s ease-in-out infinite;
}

.icons a:nth-child(3) i {
  animation: colorWaveHtml 8s ease-in-out infinite;
}

.icons a:nth-child(4) i {
  animation: colorWaveCss 8s ease-in-out infinite;
}

.icons a:nth-child(5) img {
  animation: colorWaveSvg 8s ease-in-out infinite;
}

/* View Transitions */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

@keyframes fade-out {
  from 100% {
    opacity: 0.1;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0.1;
  }

  to 100% {
    opacity: 1;
  }
}