@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

@theme {
    --font-quicksand: "Quicksand", sans-serif;
    --font-helvetica: "Helvetica", sans-serif;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/Helvetica.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/Helvetica-Bold.woff') format('woff');
  font-weight: 700;
  font-style: bold;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/Helvetica-Light.woff') format('woff');
  font-weight: 300;
  font-style: light;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/Helvetica-Oblique.woff') format('woff');
  font-weight: 400;
  font-style: oblique;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/Helvetica-BoldOblique.woff') format('woff');
  font-weight: 700;
  font-style: oblique;
}

@font-face {
  font-family: 'Helvetica';
  src: url('fonts/Helvetica-LightOblique.woff') format('woff');
  font-weight: 300;
  font-style: oblique;
}

.movingtextbox {
  /*animation*/
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  animation: moveDown 2s ease-out forwards;
}

/*keyframes*/
@keyframes moveDown {
  0% {
    top:-100
  }
  100% {
    top: 100px; /*distance to move down*/
  }
}