/* mess */

:root {
  --text-0: rgb(255, 255, 255);
  --text-1: rgb(223, 223, 223);
  --text-2: rgb(180, 180, 180);
  --bg-0: rgb(16, 16, 16);
  --bg-1: rgb(24, 24, 24);
  --bg-2: rgb(32, 32, 32);
  --border-0: rgb(24, 24, 24);
  --border-1: rgb(32, 32, 32);
  --border-2: rgb(48, 48, 48);
}

body {
  background-color: var(--bg-0);
  font-family: "AzeretMono", monospace, system-ui;
  color: var(--text-0);
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden; /* modern problems require dumb solutions */
}

::selection { color: var(--bg-0); background-color: var(--text-0); }

h1 {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size:large;
  opacity: 0.80;
}

h1 img {
  width: 1.25em;
}

h2 {
  font-size: 3em;
  margin: 0;
  font-family: "AzeretMono";
  font-weight: 700;
  letter-spacing: 1px;
}

h3 {
  font-size: 2em;
  margin: 0;
}

p {
  color: var(--text-2);
}

a {
  color: var(--text-0);
}

.left {
  width: 650px;
  animation-delay: .5s;
  animation: header-left-anim 1.1s cubic-bezier(0.535, 0.325, 0.1, 1);
}

header {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  animation: blur-out 1s cubic-bezier(0.535, 0.325, 0.1, 1);
}

.art {
  max-height: 35em;
  /* filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, .35)); */
  animation: 
      infinite alternate comfy-glow 5s cubic-bezier(0.535, 0.325, 0.1, 1),
      header-right-anim 1s;
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 10px;
  justify-content: left;
  padding: 0;
  pointer-events: none;
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 12px 16px;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  text-decoration: none;
  font-weight: bold;
  pointer-events: all;
  transition: .25s cubic-bezier(0.4, -1, 0.5, 2.8);
  position: relative;
  /* transition: mtf; */
}

.link-list a span {
  position: absolute;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  top: 100%;
  transition: .35s cubic-bezier(0.4, -1, 0.5, 2);
}

.link-list a:hover {
  filter: invert(1);
  scale: 1.05;
  box-shadow: 0 0 5px 0 var(--bg-0);
  z-index: 2;
 animation: wobble .3s cubic-bezier(0.4, -1, 0.5, 1);
}

.link-list a:hover:nth-child(even) {
  animation-direction: reverse;
}

.link-list a:hover::before {
    content: "";
    position: absolute;
    inset: -10px
}

.link-list a:hover span {
  color: var(--bg-0);
  opacity: 1;
  z-index: 10;
  top: 120%;
  text-shadow: 0px 0px 10px var(--bg-0);
  animation: wobble .3s cubic-bezier(0.4, -1, 0.5, 2);
}

.link-list:hover a:not(:hover, span) {
  opacity: 0.35;
  transition-timing-function: cubic-bezier(0, -1, 0.5, 1);
}

.inactive {
  opacity: 0.6;
  cursor: not-allowed;
}

.link-list img {
  height: 2ch;
  width: 2ch;
  fill: var(--text-0);
}

footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: var(--bg-1);
  padding: 20px;
}

.footer-main {
  display: flex;
  column-gap: 20px;
  flex-wrap: wrap;
}

.footer-buttons a img {
  transition: .35s cubic-bezier(0.075, 0.82, 0.165, 1);
  max-width: 88px;
}

.footer-buttons a img:hover {
 scale: 1.2;
}