:root {
  --countdown: 'A Pré-Venda começa em';
  --color-background: #00152e;

  color-scheme: light;
  font-family: Bahnschrift, 'DIN Condensed', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif;
}

dialog::backdrop {
  background-color: color-mix(in srgb, var(--color-darkblue), black 90%);
}

header picture::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

header {
  background-color: var(--color-background);
  position: relative;
}

.hiddenHeading {
  font-size: 0;
  visibility: visible;
}

.heading {
  padding-inline: 1rem;
  padding-block-end: 1.25rem;
}
.heading h2 {
  font-size: 0.01rem;
  margin: 0;
  color: transparent;
}
.heading * {
  margin-inline: auto;
}
.heading p {
  font-size: 1rem;
}
.heading img[alt=heading] {
  width: min(100%,20.625rem);
  height: auto;
}

/* .header-video {
  position: absolute;
  width: 100%;
  aspect-ratio: 192/94;
}

@media (width <= 1280px) {
  .header-video {
    display: none;
    visibility: hidden;
  }
} */

main {
  background-color: var(--color-background);
  background-image: url('../images/main-bg-1920.webp');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-block-end: 0;
  padding-block-end: 0;
  font-stretch: 85%;
  color: white;
}

@media (width <= 1200px) {
  main {
    background-image: url('../images/main-bg-1200.webp');
  }
}

@media (width <= 960px) {
  main {
    background-image: url('../images/main-bg-960.webp');
  }
}

@media (width <= 600px) {
  main {
    background-image: url('../images/main-bg-600.webp');
  }
}

#top-ui {
  padding-block: 1.25rem 1.825rem;
  padding-inline: 1.25rem;
}
#top-ui button {
  background-image: url('../images/button-top.webp');
  aspect-ratio: 40/8;
  background-size: 200%;
  background-position-y: top;
  background-repeat: no-repeat;
  padding: 0;
}
#top-ui button,
#top-ui a {
  width: 100%;
  flex: 0 1 25rem;
}
#top-ui button span {
  font-size: 0.01rem;
  color: transparent;
}
#top-ui button#watch {
  background-position-x: left;
}
#top-ui button#download {
  background-position-x: right;
}
@media (pointer: fine) {
  #top-ui button:hover {
    background-position-y: bottom;
  }
}

#intro  {
  font-size: 1.5rem;
  line-height: 1.5em;
  text-align: center;
  width: min(96%,73.75rem);
  margin-inline: auto;
}
@media (width <=800px) {
  #intro {
    font-size: 1rem;
  }
}

#weapon {
  background-image: url('../images/weapon-wrapper-bg.webp');
  background-position-x: center;
  background-position-y: bottom -1px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin: 0;
}
.weapon-top img,
.weapon-bottom img {
  width: 100%;
  height: auto;
}
#weapon .wrapper {
  max-width: 73.75rem;
  margin-inline: auto;
  margin-block-start: 2.5rem;
}
#evolutions,
#weapon .heading {
  background-image: url('../images/paper-middle.webp');
  background-position: top center;
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}
#evolutions .tab-navs {
  column-gap: 0.25rem;
  row-gap: 0.125rem;
  margin-inline: auto;
  justify-content: center;
  flex-wrap: wrap;
  padding-inline: 1rem;
}
#evolutions button[role=tab] {
  width: 4.25rem;
  height: 2.5625rem;
  position: relative;
}
#evolutions button[role=tab]::after,
#evolutions button[role=tab]::before {
  content: '';
  display: block;
  inset: 0;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
}
#evolutions button[role=tab]::after {
  background-image: url('../images/button-tabs.webp');
  background-position: center left;
}
#evolutions button[role=tab][aria-selected=true]::before {
  filter: brightness(2);
}
#evolutions button[role=tab][aria-selected=true]::after {
  background-position: center right;
}
#evolutions-0::before {
  background-image: url('../images/tab-1.webp');
}
#evolutions-1::before {
  background-image: url('../images/tab-2.webp');
}
#evolutions-2::before {
  background-image: url('../images/tab-3.webp');
}
#evolutions-3::before {
  background-image: url('../images/tab-4.webp');
}
#evolutions-4::before {
  background-image: url('../images/tab-5.webp');
}
#evolutions-5::before {
  background-image: url('../images/tab-6.webp');
}
#evolutions-6::before {
  background-image: url('../images/tab-7.webp');
}
#evolutions img[alt='weapon evolution'] {
  width: min(100%, 73.75rem);
  height: auto;
}
#evolutions img[alt=label] {
  margin-inline: auto;
  margin-block-start: -0.625rem;
  width: min(100%, 24.75rem);
  height: auto;
}
@media (width<=800px) {
  #evolutions img[alt=label] {
    scale: 0.8;
    margin-block-start: 0.25rem;
  }
}

[popover] {
  border: 14px solid transparent;
  border-image-source: url('../images/popover-border.webp'); 
  border-image-slice: 14;
  border-image-width: 14px;
  border-image-repeat: stretch;
  background-image: linear-gradient(180deg, #1c191b, #322d40);
  border-radius: 10px;
  max-width: 19.375rem;
  color: white;
  text-align: center;
}

[popover] h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
}
@supports (-webkit-background-clip:text) {
  [popover] h4 {
    background: linear-gradient(90deg, #ff97cb, #84b5ff, #7cffbd); 
    -webkit-background-clip: text; 
    color: transparent;
  }
}

[popover] p {
  font-size: 1rem;
  font-weight: 300;
}

.attributes {
  margin: auto;
  padding-block: 1.25rem;
}
.attributes button {
  width: 6.25rem;
  height: 6.25rem;
}
.attributes button img {
  width: 100%;
  height: auto;
}

#watchModal .modal-close {
  color: white;
}

#customization {
  background-color: #01001d;
  margin: 0;
  padding-block: 2.5rem 5rem;
  color: white;
}
#customization picture {
  width: min(96%, 73.75rem);
  margin-inline: auto;
}
#customization picture img {
  width: 100%;
  height: auto;
}
#customization .col-flex {
  width: min(96%, 73.75rem);
  margin-inline: auto;
  margin-block-start: 2.5rem;
}
.col-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2.5rem;
}
@media (width <= 800px) {
  .col-flex {
    gap: 1rem;
  }
}

.description {
  flex: 1 0 min(90%, 20rem);
  text-align: center;
  padding: 1rem;
  padding-block-start: 0;
  border: 2px solid rgb(57, 32, 75);
  border-radius: 3px;
  background-image: linear-gradient(180deg, #1c191b, #322d40);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
.description h4 {
  font-size: 1.125rem;
  font-weight: 700;
}
.description p {
  font-size: 1rem;
  font-weight: 300;
}
.description::before {
  aspect-ratio: 132/72;
  content: '';
  display: block;
  width: auto;
  height: 3rem;
  background-size: cover;
  background-repeat: no-repeat;
  margin-block: -0.5rem 0.5rem;
}
.description:nth-child(1):before {
  background-image: url('../images/ci-1.webp');
}
.description:nth-child(2):before {
  background-image: url('../images/ci-2.webp');
}
.description:nth-child(3):before {
  background-image: url('../images/ci-3.webp');
}
.description:nth-child(4):before {
  background-image: url('../images/ci-4.webp');
}
.description:nth-child(5):before {
  background-image: url('../images/ci-5.webp');
}