styles.css

body,
html {
  background-color: black;
}


@keyframes enter_bottom {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

.animate-enter-bottom {
  animation: enter_bottom 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes ease_in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.ease-in {
  animation: ease_in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.delayed {
  animation-delay: 1s;
}

/* preformatted code */

pre a {
  font-style: normal;
  font-weight: bold;
  color: #8888ff;
}

pre code {
  background: #44444444;
  color: #66bbff;
  border-color: #777777;
  padding: 3px 5px;
  border-radius: 0.2rem;
}

pre {
  white-space: pre-wrap;
}

.num {
  color: #ff9e64
}

.cls {
  color: #f7768e;
}

.op {
  color: #ccccff;
}

.var {
  color: #7dcfff;
}

.str {
  color: #9ece6a;
}

.bind {
  color: #bb9af7;
}

.control {
  color: #bb9af7;
  font-weight: bold;
}

.comments {
  color: #555555;
}