@import url("https://fonts.googleapis.com/css2?family=Rubik+Distressed&display=swap");

body {
  background-color: black;
  --red: #c90707ff;
  --hot-pink: #f54c9aff;
  --hot-orange: #fc6028ff;
  --neon-yellow: #f0ee05ff;
  --neon-green: #3efe49ff;
  --blue: #1b6fb0ff;
}

h1 {
  font-family: "Rubik Distressed";
  text-decoration: 10px var(--red) underline;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  z-index: 1;
  margin-bottom: -10px;
}

h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.07em;
  height: 0.1em;
  width: 100%;
  background: linear-gradient(
    110deg,
    var(--hot-pink),
    var(--hot-orange),
    var(--neon-yellow),
    var(--neon-green),
    var(--blue)
  );
  z-index: -1;
  transition: height 0.25s cubic-bezier(0.6, 0, 0.4, 1);
}

h1:hover::after {
  height: 0.5em;
}

img#background {
  position: absolute;
  left: 50%;
  margin-left: -256px;
  z-index: -9;
}

#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 99vh;
}

#maincontent {
  width: 350px;
  height: 280px;
  padding: 30px;
  background-color: white;
}

#house-webring {
  margin-top: -10px;
  background-color: black;
  padding: 10px;
}

#backlink,
#nextlink {
  color: white;
  padding: 5px;
  font-family: sans-serif;
}

#backlink:hover {
  background-color: var(--hot-pink);
  color: black;
}

#nextlink:hover {
  background-color: var(--neon-yellow);
  color: black;
}