invesvpo/styles/globals.css

:root {
  --padding-sm: 5px;
  --padding: 10px;
  --padding-lg: 20px;
  --padding-xl: 50px;

  --font-xl: 5em;
  --font-lg: 1.5em;
  --font: 1em;
  --font-sm: 0.8em;

  --page-width: 1000px;

  --transition-speed: 0.3s;
}

@font-face {
  font-family: 'Dual';
  src: url('/fonts/Dual-300.otf');
  src: url('/fonts/Dual-300.ttf') format('truetype');
}

@font-face {
  font-family: 'Anurati';
  src: url('/fonts/Anurati-Regular.otf');
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Dual', sans-serif;
  background-color: #232323;
}

h1, h2 {
  font-family: 'Anurati', sans-serif;
  letter-spacing: 0.5em;
}

footer {
  opacity: 50%;
}

.text-center {
  text-align: center;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

/* animations */
.slide-in-right {
  animation-name: slide-in-right;
  animation-duration: 1s;
  margin-right: 10vw;
  margin-left: -10vw;
}

@keyframes slide-in-right {
  0% {
      margin-right: 100vw;
  }
  100% {
      margin-right: 10vw;
  }

}

.slide-in-left {
  animation-name: slide-in-left;
  animation-duration: 1s;
  margin-left: 0vw;
}

@keyframes slide-in-left {
  0% {
      margin-left: 100vw;
  }
  100% {
      margin-left: 0vw;
  }

}

.slide-in-up {
  animation-name: slide-in-up;
  animation-duration: 1s;
  margin-top: 0vh;
}

@keyframes slide-in-up {
  0% {
      margin-top: 100vh;
  }
  100% {
      margin-top: 0vh;
  }
}

.slide-in-down {
  animation-name: slide-in-down;
  animation-duration: 0.5s;
  overflow-y: hidden;
  margin-bottom: 0vh;
}

@keyframes slide-in-down {
  0% {
      margin-bottom: 100vh;
  }
  100% {
      margin-bottom: 0vh;
  }
}