:root {
  color-scheme: dark;
}

html, body {
  background-color: #0b0d10 !important;
  color: #cbd5e1 !important;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

.max-w-3xl > header,
.max-w-3xl > section,
.max-w-3xl > footer {
  animation: fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.max-w-3xl > section:nth-child(2) {
  animation-delay: 100ms;
}

.max-w-3xl > section:nth-child(3) {
  animation-delay: 180ms;
}

.max-w-3xl > section:nth-child(4) {
  animation-delay: 260ms;
}

.max-w-3xl > section:nth-child(5) {
  animation-delay: 340ms;
}

.max-w-3xl > section:nth-child(6) {
  animation-delay: 420ms;
}

footer {
  animation-delay: 500ms;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.live-status-dot {
  animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% {
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.35);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, 0);
  }
}

a.inline-flex {
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

a.inline-flex:hover {
  transform: translateY(-2px);
}

div[class~="bg-[#161920]"] {
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 220ms ease;
}

div[class~="bg-[#161920]"]:hover,
article[class~="bg-[#161920]"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

span[class~="bg-[#3d0000]"],
a[class~="bg-[#3d0000]"] {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

span[class~="bg-[#3d0000]"]:hover,
a[class~="bg-[#3d0000]"]:hover {
  transform: translateY(-1px);
}

figure img,
div[aria-label="IP calculator screenshots"] img,
div[aria-label="AWS Summit photos"] img {
  transition: transform 350ms ease, filter 350ms ease;
}

figure:hover img,
div[aria-label="IP calculator screenshots"] img:hover,
div[aria-label="AWS Summit photos"] img:hover {
  transform: scale(1.025);
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}

.credly-badge iframe {
  filter: invert(0.88) hue-rotate(180deg);
  max-width: 100%;
}

@media (max-width: 639px) {
  body {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .credly-badge {
    max-width: 100%;
  }
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0b0d10;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #334155;
}