html, body, .screens {
  width: 100%;
  height: 100%;
  overflow: clip;
}

body {
  background-color: #181818;
  color: #fff;
  margin: 0;
}

body, input {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
}

h3 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 400;
}

.screens > * {
  position: absolute;
  width: 100%;
  height: 100%;
}

.screens *.enterFromRight {
  animation: 300ms ease-out 0s 1 normal enterFromRight;
  animation-fill-mode: forwards;
}

@keyframes enterFromRight {
  from {
    transform: translateX(100%);
  }
}

.screens *.enterFromLeft {
  animation: 300ms ease-out 0s 1 normal enterFromLeft;
  animation-fill-mode: forwards;
}

@keyframes enterFromLeft {
  from {
    transform: translateX(-100%);
  }
}

.screens *.exitToLeft {
  animation: 300ms ease-out 0s 1 normal exitToLeft;
  animation-fill-mode: forwards;
}

@keyframes exitToLeft {
  to {
    transform: translateX(-100%);
  }
}

.screens *.exitToRight {
  animation: 300ms ease-out 0s 1 normal exitToRight;
  animation-fill-mode: forwards;
}

@keyframes exitToRight {
  to {
    transform: translateX(100%);
  }
}