@keyframes cursor {
  0% {
    background-color: transparent;
  }

  30% {
    background-color: rgb(0, 233, 233);
  }

  90% {
    background-color: transparent;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
}

:root {
  --blue: #5691a9;
  --orange: #e57e27;
  --yellow: #eee89d;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 18px;
  font-family: "Ubuntu Mono";

  background-color: #0b0b0bea;
  margin: 50px 75px;
}

pre {
  color: var(--blue);
  margin: 0;
  font-size: 14px;
  display: inline-block;
}

#banner>p {
  margin-top: 0;
  color: var(--orange);
}

li {
  color: var(--yellow);
}

a {
  text-decoration: none;
}

#typer,
.typer {
  color: var(--yellow);
}

.res {
  color: var(--blue);
}

.cursor {
  animation-name: cursor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#terminal {
  left: -10000px;
  position: absolute;
}

#terminal-section {
  margin: 18px 0px;
}

.terminal-text {
  color: var(--orange);
}

.command {
  color: var(--yellow);
}

.m-1 {
  margin: 4px !important;
}

a:hover {
  background-color: rgb(0, 233, 233);
  color: white;
}

/**
* orange: #e57e27
* blue: #78bed9

*/
@media (max-width: 568px) {
  pre {
  display: block;
  }
}