:root {
  --auto-suggestion: "temp";
  --tab-hint-display: "block";
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 45px;
  background-color: #1f1f29;
}
@media (min-width: 600px) and (max-width: 799px) {
  body {
    padding: 20px;
  }
}
@media (max-width: 720px) {
  body {
    padding: 15px;
  }
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 2.1rem;
}

h3 {
  font-size: 2rem;
}

h1, h2, h3 {
  margin: 0;
  font-family: monospace;
  color: #fff;
}

#faux-input {
  position: fixed;
  bottom: 0;
  left: 0;
  opacity: 0;
  height: 0;
  width: 0;
}

main {
  display: grid;
  gap: 30px;
  max-width: 162ch;
}
main p, main ul {
  margin: 0;
  font-family: monospace;
  font-size: 1.8rem;
}
main p {
  color: #8bd3ea;
}
main p.date {
  font-style: italic;
}
main p.phone {
  display: none;
  color: #fff;
  margin: 10px 0;
}
@media (max-width: 720px) {
  main p.phone {
    display: block;
  }
}
main ul, main a {
  color: #fff;
}
main .cmd {
  text-decoration: underline;
  cursor: pointer;
}
main .bg {
  color: #1f1f29;
  background-color: #8bd3e9;
  padding: 3px 8px;
  max-width: max-content;
  margin-bottom: 5px;
}
main .ls {
  display: grid;
  align-items: center;
  row-gap: 2px;
  column-gap: 20px;
  grid-template-columns: repeat(4, max-content);
}
@media (max-width: 720px) {
  main .ls {
    grid-template-columns: unset;
  }
}
main .ls .path {
  text-decoration: underline;
}
main .ls .file {
  color: #fff;
}
main .orange {
  color: #fa9758;
}
main .cl {
  display: flex;
  position: relative;
  align-items: center;
}
main .cl .overlap {
  color: #1f1f29;
}
main .cl .text {
  z-index: 1;
}
main .cl .block {
  position: absolute;
  left: 100%;
  width: 12px;
  height: 20px;
  background-color: #fff;
  z-index: 0;
}
main .faux-div {
  position: absolute;
  visibility: hidden;
  max-width: max-content;
  top: 0;
  left: 0;
}
main .indent {
  padding-left: 30px;
}
main .input {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
main .input.active .text.suggestion:before {
  display: var(--tab-hint-display);
  content: "tab";
  position: absolute;
  left: 100%;
  margin-left: 10px;
  font-size: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: #a3b2b8;
  border-radius: 7px;
  padding: 2px;
  color: #545353;
}
main .input.active .text.suggestion:after {
  content: var(--auto-suggestion);
  color: #727272;
}
main .grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 20px;
  align-items: center;
}
@media (max-width: 720px) {
  main .grid {
    gap: 10px;
  }
  main .grid img {
    width: 140px;
  }
}
main .response {
  display: grid;
  gap: 30px;
}
main .response .quick-cmd {
  display: flex;
  gap: 5px;
  align-items: center;
}
main .response .quick-cmd p {
  color: #fff;
}
main .response .quick-cmd .quick {
  text-decoration: underline;
  background-color: #fa9758;
  max-width: max-content;
  padding: 6px 10px;
  border-radius: 7px;
  color: #1f1f29;
}
main .contents {
  display: grid;
  gap: 25px;
}
main .contents img {
  max-width: min(161ch, 100vw - 90px);
}
@media (min-width: 600px) and (max-width: 799px) {
  main .contents img {
    max-width: min(161ch, 100vw - 40px);
  }
}
@media (max-width: 720px) {
  main .contents img {
    max-width: min(161ch, 100vw - 40px);
  }
}
main .contents blockquote {
  border-left: 4px solid #fff;
  margin-inline-start: 0;
  padding-left: 20px;
}
main .contents pre {
  max-width: min(161ch, 100vw - 90px);
}
@media (min-width: 600px) and (max-width: 799px) {
  main .contents pre {
    max-width: min(161ch, 100vw - 40px);
  }
}
@media (max-width: 720px) {
  main .contents pre {
    max-width: min(161ch, 100vw - 40px);
  }
}
main .contents pre {
  padding: 8px 0;
  overflow-x: scroll;
  color: #fff;
}
main .contents pre code {
  font-size: 1.6rem;
}

/*# sourceMappingURL=global.css.map */