*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --c-white: #D8E3F1;
  --c-red: #FF0000;
  --c-red-light: rgb(255, 122, 122);
  --c-red-glow: #ff00006d;
  --c-bg-1: #0C0B07;
  --c-bg-2: #0C130C;
  --c-bg-3: #000;
  background: linear-gradient(180deg, rgba(12, 19, 12, 0) 0%, #0C130C 100%);
  background-color: #0C0B07;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

section {
  position: relative;
}

body {
  font-family: "unibody-8-new", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--c-red);
  min-height: 100vh;
}

.section:nth-child(even) {
  background-color: black;
  z-index: -11;
}

.section {
  overflow: hidden;
}

p.test {
  min-height: 12.5rem;
  color: white;
}

a {
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-red);
  font-size: 0.7rem;
}

a:hover {
  color: var(--c-red-light);
}

span {
  color: var(--c-red);
  text-transform: uppercase;
  font-size: 0.5rem;
}

.copyright {
  position: absolute;
  bottom: 0;
  margin-bottom: 2rem;
  letter-spacing: 0.2em;
  display: block;
  text-shadow: 0 0 8px var(--c-red);
  width: 100%;
  text-align: center;
  z-index: -9;
}

a.button {
  color: var(--c-bg-3);
  font-family: "unibody-8-new", sans-serif;
  text-transform: uppercase;
  text-align: center;
  border: none;
  font-size: 1.05rem;
  padding: 1rem 0;
  min-width: 14.6875rem;
  filter: drop-shadow(0 0 6px var(--c-red-glow));
  background-image: url(../images/button.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

a.button:hover {
  filter: drop-shadow(0 0 6px var(--c-red-glow)) brightness(1.3);
}

a.button:active {
  filter: drop-shadow(0 0 4px var(--c-red-glow)) brightness(2);
}

@keyframes heroButton {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }

  to {
    transform: translateY(0x);
    opacity: 1;
  }
}

a.button.start {
  opacity: 0;
  animation-name: heroButton;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-delay: 2.9s;
  animation-fill-mode: forwards;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  z-index: 70;
  min-height: 5rem;
  padding: 0 3.5rem;
  z-index: 100;
}

header #menu {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 2rem;
}

header #menu li {
  display: inline-block;
  min-height: 1.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
}

header #menu li.active {
  border-bottom: 1px solid var(--c-red);
}

header #menu li.active:hover {
  border-bottom: 1px solid var(--c-red-light);
}

header #menu li.active:hover a {
  color: var(--c-red-light) !important;
}

header #menu-alt {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1rem;
}

header #menu-alt li {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

header #menu-alt li.active {
  background-color: rgba(129, 21, 21, 0.167);
  border-radius: 100%;
}

header #menu-alt li.active a::after {
  background-color: var(--c-red-light);
}

header #menu-alt a {
  display: block;
  min-height: 1.875rem;
  min-width: 1.875rem;
}

header #menu-alt a::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: auto;
  margin-top: 40%;
  background-color: var(--c-red);
}

header #menu-alt a:hover::after {
  background-color: var(--c-red-light);
}

header>div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
}

header>div:nth-child(2) img {
  max-width: 12.5rem;
  width: 15rem;
  height: 100%;
}

header>nav {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100%;
}

header>nav:first-child {
  justify-content: start;
}

.header-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 5rem;
  z-index: 90;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: rgba(0, 0, 0, 0.4901960784);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.hero h1 {
  color: var(--c-white);
  font-family: fit-extra-wide, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11.5rem;
  text-align: center;
  line-height: 90%;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 0 10px rgba(216, 227, 241, 0.3333333333));
  z-index: 2;
  opacity: 0;
}

.hero h1.start {
  animation-name: heroH1;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-delay: 2.7s;
  animation-fill-mode: forwards;
}

.hero h2 {
  text-align: center;
  color: var(--c-white);
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 2em;
  letter-spacing: 0.12em;
  margin: 0 auto;
  margin-bottom: 3rem;
  filter: drop-shadow(0 0 5px rgba(216, 227, 241, 0.4235294118));
}

.hero h2.start {
  opacity: 0;
  animation-name: heroH2;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-delay: 2.7s;
  animation-fill-mode: forwards;
}

.hero #skull-container,
.hero #skull-container-overlay {
  pointer-events: none;
  width: 1400px;
  position: absolute;
  top: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.hero #skull-container-overlay {
  width: 1405px;
  filter: blur(3px);
  opacity: 0.6;
  z-index: 1;
  mix-blend-mode: lighten;
}

@keyframes heroH1 {
  from {
    transform: translateY(200px);
    opacity: 0;
  }

  to {
    transform: translateY(0x);
    opacity: 1;
  }
}

@keyframes heroH2 {
  from {
    transform: translateY(100px);
    opacity: 0;
  }

  to {
    transform: translateY(0x);
    opacity: 1;
  }
}

h1.feat {
  font-family: fit-extra-wide, sans-serif;
  font-size: 10rem;
  text-shadow: -1px -1px 0 var(--c-red), 1px -1px 0 var(--c-red), -1px 1px 0 var(--c-red), 1px 1px 0 var(--c-red);
  font-weight: 400;
  color: var(--c-bg-3);
  filter: drop-shadow(0 0 5px var(--c-red-glow));
  line-height: 90%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
}

.header-feat {
  margin-bottom: -3.1rem;
  transform: translate(-4rem, 0);
}

.header-feat>div:first-child {
  border-bottom: 1px solid var(--c-red);
  filter: drop-shadow(0 0 5px var(--c-red-glow));
}

.header-feat>div:first-child .header-feat-acc-1 {
  background-image: url(../images/features-accent-top.svg);
  background-repeat: no-repeat;
  background-position: bottom;
  min-height: 15px;
  max-width: 90px;
}

.header-feat>div:last-child {
  margin-top: 0.8rem;
  filter: drop-shadow(0 0 5px var(--c-red-glow));
}

.header-feat>div:last-child .header-feat-acc-2 {
  background-image: url(../images/features-accent-bottom.svg);
  background-repeat: no-repeat;
  min-height: 50px;
  max-width: 90px;
}

.card-container {
  display: flex;
  justify-content: center;
  align-self: center;
  gap: 1rem;
  min-width: 58rem;
}

.card-container.feat>div {
  background-image: url(../images/card.svg);
  background-size: contain;
  background-repeat: no-repeat;
  min-height: 25rem;
  max-width: 21.25rem;
  min-width: 21.25rem;
  padding: 2rem;
}

.card-container.feat>div p {
  text-shadow: 0 0 8px var(--c-red-glow);
  text-transform: uppercase;
  font-size: 0.7rem;
  width: 100%;
  line-height: 200%;
  padding-right: 1rem;
}

.card-container.feat>div img.feat-icon {
  max-width: 4.375rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 6px var(--c-red-glow));
}

.card-container.feat>div:first-child {
  background-image: url(../images/card-first.svg);
}

.specs-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.specs-container #skull-container-side,
.specs-container #skull-container-side-overlay {
  max-width: 700px;
  position: absolute;
  transform: translate(22rem, 4rem);
  z-index: -1;
}

.specs-container #skull-container-side-overlay {
  filter: blur(6px);
  opacity: 0.4;
  z-index: 1;
  mix-blend-mode: lighten;
}

.specs-container .specs-details {
  max-width: 34.375rem;
  transform: translate(-20rem, 0);
}

.specs-container .specs-details h3 {
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 100%;
  text-shadow: 0 0 8px var(--c-red);
}

.specs-container .specs-details h1 {
  font-family: fit-extra-wide, sans-serif;
  font-size: 10rem;
  text-shadow: -1px -1px 0 var(--c-white), 1px -1px 0 var(--c-white), -1px 1px 0 var(--c-white), 1px 1px 0 var(--c-white);
  font-weight: 400;
  color: #0d0f09;
  filter: drop-shadow(0 0 8px rgba(227, 249, 255, 0.165));
  line-height: 90%;
}

.specs-container .specs-details .specs-card-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.specs-container .specs-details .specs-card-container .specs-card {
  background-image: url(../images/spec-card.svg);
  background-size: contain;
  background-repeat: no-repeat;
  padding: 1rem 2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--c-white);
  letter-spacing: 0.07rem;
  line-height: 200%;
  min-height: 8.125rem;
  position: relative;
}

.specs-container .specs-details .specs-card-container .specs-card p {
  text-shadow: 0 0 6px rgba(216, 227, 241, 0.2784313725);
}

.specs-container .specs-details .specs-card-container .specs-card::after {
  content: "A";
  text-align: center;
  vertical-align: middle;
  line-height: 310%;
  font-size: 1.4rem;
  color: var(--c-bg-3);
  background-image: url(../images/spec-bullet.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: -2.1rem;
  top: 2.2rem;
  min-width: 70px;
  min-height: 70px;
  filter: drop-shadow(0 0 4px var(--c-red-glow));
}

.specs-container .specs-details .specs-card-container .specs-card.b::after {
  content: "B";
}

.specs-container .specs-details .specs-card-container .specs-card.c::after {
  content: "C";
}

h1.buy {
  font-family: fit-extra-wide, sans-serif;
  font-size: 10rem;
  font-weight: 400;
  color: var(--c-red);
  filter: drop-shadow(0 0 5px var(--c-red-glow));
  line-height: 85%;
}

.header-buy {
  filter: drop-shadow(0 0 2px var(--c-red-glow));
}

.header-buy>div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid var(--c-red);
  filter: drop-shadow(0 0 5px var(--c-red-glow));
}

.header-buy>div:first-child .header-buy-acc-1:last-child {
  transform: scaleX(-1);
}

.header-buy>div:first-child .header-buy-acc-1 {
  background-image: url(../images/buy-accent-top.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  min-height: 15px;
  min-width: 100px;
}

.header-buy>div:last-child {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 0.5rem;
  border-top: 1px solid var(--c-red);
  filter: drop-shadow(0 0 5px var(--c-red-glow));
}

.header-buy>div:last-child .header-buy-acc-2:last-child {
  transform: scaleX(-1);
}

.header-buy>div:last-child .header-buy-acc-2 {
  background-image: url(../images/buy-accent-bottom.svg);
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 30px;
  min-width: 60px;
}

.card-container.buy>div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  background-image: url(../images/card-alt.svg);
  background-size: contain;
  background-repeat: no-repeat;
  min-height: 400px;
  max-width: 340px;
  min-width: 340px;
  padding: 2rem;
  padding-top: 1.5rem;
}

.card-container.buy>div h3 {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 6px var(--c-red-glow);
}

.card-container.buy>div ul {
  list-style: none;
  padding-right: 0.5rem;
}

.card-container.buy>div ul li {
  text-shadow: 0 0 8px var(--c-red);
  text-transform: uppercase;
  font-size: 0.7rem;
  width: 100%;
  margin-top: 1rem;
  line-height: 200%;
  padding-left: 2em;
  text-indent: -2em;
}

.card-container.buy>div ul li::before {
  content: "";
  display: inline-block;
  background-image: url("../images/bullet.svg");
  background-size: contain;
  background-repeat: no-repeat;
  min-width: 8px;
  min-height: 8px;
  filter: drop-shadow(0 0 2px var(--c-red));
  padding-right: 2em;
}

.card-container.buy>div a.button {
  margin-left: 0.5rem;
}

.bg-container {
  position: absolute;
  top: 10%;
  left: 50%;
  right: 50%;
  pointer-events: none;
  height: 100%;
  width: 100%;
  z-index: -10;
}

.bg-container>* {
  position: absolute;
}

.bg-1 img.hex1 {
  transform: translate(-140%, 110%);
  max-width: 400px;
  opacity: 0;
  filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-1 img.hex1.start {
  animation-name: fade-in;
  animation-duration: 1.3s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
}

.bg-1 img.hex2 {
  transform: translate(-10%, 7%);
  max-width: 300px;
  opacity: 0;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-1 img.hex2.start {
  animation-name: fade-in-soft;
  animation-duration: 1.9s;
  animation-delay: 0.4s;
  animation-fill-mode: forwards;
}

.bg-1 img.hex3 {
  transform: translate(100%, 170%);
  max-width: 320px;
  opacity: 0;
  filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-1 img.hex3.start {
  animation-name: fade-in-soft;
  animation-duration: 2.3s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
}

.bg-1 img.stack {
  transform: translate(-300%, 15%);
  max-width: 50px;
  opacity: 0;
  filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-1 img.stack.start {
  animation-name: fade-in-soft;
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

.bg-1 code {
  transform: translate(-10%, 45%);
  opacity: 0;
  filter: blur(1px);
  max-width: 330px;
  color: #7C221C;
  letter-spacing: -1px;
  line-height: 150%;
  font-size: 0.8rem;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-1 code.start {
  animation-name: fade-in-soft;
  animation-duration: 2.5s;
  animation-delay: 0.9s;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.8;
  }
}

@keyframes fade-in-soft {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.4;
  }
}

.bg-2 img.hex1 {
  transform: translate(-210%, 110%);
  opacity: 0.5;
  max-width: 400px;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-2 img.hex2 {
  transform: translate(50%, 170%);
  opacity: 0.3;
  max-width: 400px;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-2 img.hex3 {
  transform: translate(120%, 40%);
  opacity: 0.8;
  max-width: 270px;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-2 code {
  transform: translate(-140%, 70%);
  opacity: 0.3;
  filter: blur(1px);
  max-width: 330px;
  color: #7C221C;
  letter-spacing: -1px;
  line-height: 150%;
  font-size: 0.8rem;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-3 img.hex2 {
  transform: translate(-50%, 7%);
  max-width: 300px;
  opacity: 0.5;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-3 img.hex3 {
  transform: translate(-70%, 170%);
  max-width: 320px;
  opacity: 0.5;
  filter: blur(0.5px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-3 img.stack {
  transform: translate(-1140%, 2%);
  max-width: 50px;
  opacity: 0.4;
  filter: blur(0.8px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-3 code {
  transform: translate(-150%, 50%);
  opacity: 0.5;
  filter: blur(1px);
  max-width: 330px;
  color: #7C221C;
  letter-spacing: -1px;
  line-height: 150%;
  font-size: 0.8rem;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-4 img.hex1 {
  transform: translate(-200%, 2%);
  opacity: 0.5;
  max-width: 400px;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-4 img.hex2 {
  transform: translate(74%, 108%);
  opacity: 0.7;
  max-width: 400px;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-4 img.hex3 {
  transform: translate(120%, 40%);
  opacity: 0.8;
  max-width: 270px;
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.bg-4 img.stack {
  transform: translate(-1200%, 40%);
  max-width: 50px;
  opacity: 0.5;
  filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

body.error {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

body.error div.main {
  text-align: center;
  position: relative;
}

body.error div.main h1.error {
  font-family: "organetto-variable", sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
  letter-spacing: -19px;
  line-height: 102%;
  font-size: 10rem;
  animation-name: heroH1;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-fill-mode: forwards;
  text-shadow: 0 0 19px var(--c-red-glow);
}

body.error div.main h2 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--c-white);
  margin-bottom: 6rem;
  text-shadow: 0 0 20px var(--c-white);
  animation: flickerIntro 1.8s step-end forwards;
  animation-fill-mode: forwards;
  animation-delay: 0.9s;
  opacity: 0;
}

body.error div.main a {
  animation: flickerIntro 1.8s step-end forwards;
  animation-fill-mode: forwards;
  animation-delay: 1.7s;
  opacity: 0;
}

body.error .bg-container.bg-3.error {
  transform: translateX(200px);
}

body.error .bg-container.bg-3.error code {
  transform: translate(-150%, 50%);
}

body.error .error-bg {
  position: absolute;
  margin: 50vh auto 0;
  transform: translateY(-105%);
  z-index: -1;
  scale: 0.7;
  animation: flickerIntro 1.8s step-end forwards;
  animation-delay: 1.1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

body.error header {
  display: flex;
  justify-content: center;
  align-items: center;
}

body.error header div.logo {
  max-width: 200px;
}

@keyframes flickerIntro {
  0% {
    opacity: 0;
  }

  1% {
    opacity: 1;
  }

  2% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@media (max-width: 992px) {
  .hero #skull-container {
    width: 1000px;
  }

  .hero #skull-container-overlay {
    width: 1005px;
    opacity: 0;
  }

  .hero h1 {
    font-size: 8rem;
  }

  header {
    min-height: 130px;
    grid-template-rows: 1fr 1fr;
  }

  header>div:nth-child(2) {
    align-items: end;
  }

  header>div:nth-child(2) img {
    max-width: 250px;
  }

  header nav:last-child {
    grid-row: 2/3;
    grid-column: 1/4;
    justify-content: center;
  }

  header #menu-alt {
    display: none;
  }

  .header-backdrop {
    min-height: 200px;
  }

  h1.feat {
    font-size: 3.5rem;
    filter: drop-shadow(0 0 2px var(--c-red-glow));
  }

  .header-feat {
    margin-top: 9rem;
    transform: translate(0, 0);
  }

  .header-feat>div:first-child {
    margin-bottom: 0.5rem;
  }

  .header-feat>div:first-child .header-feat-acc-1 {
    background-size: contain;
    min-height: 30px;
    max-width: 50px;
  }

  .header-feat>div:last-child .header-feat-acc-2 {
    background-size: contain;
    min-height: 50px;
    max-width: 40px;
  }

  .card-container {
    flex-direction: column;
    margin-bottom: 5rem;
    gap: 2rem;
  }

  .card-container>div {
    margin: 0 auto;
    min-height: 330px;
    max-width: 280px;
    min-width: 280px;
  }

  .card-container>div img.feat-icon {
    max-width: 60px;
    margin-bottom: 0.8rem;
  }

  .specs-container {
    margin-top: 11rem;
    flex-direction: column;
    overflow-x: hidden;
  }

  .specs-container #skull-container-side {
    max-width: 500px;
    position: relative;
    transform: translate(0, 0);
  }

  .specs-container #skull-container-side-overlay {
    display: none;
  }

  .specs-container .specs-details {
    transform: translate(0, 0);
    text-align: center;
    padding: 0 2rem;
  }

  .specs-container .specs-details h3 {
    font-size: 1rem;
  }

  .specs-container .specs-details h1 {
    font-size: 6rem;
  }

  .specs-container .specs-details .specs-card-container {
    gap: 0;
  }

  .specs-container .specs-details .specs-card-container .specs-card {
    padding: 0.4rem 1.4rem;
    text-align: start;
  }

  .specs-container .specs-details .specs-card-container .specs-card p::before {
    content: "A.";
    color: var(--c-red);
    margin-right: 0.4rem;
  }

  .specs-container .specs-details .specs-card-container .specs-card p.b::before {
    content: "B.";
  }

  .specs-container .specs-details .specs-card-container .specs-card p.c::before {
    content: "C.";
  }

  .specs-container .specs-details .specs-card-container .specs-card::after {
    display: none;
  }

  .bg-3 .hex3 {
    display: none;
  }

  .header-buy {
    margin-top: 9rem;
    filter: none;
  }

  .header-buy>div:last-child {
    margin-top: 0.2rem;
  }

  h1.buy {
    font-size: 3.5rem;
    filter: none;
    line-height: 100%;
  }

  a.button {
    font-size: 0.9rem !important;
  }

  .copyright {
    position: relative;
  }
}

@media (max-width: 600px) {
  .hero #skull-container {
    width: 900px;
    animation-name: hero-fade-out;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-delay: 2.5s;
  }

  .hero h1 {
    font-size: 6.5rem;
  }

  .hero h2 {
    max-width: 300px;
  }

  h1.error {
    font-size: 6rem !important;
    letter-spacing: -9px !important;
  }
}

@keyframes hero-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fp-watermark {
  display: none;
}

/*# sourceMappingURL=style.css.map */