@font-face {
  font-family: "Neuton";
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/Neuton-Regular.ttf);
}

@font-face {
  font-family: "Chicago";
  font-style: normal;
  font-display: swap;
  src: url(/assets/fonts/ChicagoFLF.ttf);
}

:root {
  --font-display: "Neuton", serif;
  --font-code: "Chicago", monospace;

  --text-primary: #1d2433;
}

body {
  max-width: 672px;
  padding-left: 24px;
  padding-right: 24px;
  margin: 0 auto;

  /* background-color: #f9efe4; */
  background: url("/assets/images/static.png") #f9efe4;
  background-repeat: repeat;

  color: var(--text-primary);

  font-family: var(--font-display);

  font-size: 20px;
  line-height: 30px;
}

header {
  margin-top: 64px;
}
main {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
footer {
  margin-top: 64px;
  margin-bottom: 32px;
}

button {
  border: 1px solid black;
  border-radius: 4px;
  padding: 8px 0;

  font-family: var(--font-code);
  font-size: 16px;
  line-height: 24px;

  background: transparent;
  cursor: pointer;

  transition: transform 150ms, box-shadow 150ms;
  box-shadow: 0 0 0 0 black;
}
button:hover {
  outline: none;
  box-shadow: 2px 2px 0 0 black;
  text-decoration: underline;
}
button:active {
  transform: translateX(1px) translateY(1px);
  box-shadow: 1px 1px 0 0 black;
}
button.btn--full {
  width: 100%;
}

a {
  display: inline-block;
  appearance: none;
  text-decoration: none;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: unset;
}

h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 60px;
  margin: 0;
}

p {
  margin: 0;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.window {
  border: 1px solid black;

  font-family: var(--font-code);
  font-size: 16px;
  line-height: 24px;
}
.window__body {
  padding: 4px;
  overflow: auto;
}
.window__body--no-wrap {
  white-space: nowrap;
}
.window__body--no-copy {
  cursor: not-allowed;
  user-select: none;
}
.window__body--gap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.window__title-bar {
  border-bottom: 1px solid black;
  padding: 4px;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;

  white-space: nowrap;
}
.window__title-bar--lines {
  height: 11px;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.window__title-bar--lines span {
  background-color: black;
  display: block;
  height: 1px;
}

.disclaimer {
  font-size: 14px;
}