@font-face {
  font-family: "Gap";
  src: url("./fonts/GapSansBold.ttf");
}
@font-face {
  font-family: "Faune";
  src: url("/Faune-Display_Bold_Italic.woff");
}
html body {
  margin: 0;
  padding: 0;
  pointer-events: none;
  height: 100%;
  max-width: 100%;
  background-color: rgb(221, 225, 255);
}
.body {
  pointer-events: all;
  z-index: 10;
  position: absolute;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: fit-content;
  padding: 5rem;
  text-align: center;
}
.body mark {
  background-color: rgb(221, 225, 255);
}
#bg {
  pointer-events: none;
  height: 620vh;
}
#background-creatures {
  display: grid;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-rows: auto;
  grid-auto-columns: auto auto auto auto;
  grid-template-areas: "branchy branchy branchy funk";
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
#bg * {
  pointer-events: none;
}
#background-creatures div {
  position: relative;
}
img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
#branchy {
  grid-area: branchy;
}
#branchy img {
  transform: rotate(90deg) scale(2);
  position: absolute;
  left: 15%;
  bottom: 20%;
  z-index: -8;
}
#funk {
  grid-area: funk;
}
#funk img {
  transform: rotate(-90deg) scale(3);
  position: absolute;
  right: 4rem;
  top: 40%;
}
body {
  font-family: 'Faune';
}
h1 {
  font-size: 3rem;
}
a {
  color: fuchsia !important;
}