html {
  --musky_font_family: 'Sofia Sans Condensed';
  --musky_link_color: #ffef5d;
  --musky_gray_back: #0c0c0c;
  --musky_border_radius: 6px;

  background-color: black;
  background-image: url(/images/bg.png);
  background-repeat: repeat;
  background-position: 50% 0;
  animation: scrollbg 20s linear infinite;

  font-family: var(--musky_font_family);
  font-size: 145%;
  color: #ffbb2f;

  text-align: center;

  text-shadow: 0px 10px 20px #f21474;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

a {
  color: var(--musky_link_color);
}

.main-column {
  margin: auto;
  max-width: 800px;
}

.banner {
  text-align: center;
  margin-bottom: 20px;
}

.banner-image {
  max-width: 100%;
}

.pfp-column {
  margin-bottom: 50px;
}

.pfp-text {
  margin: auto;
  line-height: 20%;
}

.pfp-image {
  border-radius: 50%;
  border: solid black 2px;
  box-shadow: 0px 0px 60px #f21474;
}

.links {
  line-height: 220%;
}

.link-button {
  display: block;
  position: relative;
  width: 50%;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 50px;
  background: rgba(95, 3, 120, 0.9);
  border: solid black 2px;
  transition: 0.3s ease;
  text-decoration: none;
}

.link-button img {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 1rem;
}

.link-button:hover {
  background: rgba(145, 7, 143, 0.9);
  box-shadow: 0px 5px 40px #f21474;
  transform: scale(110%) rotate(-2deg);
  text-decoration: underline;
}

.footer {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(0, 0, 20, 0.9);
  box-shadow: 0px 10px 40px #f21474;
}

.bobber {
  animation: sinebob 3s ease-in-out infinite;
}

@keyframes sinebob {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-8px) }
}

@keyframes scrollbg {
  from { background-position: 0 0; }
  to { background-position: 512px 256px; }
}