/* deafult styling */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
  background-color: #100F0F;
  background-image: url("28gang-normal-infinity-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  overflow-x: hidden;
}

/* deafult styling */



/* primary styling */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: left;
  width: 100%;
  height: max-content;
  padding: 1rem;
  color: white;
  font-size: 28px;
  font-weight: bolder;
  font-family: "Inter", sans-serif;
  text-shadow: #ffffff28 0 0 20px;
}

.site-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: right;
  width: 100vw;
  height: max-content;
  padding: 0.5rem;
  color: white;
  font-family: "Jersey 25", serif;
  margin-right: 0.28rem;
}

main {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-items: center;
  align-items: center;
  flex-flow: column;
  height: 100%;
  flex-flow: column;
  align-items: center;
}

/* primary styling */



/* secondary styling */
.button-container {
  display: flex;
  gap: 2rem;
  margin-bottom: auto;
  padding-top: 4rem;

  &>button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.42rem;
    background-color: transparent;
    color: #D74E3F;
    border-radius: 6px;
    border: solid #D74E3F 0.2rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: bolder;
    cursor: pointer;
    min-width: 228px;
    transition: transform 0.041s ease-in, scale 0.082s ease-in, box-shadow 0.041s ease-in, color 0.082s ease-in;
    box-shadow: 0 0 0 1px #ffffff0d, 0 8px 32px #00000080;

    &:hover {
      transform: translateY(-5%);
      scale: 1.05;
      box-shadow: 0 0 16px #D74E3F50, 0 0 28px #000;
    }

    &:active {
      transform: translateY(-3%);
      scale: 1.028;
    }

    &>img {
      height: 1.25rem;
      width: auto;
    }
  }
}

.title-container {
  overflow: visible;
  display: flex;
  flex-flow: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding-bottom: 4rem;

  &>h1,
  h2 {
    color: white;
    margin: 0;
    padding: 0;
  }

  &>h1 {
    font-family: "DM Mono", monospace;
    font-weight: 500;
    font-size: 7.2rem;
    width: max-content;
    filter: drop-shadow(0 0 24px #c025ff28);
  }

  &>h2 {
    font-family: "Inter", sans-serif;
    font-weight: bold;
    letter-spacing: 6rem;
    font-size: 3rem;
    transform: translateX(3rem) translateY(-1.5rem);
  }
}


.paragraph-container {
  display: flex;
  flex-flow: column;
  width: max-content;
  transform: translateY(-2.25rem);

  &>p {
    color: white;
    letter-spacing: 0.28rem;
    font-size: 1.4rem;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-style: normal;
  }
}

.paragraph-container-mobile {
  display: none;
}

.paragraph-container-extra-mobile {
  display: none;
}

/* secondary styling */


/* responsive styling 360px -> 420px */
@media (max-width: 420px) {
  .site-header {
    justify-content: center;
    font-size: 1rem;
  }

  .site-footer {
    justify-content: center;
    font-size: 0.75rem;
  }


  .button-container {
    transform: scale(75%);
    flex-flow: column;
    gap: 2rem;
    padding-top: 3rem;

    &>button {
      gap: 0.42rem;
      background-color: #130F13;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: 0.65rem;
      padding-bottom: 0.65rem;
      font-size: 1rem;
    }
  }

  .title-container {
    padding-bottom: 3rem;

    &>h1 {
      font-size: 2.28rem;
      filter: drop-shadow(0 0 24px #c025ff28);
    }

    &>h2 {
      letter-spacing: 1.65rem;
      font-size: 1.28rem;
      transform: translateX(0.825rem) translateY(-0.5rem);
    }
  }


  .paragraph-container {
    display: none;
  }

  .paragraph-container-mobile {
    display: none;
  }

  .paragraph-container-extra-mobile {
    display: flex;
    flex-flow: column;
    width: max-content;

    &>p {
      color: white;
      letter-spacing: 0.28rem;
      font-size: 0.55rem;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-weight: 750;
      font-style: normal;
    }
  }
}

/* responsive styling 360px -> 420px */


/* responsive styling 421px -> 540px */
@media (min-width: 421px) and (max-width: 540px) {
  .site-header {
    font-size: 1.25rem;
  }

  .site-footer {
    font-size: 0.8rem;
  }


  .button-container {
    transform: scale(75%);
    flex-flow: column;
    gap: 2rem;
    padding-top: 3rem;

    &>button {
      gap: 0.5rem;
      background-color: #130F13;
      padding-left: 1.75rem;
      padding-right: 1.75rem;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
      font-size: 1.28rem;

      &>img {
        height: 1.4rem;
      }
    }
  }

  .title-container {
    padding-bottom: 3rem;

    &>h1 {
      font-size: 2.75rem;
      filter: drop-shadow(0 0 24px #c025ff28);
    }

    &>h2 {
      letter-spacing: 2rem;
      font-size: 1.5rem;
      transform: translateX(1rem) translateY(-0.65rem);
    }
  }


  .paragraph-container {
    display: none;
  }

  .paragraph-container-mobile {
    display: none;
  }

  .paragraph-container-extra-mobile {
    display: flex;
    flex-flow: column;
    width: max-content;

    &>p {
      color: white;
      letter-spacing: 0.28rem;
      font-size: 0.75rem;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-weight: 650;
      font-style: normal;
    }
  }
}

/* responsive styling 421px -> 540px */


/* responsive styling 541px -> 680px */
@media (min-width: 541px) and (max-width: 680px) {
  .site-header {
    font-size: 1.35rem;
  }

  .site-footer {
    font-size: 0.9rem;
  }


  .button-container {
    transform: scale(75%);
    flex-flow: column;
    gap: 2rem;
    padding-top: 3rem;

    &>button {
      gap: 0.5rem;
      background-color: #130F13;
      padding-left: 1.75rem;
      padding-right: 1.75rem;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
      font-size: 1.5rem;

      &>img {
        height: 1.75rem;
      }
    }
  }

  .title-container {
    padding-bottom: 3rem;

    &>h1 {
      font-size: 3.5rem;
      filter: drop-shadow(0 0 24px #c025ff28);
    }

    &>h2 {
      letter-spacing: 2.5rem;
      font-size: 1.82rem;
      transform: translateX(1.25rem) translateY(-0.65rem);
    }
  }


  .paragraph-container {
    display: none;
  }

  .paragraph-container-mobile {
    display: none;
  }

  .paragraph-container-extra-mobile {
    display: flex;
    flex-flow: column;
    width: max-content;

    &>p {
      color: white;
      letter-spacing: 0.28rem;
      font-size: 1rem;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-weight: 650;
      font-style: normal;
    }
  }
}

/* responsive styling 540px -> 680px */


/* responsive styling 681px -> 768px */
@media (min-width: 681px) and (max-width: 768px) {
  .site-header {
    font-size: 1.35rem;
  }

  .site-footer {
    font-size: 0.9rem;
  }


  .button-container {
    transform: scale(75%);
    flex-flow: column;
    gap: 2rem;
    padding-top: 3rem;

    &>button {
      gap: 0.5rem;
      background-color: #130F13;
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
      font-size: 1.5rem;

      &>img {
        height: 1.75rem;
      }
    }
  }

  .title-container {
    padding-bottom: 3rem;

    &>h1 {
      font-size: 4.4rem;
      filter: drop-shadow(0 0 24px #c025ff28);
    }

    &>h2 {
      letter-spacing: 3.25rem;
      font-size: 2rem;
      transform: translateX(1.675rem) translateY(-1rem);
    }
  }


  .paragraph-container {
    display: none;
  }

  .paragraph-container-mobile {
    display: flex;
    flex-flow: column;
    width: max-content;

    &>p {
      color: white;
      letter-spacing: 0.28rem;
      font-size: 1rem;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-weight: 650;
      font-style: normal;
    }
  }

  .paragraph-container-extra-mobile {
    display: none;

  }
}

/* responsive styling 681px -> 786px */


/* responsive styling 769px -> 810px */
@media (min-width: 769px) and (max-width: 810px) {
  .site-header {
    font-size: 1.35rem;
  }

  .site-footer {
    font-size: 0.9rem;
  }


  .button-container {
    transform: scale(75%);
    flex-flow: column;
    gap: 2rem;
    padding-top: 3rem;

    &>button {
      gap: 0.5rem;
      background-color: #130F13;
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
      font-size: 1.5rem;

      &>img {
        height: 1.75rem;
      }
    }
  }

  .title-container {
    padding-bottom: 3rem;

    &>h1 {
      font-size: 5rem;
      filter: drop-shadow(0 0 24px #c025ff28);
    }

    &>h2 {
      letter-spacing: 3.75rem;
      font-size: 2.25rem;
      transform: translateX(1.675rem) translateY(-1.28rem);
    }
  }


  .paragraph-container {
    display: none;
  }

  .paragraph-container-mobile {
    display: flex;
    flex-flow: column;
    width: max-content;

    &>p {
      color: white;
      letter-spacing: 0.28rem;
      font-size: 1.25rem;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
  }

  .paragraph-container-extra-mobile {
    display: none;

  }
}

/* responsive styling 769px -> 810px */


/* responsive styling 811px -> 940px */
@media (min-width: 811px) and (max-width: 940px) {
  .site-header {
    font-size: 1.35rem;
  }

  .site-footer {
    font-size: 0.9rem;
  }


  .button-container {
    transform: scale(75%);
    flex-flow: row;
    gap: 2rem;
    padding-top: 3rem;

    &>button {
      gap: 0.5rem;
      background-color: #130F13;
      padding-left: 1.75rem;
      padding-right: 1.75rem;
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
      font-size: 1rem;

      &>img {
        height: 1.25rem;
      }
    }
  }

  .title-container {
    padding-bottom: 3rem;

    &>h1 {
      font-size: 5.25rem;
      filter: drop-shadow(0 0 24px #c025ff28);
    }

    &>h2 {
      letter-spacing: 3.75rem;
      font-size: 2.25rem;
      transform: translateX(1.675rem) translateY(-1.28rem);
    }
  }


  .paragraph-container {
    display: none;
  }

  .paragraph-container-mobile {
    display: flex;
    flex-flow: column;
    width: max-content;

    &>p {
      color: white;
      letter-spacing: 0.28rem;
      font-size: 1.25rem;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
  }

  .paragraph-container-extra-mobile {
    display: none;

  }
}

/* responsive styling 811px -> 940px */


/* responsive styling 811px -> 1280px */
@media (min-width: 941px) and (max-width: 1280px) {
  .site-header {
    font-size: 1.35rem;
  }

  .site-footer {
    font-size: 0.9rem;
  }


  .button-container {
    flex-flow: row;
    gap: 2rem;
    padding-top: 3rem;
  }

  .title-container {
    padding-bottom: 3rem;

    &>h1 {
      font-size: 6rem;
      filter: drop-shadow(0 0 24px #c025ff28);
    }

    &>h2 {
      letter-spacing: 4.25rem;
      font-size: 2.75rem;
      transform: translateX(1.675rem) translateY(-1.28rem);
    }
  }


  .paragraph-container {
    display: none;
  }

  .paragraph-container-mobile {
    display: flex;
    flex-flow: column;
    width: max-content;

    &>p {
      color: white;
      letter-spacing: 0.28rem;
      font-size: 1.5rem;
      text-align: center;
      font-family: "Inter", sans-serif;
      font-weight: 300;
      font-style: normal;
    }
  }

  .paragraph-container-extra-mobile {
    display: none;

  }
}

/* responsive styling 811px -> 1280px */