/* Page background */
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #0b0b0c;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
}

.term-container {
  /* size and position */
  width: min(1600px, calc(100vw - 60px));
  height: calc(100vh - 60px);
  height: calc(100svh - 60px);
  background: #121213;
  position: relative;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.7),
    0 2px 0 rgba(255, 255, 255, 0.03) inset;

  padding: 34px 42px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.term-container::before {
  content: "";
  display: block;
  height: 18px;
  margin: -34px -42px 22px;
  background: rgba(255, 255, 255, 0.06);
}

/* Terminal text */
.term {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
  font-size: clamp(14px, 2.8vw, 17px);

  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  color: rgba(255, 255, 255, 0.55);
}

.term-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  body {
    align-items: stretch;
    justify-content: center;
  }

  .term-container {
    width: 100vw;
    height: calc(100vh - 24px);
    height: calc(100svh - 24px);
    border-radius: 12px;
    padding: 22px 20px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .term-container::before {
    height: 12px;
    margin: -22px -20px 16px;
  }
}

.user {
  color: #099ef4;
}
.path {
  color: #ffb454;
}
.t-dim {
  color: rgba(255, 255, 255, 0.55);
}

.link {
  color: #7aa2f7;
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}

/* Cursor */
.cursor::after {
  content: "▌";
  animation: tblink 1s steps(1) infinite;
  color: rgba(255, 255, 255, 0.85);
}
@keyframes tblink {
  50% {
    opacity: 0;
  }
}