:root {
  --clr-main: rgb(0, 0, 238);
  --clr-01: rgb(0, 255, 0);
  --clr-02: rgb(255, 0, 0);
  --clr-03: rgb(255, 255, 0);
}

::-moz-selection {
  color: var(--clr-main);
  background: var(--clr-01);
}

::selection {
  color: var(--clr-main);
  background: var(--clr-01);
}

.📛::-moz-selection {
  color: var(--clr-main);
  background: var(--clr-02);
}

.📛::selection {
  color: var(--clr-main);
  background: var(--clr-02);
}

.📬::-moz-selection {
  color: var(--clr-main);
  background: var(--clr-03);
}

.📬::selection {
  color: var(--clr-main);
  background: var(--clr-03);
}

.📬 > a::-moz-selection {
  color: var(--clr-main);
  background: var(--clr-03);
}

.📬 > a::selection {
  color: var(--clr-main);
  background: var(--clr-03);
}

html,
body {
  margin: 0;
  padding: 0;
}

h1,
p,
address {
  margin: 0;
  padding-right: 1rem;

  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 2.5rem;
  letter-spacing: -0.01rem;
  line-height: 1.15;
}

h1 {
  display: inline-block;
}

.🔨 {
  position: absolute;
  inset: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  z-index: -1;
}

.🔨 a {
  display: inline-block;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  transition: transform 500ms ease-out;
}

.🔨 a:hover {
  transform: translateY(-0.425rem);
  transition: transform 50ms ease-in;
}

.📬 {
  position: absolute;
  bottom: 0;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.2;
}

.📬 a {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: transform 150ms ease-out;
}

.📬 a:hover {
  transform: translateX(0.25rem);
  transition: transform 50ms ease-in;
}

.🪛 {
  white-space: nowrap;
}

.🏅 {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 1rem;
  color: rgb(200, 200, 200);
}

canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: block;
}

#p5_loading {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  animation: loading 2000ms linear infinite;
}

img {
  display: block;
}

@keyframes loading {
  0% {
    rotate: 0deg;
  }

  50% {
    rotate: 180deg;
  }

  100% {
    rotate: 360deg;
  }
}

/* Small Screens */
@media only screen and (max-width: 1024px) {
  h1,
  p {
    font-size: 1.75rem;
  }
  .🔨 {
    grid-template-columns: 1fr;
  }
}