@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
  background-color: black;
  color: white;
  padding-bottom: 70vh;
}

.yuki-terminal {
  font-family: 'VT323', monospace;
  font-variant-ligatures: none;
  line-height: 1;
  font-size: 25px;
}

.yuki-terminal .cursor {
  animation-name: blink;
  animation-duration: 500ms;
  animation-timing-function: steps(2, jump-none);
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

a {
  color: rgb(75, 145, 223);
  transition: none;
}

a:hover {
  color: rgb(150, 194, 242);
}

.yuki-terminal > span.choice {
  opacity: 0.7;
  border-bottom: 2px solid rgba(200, 200, 200, 0.0);
  transition: opacity 200ms, border-bottom-color 200ms;
  cursor: pointer;
  display: inline-block;
}

.yuki-terminal > span.choice:not(.disabled):hover, .yuki-terminal > span.choice:not(.disabled):focus, .yuki-terminal > span.choice.chosen {
  opacity: 1;
  border-bottom-color: rgba(200, 200, 200, 0.5);
}

.yuki-terminal > span.choice.disabled {
  cursor: not-allowed;
}
.yuki-terminal > span.choice.disabled:not(.chosen) {
  opacity: 0.7;
}

.yuki-terminal img {
  max-width: 100%;
}

.yuki-terminal input[type="text"] {
  border: none;
  background-color: transparent;
  color: white;
  font-size: 25px;
  font-family: 'VT323', monospace;
  width: 100%;
  padding: 0;
  margin: 0;
  border-bottom: solid 2px rgba(255, 255, 255, 0.5);
  outline: none;
}

.yuki-terminal input[type="text"]:focus {
  border-bottom-color: white;
}

.yuki-terminal > .li-like {
  display: block;
  padding-left: 20px;
}

.yuki-terminal > .li-like::before {
  content: "-";
  margin-left: -20px;
  width: 20px;
}