:root {
  /* Primary */
  --primary-shade: #31d547;

  /* Secondary */
  --secondary-shade: #0cb277;

  /* Neutral */
  --neutral-shade: #070707;

  /* Success */
  --success-shade: #6cce1d;

  /* Caution */
  --caution-shade: #d49525;

  /* Danger */
  --danger-shade: #f6120d;

  /* Info */
  --info-shade: #2d1be6;
}

@font-face {
  font-family: GrinchedRegular;
  src: url("resources/GrinchedRegular.otf") format("opentype");
}

@font-face {
  font-family: Pixeboy;
  src: url("resources/Pixeboy.ttf") format("truetype");
}

html,
body {
  height: 100vh;
  font-family: Pixeboy;
  margin: 0;
  padding: 0;
  background: green;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  font-family: inherit;
  font-size: 2em;
  margin: 5px;
  padding: 10px 20px;
  background-color: var(--secondary-shade);
  border-color: black;
  border-style: solid;
  border-radius: 5px;
  cursor: pointer;
  max-width: 40vw;
  z-index: 999;
}

.fill {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#noise {
  height: 100vh;
  width: 100vw;
  background: radial-gradient(at top center, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
    url(/resources/noise.svg);
  filter: contrast(145%) brightness(20000%) invert(100%);
  /* mix-blend-mode: color-dodge; */
}

#noise2 {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: radial-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)),
    url(/resources/noise.svg);
  filter: contrast(145%) brightness(20000%) invert(100%);
}

#title {
  font-family: GrinchedRegular;
  width: 100%;
  text-align: center;
  font-size: 128px;
  color: var(--secondary-shade);
  -webkit-text-stroke: 2px black;
  text-stroke: 2px black;
  z-index: 999;
}

#sketch {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#titleScreen {
  display: none;
}

#pauseMenu {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#pauseMenu > * {
  text-align: center;
  z-index: 9999;
}

#pauseMenu > h1 {
  font-size: 4rem;
}

#tree0 {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  transform: scale(5);
  position: absolute;
  bottom: 0;
  left: 0;
}

#tree2 {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  transform: scale(5);
  position: absolute;
  bottom: 0;
  left: 40vw;
}

#tree1 {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  transform: scale(4);
  position: absolute;
  bottom: 0;
  right: 0;
}

#p5_loading {
  text-align: center;
  font-size: 8rem;
}

input {
  z-index: 2;
}