:root {
  --foreground: #ffffff;
  --background: #0a0322;
}

@font-face {
  font-family: Inter;
  src:
    url("Inter-Regular.woff2") format("woff2"),
    url("Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src:
    url("Inter-Italic.woff2") format("woff2"),
    url("Inter-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

* {
  color: var(--foreground);
  background-color: var(--background);

  font-family: Inter, serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.cursive {
  font-style: italic;
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in {
  opacity: 0;
  animation: slideInFromBottom 1s ease-out forwards 3s;
}

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

.fade-in-first {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards 0s;
}

.fade-in-second {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards 1.5s;
}

.fade-in-third {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards 4s;
}

svg {
  width: 100px;
  height: 100px;
  stroke: var(--foreground);
}

main {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: space-evenly;
}

#hero-content > * {
  display: flex;
  align-items: center;
  flex-flow: column;
}

#hero-content {
  display: flex;
  align-items: center;
  flex-flow: column;
  white-space: nowrap;
  text-align: center;

  gap: 1em;

  width: 100%;
  min-width: 200px;
  max-width: 450px;
}

#tag-line {
  font-size: clamp(20px, 7vw, 46px);
}

#name-job {
  font-size: clamp(14px, 4.5vw, 30px);
}

address {
  display: flex;
  flex-flow: column;
  font-size: clamp(14px, 4vw, 28px);
  align-items: center;

  width: 45%;
  min-width: 175px;
  max-width: 350px;
}