@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Unbounded:wght@200..900&display=swap");
html, body {
  font-family: "Outfit", sans-serif;
  position: relative;
  margin: 0;
  padding: 0;
}
html p, body p {
  margin: 0;
  font-family: "Outfit", sans-serif;
}
html .notice, body .notice {
  background: rgba(255, 83, 156, 0.85);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  padding: 1rem;
  position: absolute;
  top: 0;
  z-index: 9999;
  width: 100%;
}
html .notice *, body .notice * {
  z-index: 1;
}
html .notice::after, body .notice::after {
  background-image: url(../images/grain.jpg);
  mix-blend-mode: multiply;
  opacity: 0.125;
  filter: invert(1);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  content: "";
}
html .notice .notice--text, body .notice .notice--text {
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  animation-name: noticetext;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes noticetext {
  0% {
    color: rgba(255, 255, 255, 0.6);
  }
  50% {
    color: white;
  }
  100% {
    color: rgba(255, 255, 255, 0.6);
  }
}
html .header, body .header {
  width: 100%;
  background: #000;
  overflow: hidden;
  position: relative;
  padding: 10rem 0rem 10rem 0rem;
}
html .header .container, body .header .container {
  padding: 20px;
  z-index: 1;
}
html .header .container img, body .header .container img {
  margin: 0 auto;
  display: block;
  max-height: 15rem;
  height: auto;
  width: auto;
  max-width: 100%;
}
html .header .container .modpack-version, body .header .container .modpack-version {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.125em;
}
html .header .container .modpack-version span, body .header .container .modpack-version span {
  color: white;
  font-weight: 400;
}
html .header img.background-image, body .header img.background-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  filter: blur(20px);
  opacity: 0.6;
}
@media screen and (max-width: 769px) {
  html .header img.background-image, body .header img.background-image {
    height: 200vh;
    width: 200vw;
    top: -50%;
  }
}

.button {
  padding: 0.5rem 2rem;
  border: 2px solid white;
  border-radius: 4rem;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-family: "Outfit", sans-serif;
}
.button.invert {
  background: white;
  color: #121833;
}
.button.dark {
  color: #121833;
  border-color: #121833;
}
.button.dark-invert {
  color: white;
  border-color: #121833;
  background: #121833;
}

h1, h2, h3 {
  font-weight: 600;
  color: #121833;
}

.teaser {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.teaser img {
  border-radius: 0.5rem;
}

.install {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.install .container {
  background: rgba(3, 125, 128, 0.125);
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-radius: 0.5rem;
}
.install .step {
  padding: 2rem;
  background: white;
  border-radius: 0.5rem;
}

.update {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.update .container {
  background: rgba(255, 83, 156, 0.125);
  padding-top: 4rem;
  padding-bottom: 4rem;
  border-radius: 0.5rem;
}
.update .changelog {
  background: rgba(255, 255, 255, 0.5);
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: Menlo, Consolas, "Courier New", monospace;
}
.update .step {
  padding: 2rem;
  background: white;
  border-radius: 0.5rem;
}/*# sourceMappingURL=style.css.map */