@font-face {
  font-family: "TX-02";
  src: url("TX-02-Variable.woff2") format("woff2");
}

html {
  font-family: "TX-02", monospace;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  place-items: center;
  width: 100vw;
}

pre {
  background-color: #000;
  color: #fff;
  font-family: "TX-02", monospace;
  font-size: 2rem;
  font-weight: 300;
  margin: 0;
  max-width: 600px;
  padding: 2rem;
  width: 90vw;
}

pre header {
  font-size: 2.5rem;
  line-height: 1.2;
}

pre header .mountain {
  letter-spacing: -1px;
}

pre main {
  line-height: 1.2;
  margin-top: -1rem;
  margin-bottom: -1rem;
}

pre main #slopes-img {
  margin: 0 20px;
  max-height: 0;
  max-width: 80%;
  opacity: 0;
  overflow: hidden;
  transition: margin 0.2s, max-height 0.5s, opacity 0.5s;
}

pre main #slopes-img.show-img {
  height: auto;
  margin: 20px;
  max-height: 800px;
  opacity: 1;
}

pre footer {
  font-size: 1rem;
}

@media (max-width: 600px) {
  pre {
    padding: 1rem;
    width: 100vw;
  }

  pre header {
    font-size: 1.75rem;
  }

  pre main {
    font-size: 1.25rem;
  }

  pre footer {
    font-size: .9rem;
  }
}

a,
a:active,
a:visited,
a:hover {
  cursor: pointer;
  text-decoration: none;
}

#white,
pre.white,
pre.white a,
pre.white a:active,
pre.white a:visited {
  color: #fff;
}

pre.white a:hover {
  color: #ccc;
}

pre.white img {
  filter: none;
}

#blue,
pre.blue,
pre.blue a,
pre.blue a:active,
pre.blue a:visited {
  color: #9df;
}

pre.blue a:hover {
  color: #6ac;
}

pre.blue img {
  filter: brightness(75%) sepia(100%) hue-rotate(165deg) saturate(250%) contrast(90%) grayscale(25%);
}

#green,
pre.green,
pre.green a,
pre.green a:active,
pre.green a:visited {
  color: #6f6;
}

pre.green a:hover {
  color: #3c3;
}

pre.green img {
  filter: brightness(80%) sepia(100%) hue-rotate(70deg) saturate(300%) contrast(90%);
}

#amber,
pre.amber,
pre.amber a,
pre.amber a:active,
pre.amber a:visited {
  color: #ffb400;
}

pre.amber a:hover {
  color: #cc8100;
}

pre.amber img {
  filter: brightness(75%) sepia(100%) hue-rotate(345deg) saturate(480%) contrast(95%)
}

#rgb-red,
pre.rgb-red,
pre.rgb-red a,
pre.rgb-red a:active,
pre.rgb-red a:visited {
  color: #f00;
}

pre.rgb-red a:hover {
  color: #c00;
}

pre.rgb-red img {
  filter: brightness(80%) sepia(100%) hue-rotate(315deg) saturate(500%);
}

#rgb-green,
pre.rgb-green,
pre.rgb-green a,
pre.rgb-green a:active,
pre.rgb-green a:visited {
  color: #0f0;
}

pre.rgb-green a:hover {
  color: #0c0;
}

pre.rgb-green img {
  filter: brightness(70%) sepia(100%) hue-rotate(90deg) saturate(450%);
}

#rgb-blue,
pre.rgb-blue,
pre.rgb-blue a,
pre.rgb-blue a:active,
pre.rgb-blue a:visited {
  color: #00f;
}

pre.rgb-blue a:hover {
  color: #00c;
}

pre.rgb-blue img {
  filter: brightness(80%) sepia(100%) hue-rotate(180deg) saturate(500%);
}