body {
  z-index: 1;
}

.content {
  z-index: 2;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: -1;
}

body::before {
  background-image: url(/static/img/background-2160.avif);
}

@media (max-width: 720px) {
  body::before {
    background-image: url(/static/img/background-720.avif);
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  body::before {
    background-image: url(/static/img/background-1080.avif);
  }
}

@media (min-width: 1081px) and (max-width: 1440px) {
  body::before {
    background-image: url(/static/img/background-1440.avif);
  }
}

@media (min-width: 1441px) {
  body::before {
    background-image: url(/static/img/background-2160.avif);
  }
}

@media (prefers-color-scheme: dark) {
  body::before {
    filter: invert(1);
  }
  .social-links img {
    filter: invert(1);
  }
}

.maintitle {
  margin-bottom: 0;
}

.subtitle {
  font-size: 1.1em;
  margin-top: 0;
  margin-left: 0.3em;
}

.social-links {
  margin-top: 1em;
  display: flex;
  gap: 20px;
  align-items: center;
}

.social-links img {
  width: 30px;
  height: 30px;
}

.social-links a,
.social-links a:hover {
  border: none;
}

.text-bold-900 {
  font-weight: 900;
}