@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import 'tailwindcss';

html {
  @apply scroll-smooth;
  font-family: 'Outfit', sans-serif;
}

body {
  @apply overflow-x-hidden bg-white text-black dark:bg-[#1C1C1C]
    dark:text-white;
}

.material-symbols-outlined {
  @apply inline-block align-middle select-none;
}

.skip-to-content {
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal;
  -webkit-clip-path: inset(50%);
  position: absolute;
  z-index: 999;
  clip-path: inset(50%);
  margin: -1px;
  border: 0;
  overflow: hidden;
  @apply bg-black/50 p-4 text-white;
}

.skip-to-content:focus {
  clip: auto !important;
  -webkit-clip-path: none;
  top: 0;
  left: 0;
  clip-path: none;
  margin: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

.fade-in {
  animation: fade-in 0.5s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}