/* font */
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.woff2");
}

/* defaults */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

html {
  color: #eee;
  font-family: "JetBrains Mono";
  font-size: 1px;
  line-height: 1.5;

  background-color: #1e1e1e;

  /* variables */
  --clr-green: #55ff55;
  --clr-cyan: #55ffff;
  --clr-magenta: #ff55ff;

  @media (max-width: 500px) {
    font-size: 0.8px;
  }
}

body {
  padding: 5rem;

  font-size: 16rem;
}

h1,
h2 {
  font-size: 16rem;
  font-weight: 400;

  opacity: 0;
}

h1::before {
  content: "# ";
}

h2::before {
  content: "## ";
}

a:not(.dir) {
  color: var(--clr-cyan);
}

ol {
  list-style-position: inside;
}

li {
  opacity: 0;
}

/* utility */
.u-no-underline {
  text-decoration: none;
}

.u-mt {
  margin-top: 1.5em;
}

.u-pad {
  padding-left: 15rem;
}

/* nav */
.nav {
  column-gap: 3em;
  display: flex;
  flex-flow: row wrap;

  list-style-type: none;

  li {
    width: max-content;
  }
}

/* terminal lines */
hgroup {
  color: var(--clr-green);
}

p {
  opacity: 0;
}

.show {
  opacity: 1;
}

p:empty::before {
  content: " ";
  white-space: pre;
}

/* animation */
.cursor {
  animation: blink 1.2s steps(2) infinite;
}

@keyframes blink {
  0% {
    visibility: hidden;
  }
}