body {
  background: white;
  color: #28282B;
  font-family: sans-serif;
}

/* ---- scrollbars -------------------------------------------------------
 *
 * THE SCROLLBAR IS PART OF THE THEME. These colours used to be written
 * here as literals — a near-black thumb on a dark grey track — so every
 * site on this base wore the same dark scrollbar whatever palette it
 * had chosen, and a light theme got a black bar down its edge. The
 * --color-scrollbar-* tokens have been in variables.css the whole time
 * and nothing read them; this reads them. A site themes its scrollbars
 * by restating those four tokens per theme, as it does every other
 * colour. The fallbacks are the old literals, so a page that loads
 * main.css without variables.css looks exactly as it did.
 *
 * THE ARROW BUTTONS ARE GONE, and that is the one deliberate change of
 * appearance here. Their arrows were background-image data: URIs with
 * the colour written inside the SVG source, where no custom property
 * can reach — so they were the one part of the bar that could not
 * follow the theme however the rest was written, and they would have
 * stayed dark grey on a cream page. Neither Chrome's own scrollbar nor
 * any current platform's has them.
 */

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: var(--color-scrollbar-track, rgb(64, 64, 64));
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
  background-color: var(--color-scrollbar-track, rgb(64, 64, 64));
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb, #28282B);
  /* The border is the inset: clipping the background to the padding box
   * keeps the thumb clear of the track's edges without a second colour
   * to keep in step. (A `box-shadow: 0 0 0 0` sat here for years,
   * drawing a shadow of no size in a colour no theme could reach.) */
  background-clip: padding-box;
  border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-thumb-hover, rgb(112, 112, 112));
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--color-scrollbar-thumb-active, rgb(128, 128, 128));
}

::-webkit-scrollbar-button {
  display: none;
}

/* Firefox has none of the above. It gets the standard two-colour form
 * instead — guarded, because where ::-webkit-scrollbar IS supported
 * `scrollbar-color` wins over it and would throw away everything above.
 * `scrollbar-color` is INHERITED, which is the point of putting it on
 * the root: it is the one scrollbar declaration that crosses a shadow
 * boundary, so components' own scroll boxes are themed by it too. */
@supports not selector(::-webkit-scrollbar) {
  :root {
    scrollbar-color: var(--color-scrollbar-thumb, #28282B) var(--color-scrollbar-track, rgb(64, 64, 64));
  }
}

/* about page */

.background-2 {
  padding-top: 3em;
  padding-bottom: 3em;
  text-align: center;
}

.background-2-1 {
  padding-bottom: 3em;
  text-align: center;
}

@media (min-width: 768px) {
  .contact-form {
    width: 350px;
  }

  .background-2-1 {
    font-size: 1.2em !important;
  }
}

.numbertext {
  font-size: 1.2em;
  padding: 0.8em 1.2em;
  position: absolute;
  top: 0;
}

.background {
  padding-top: 4.5em;
  padding-bottom: 4.5em;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

@media (max-width: 600px) {
  .background {
    min-height: 35vh;
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 1200px) {
  .background {
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 12450px) {
}

@media (max-width: 992px) {
  .background {
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 768px) {
  .background {
    background-size: cover;
    background-position: center;
  }
}

.fadeout {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.invisible {
  opacity: 0;
  display: none;
}

.hide {
  display: none;
}