/* The colors of the site. Change these values to change the full page. */
:root {
  --color-background: #000000;
  --color-text: #ffffff;
  /* off-white for 'engineering' and 'arts' */
  --color-text-secondary: #9F9B93;
}

/* Remove the default margin of the browser. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Make the page fill the window at all window sizes. */
html,
body {
  height: 100%;
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Put the content in the center, from side to side and from top to bottom. */
main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 0 1rem;
}

/* Make the text larger or smaller with the width of the window.
   The size stays between 2.2rem and 5.5rem. Full line stays
   near 7.3 em, and 11vw keeps the line inside a small screen. */
h1 {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: clamp(2.2rem, 11vw, 5.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  /* The word must stay on one line */
  white-space: nowrap;
}

/* The integral sign of LaTeX. This font file comes from KaTeX */
@font-face {
  font-family: "KaTeX_Size2";
  src: url("fonts/KaTeX_Size2-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  /* The browser shows the fallback sign first, then it changes to this
     font when the file is ready. The text is never invisible. */
  font-display: swap;
}

/* Make integral have more space and slope */
.integral {
  font-family: "KaTeX_Size2", "Times New Roman", Times, serif;
  font-size: 1em;
  line-height: 0;
  vertical-align: 0.01em;
  margin-left: 0.12em;
  margin-right: 0.5em;
}

/* 'engineering' and 'arts' are smaller and less bright than the name
   so that the company name stands out. */
#word.is-secondary {
  font-size: 0.72em;
  color: var(--color-text-secondary);
}

/* The cursor of the typewriter */
#cursor {
  display: inline-block;
  width: 0.08em;
  height: 1.05em;
  background-color: var(--color-text);
  vertical-align: -0.16em;
  margin-left: 0.06em;
  opacity: 0;
}

/* Cursor when it writes or removes letters */
#cursor.is-solid {
  opacity: 1;
}

/* The script puts this class on the cursor between the words.
   The rate is 75 beats each minute. One beat is 800 ms. */
#cursor.is-blinking {
  animation: blink 800ms steps(1, end) infinite;
}

@keyframes blink {
  0%,
  49.99% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* Some users select less movement in the settings of the system. For them
   the page shows the word over only, and the cursor stays hidden. */
@media (prefers-reduced-motion: reduce) {
  #cursor {
    display: none;
  }
  #cursor.is-solid,
  #cursor.is-blinking {
    animation: none;
    opacity: 0;
  }
}