@font-face {
  font-family: "Lexend";
  src: url("/assets/fonts/Lexend/Lexend-VariableFont_wght.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Michroma";
  src: url("/assets/fonts/Michroma/Michroma-Regular.ttf");
  font-display: swap;
}

:root {
  --font-lexend: "Lexend", sans-serif;
  --font-michroma: "Michroma", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.font-Lexend {
  font-family: var(--font-lexend);
}

.font-Michroma {
  font-family: var(--font-michroma);
}

h1 {
  font-family: var(--font-michroma);
}

p,
li,
label,
a {
  font-family: var(--font-lexend);
}

.bg-indigo-600 {
  background-color: #5470fd;
}

.bg-orange-400 {
  background-color: #ff904a;
}

.fade {
  animation: fade linear 0.2s;
}

.fade-right--anime {
  animation: fade-right ease-in-out 0.15s;
}

.fade-left--anime {
  animation: fade-left ease-in-out 0.15s;
}

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

@keyframes fade-right {
  from {
    opacity: 0;
    transform: translateX(250px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(-250px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}