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: 1200px;

  --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;
  overflow: hidden;
  color: white;
}

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

footer {
  opacity: 50%;
}

footer a:hover {
  text-decoration: underline;
}

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

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}


/* help classes */
.text-center {
  text-align: center;
}

.badge {
  display: inline-block;
  background-color: rgba(35,35,35,0.5);
  padding: var(--padding-sm) var(--padding);
  margin: 0 var(--padding-sm);

  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.badge span {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);  
  display: inline-block;
}


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

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

}

.slide-in-left {
  animation-name: slide-in-left;
  animation-duration: 1.2s;
  margin-left: 0vw;
  animation-timing-function: ease-in-out;
}

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

}

.slide-in-up {
  animation-name: slide-in-up;
  animation-duration: 1.4s;
  margin-top: 0vh;
  animation-timing-function: ease-in-out;
}

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

.slide-in-down {
  animation-name: slide-in-down;
  animation-duration: 0.4s;
  overflow-y: hidden;
  top: 0vh;
  animation-timing-function: ease-in-out;
}

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