/* MAIN */
@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap');

body {
  background-color: white;
}
#wrapper-main{
  --main-margin:1em;
}
#wrapper-main, #wrapper-main button{
  font-family: "amster", serif;
  font-weight: 400;
  font-style: normal;
}
#wrapper-main img{
  margin-left:auto;
  margin-right:auto;
}

.half-top{
  background:#220c2e;
  padding:0 var(--main-margin);
}
.half-bottom{
  background:#f19689;
  padding:0 var(--main-margin);
}
.intro img {
  margin-inline: auto;
}
.intro p {
  font-size: 1.375em;
  color:#d1be97;
  text-align: center;
  max-width: 1040px;
  text-wrap: pretty;
  margin-inline: auto;
  line-height: 1.5;
}

h2 {
  margin-block: 1em;
  font-size: 2em;
}

h3{
  width:100%;
  font-size:1.5em;
  font-weight:normal;
  text-transform: uppercase;
}

section.skyborn {
  background-color: #212130;
  color: white;
}
.amster {
  font-family: "amster", serif;
  font-weight: 400;
  font-style: normal;
}
#divider {
  height: 400px;
  background-color: #212130;
  background-image: url("../images/divider.webp");
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
}
#ender {
  height: 100px;
  background-color: #212130;
  background-image: url("../images/ender.webp");
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
}
@media (width > 1920px) {
  #divider {
    aspect-ratio: 1920/400;
    height: auto;
    background-size: 100%;
  }
  #ender {
    aspect-ratio: 1920/100;
    height: auto;
    background-size: 100%;
  }
}

/* INTERFACE */
#interface {
  margin:0 auto 60px auto;
  padding-top:20px;
  gap:1.4em;
}
#interface .timer {
  font-size: 2.5rem;
}
@media (width < 50rem) {
  #interface .timer {
    font-size: 1.875rem;
  }
}
#interface .timer::before {
  content: "Sale ends in:";
  font-size: 0.3em;
  letter-spacing: 0.2em;
  opacity: 0.6;
}
#interface button {
  background:url(../images/btn_bg.png);
  background-size: 100% 100%;
  width:358px;
  height:72px;
  font-size:25px;
}
#interface button:hover {
  filter:drop-shadow(4px 4px 10px rgba(255,190,64, 0.5));
}


/* Evolition */
.evolutions_container {
  margin:0 auto;
  padding-top:80px;
  max-width:1100px;
}
.evolutions_container .heading{
  margin-bottom:20px;
}
.evolutions_container h3{
  font-size:1em;  
  font-weight: normal;
  color:#d1be97;
  margin:1em auto;
  text-transform:uppercase;
}
.evolutions {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 2em;
}
.evolutions .evolutions_item{
  width:calc(100% / 3);
  padding:1em;
  text-align: center;
}

.evolutions .evolutions_item:last-child{
  width:calc(100%);
  padding:1em;
  text-align: center;
}

/* Customization */

.customization_container{
  background-color:#f19689;
  max-width:1100px;
  margin:auto;
  text-align: center;
  padding-top:50px;
}
.customization-intro{
  background:url(../images/bg_crystal.jpg) no-repeat center top;   
  min-height:400px; 
  padding:var(--main-margin);
  background-color:#f19689;
}

.customization-intro p{
  font-size: 1.375em;
  color:#d1be97;
  text-align: center;
  max-width:700px;
  margin:0 auto;
  padding:80px 0;
}

.customization_container .skins{
  display:flex;
  flex-wrap: wrap;
  max-width:1100px;
  row-gap: 2em;
  justify-content: center;
}

.customization_container .skins_item{
  width:calc(100% / 3);
  padding:1em;
  text-align:center;
}

.customization_container .p_intro{
  font-size:1em;
  padding-top:1em;
}
.customization_container p{
  font-size:0.85em;
  margin:0.5em 0;
  padding:0 clamp(0px, 1vw ,1vw);
}
.customization_container h3{
  margin:2em auto 1em auto;
  font-size:1.4em;
}
.customization_container h4{
  font-size:1em;
  margin:0.5em 0;
  font-weight:normal;
  text-transform: uppercase;
}

/* dolls */

.customization_container .dolls{
  display:flex;
  flex-wrap: wrap;
  max-width:1100px;
  row-gap: 2em;
  justify-content: center;
}

.customization_container .dolls_item{
  width:calc(100% / 3);
  padding:1em;
  text-align:center;
}

/* sfx */

.customization_container .sfx{
  display:flex;
  flex-wrap: wrap;
  max-width:1100px;
  width:100%;
  row-gap: 2em;
  justify-content: center;
}

.customization_container .sfx_item{
  width:calc(100% / 3);
  padding:1em;
  text-align:center;
}

/* Bottom */
.bottom{
  background:url(../images/bg_bottom.jpg);
  height:400px;
  width:100%;
  background-position: bottom;
  margin-top:-100px;
}

/* footer */
.footer__copyrights li:after{
  color:#d1be97;
  opacity:0.2;
}

@media (max-width: 900px) {
  .evolutions  .evolutions_item, .customization_container .skins_item, .customization_container .dolls_item, .customization_container .sfx_item{
    width:calc(100% / 2);
  }
}
@media (max-width: 600px) {
  .evolutions  .evolutions_item, .customization_container .skins_item, .customization_container .dolls_item, .customization_container .sfx_item{
    width:calc(100%);
    padding:0;
  }
  #interface, #interface button{
    width:100%;
  }
}

/* ATTRIBUTES */
@media (width < 100rem) {
  .column-grid.col-5 {
    --grid-column-count: 5;
  }
}
@media (width < 80rem) {
  .column-grid.col-5 {
    --grid-column-count: 5;
  }
}
@media (width < 50rem) {
  .column-grid.col-5 {
    --grid-column-count: 4;
  }
}
@media (width <= 37.5rem) {
  .column-grid.col-5 {
    --grid-column-count: 3;
    gap: 1.25rem;
  }
}
.attributes button.tooltip img{
  width:unset;
  height:unset;
}
.attributes [popover]:popover-open {
  padding: 0.625rem 1rem;
  background-color: #210b2d;
  /* background-image: linear-gradient(goldenrod 0%, gold 10%, gold 90%, goldenrod 100%); */
  border-radius: 0.1875rem;
}
.attributes [popover]:popover-open::before {
  border-radius: 2px;
  background-color: #210b2d;
  inset: 1px;
  background-image: linear-gradient(#f1bab3 0%, #ffd7d1 100%);
  filter: drop-shadow(0px 1px 4px white);
}
.attributes [popover] h4 {
  font-size:0.9em;
  font-weight:normal;
  text-transform: uppercase;
}

.attributes {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 56.25rem;
  margin-block:unset;
}
@media (width < 37.5rem) {
  .attributes {
    gap: 1rem;
  }
}

.kit-attributes figcaption {
  text-align: center;
  font-size: 1.5em;
  color: #a08c73;
}


/* EXTRAS */
.extra figure img {
  max-width: 25rem;
  background-image: url("../images/extras-bg.webp");
  background-position: center;
  background-size: cover;
}

/* REWARDS */
.reward {
  padding-block-end: 120px;
}
.reward figure img {
  max-width: 25rem;
}

/* HEADINGS */
.headings {
  margin-block: 2rem;
}
.headings::after, .headings::before {
  scale: 80%;
}
.headings::after {
  rotate: 0;
  transform: scaleY(-1);
}
.skyborn .headings::after, 
.skyborn .headings::before {
  filter: invert(1);
}
/* 
<div class="headings" aria-hidden="true">
  <img src="assets/images/heading-special.webp" alt="Special">
  <img src="assets/images/heading-attributes.webp" alt="Attributes">
</div>
*/

/* MODALS */
.modal_close {
  color: white;
}