@font-face {
  font-family: 'Sanserata';
  src: url( 'Sanserata-Bold.eot' );
  src: url( 'Sanserata-Bold.eot?#iefix' ) format( 'embedded-opentype' ),
      url( 'Sanserata-Bold.woff2' ) format( 'woff2' ),
      url( 'Sanserata-Bold.woff' ) format( 'woff' ),
      url( 'Sanserata-Bold.svg#Sanserata-Bold' ) format( 'svg' );
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@media ( hover: none ) {
	html,
	body {
		height: -webkit-fill-available;
	}
}
@media ( hover: hover ) {
	html,
	body {
		height: 100vh;
	}
}
.body-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* grid-template-rows: 1fr auto; */
}
.contenido {
  position: relative;
}
.wallpaper {
  background-image: url( ../assets/wallpaper-1.jpg );
  background-size: cover;
  background-position: bottom left;
  position: absolute;
  width: 100%;
  height: 100%;
}
.builder-container {
  position: relative;
  padding: 1rem;
  height: 100%;
  place-content: center;
  overflow: auto;
}
.builder-box {
  position: relative;
  display: grid;
  width: min( 100%, 800px );
  box-shadow: 0 0 25px #000000bf;
  margin-inline: auto;
}
.builder-editor {
  background: url( ../assets/bg.svg ) center / cover, #af7f60;
  position: relative;
  aspect-ratio: 12 / 15;
  display: grid;
  grid-template-rows: 1fr auto;
}
.builder-title {
  display: grid;
  place-content: end center;
  container-type: size;
}
.builder-title h1 {
  font-family: 'Sanserata';
  color: #593e2b;
  font-size: 5cqw;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.builder-editor .item-body {
  background: url( ../assets/builder.png ) center / cover;
  position: relative;
  aspect-ratio: 12/13;
}
.item {
  translate: -50% -50%;
}
.item-customizable {
  position: absolute;
  z-index: 1;
  width: 80%;
  height: 80%;
  translate: -52% -52%;
  inset: 50%;
  cursor: pointer;
}
.item-image {
  width: 100%;
}
.item-body .item {
  position: absolute;
  aspect-ratio: 1;
  margin: 0;
  width: 27%;
  container-type: size;
}
.item.item-bag {
  top: 17.75%;
  left: 18%;
}
.item.item-cape {
  top: 17.75%;
  left: 82.5%;
}
.item-body .item-mainhand {
  top: 41.5%;
  left: 24%;
}
.item-body .item-offhand {
  top: 41.5%;
  left: 77.5%;
}
.item-offhand .off {
  opacity: 50%;
}
.item-body .item-head {
  top: 20%;
  left: 50%;
}
.item-body .item-armor {
  top: 41.5%;
  left: 50%;
}
.item-body .item-shoes {
  top: 63.5%;
  left: 50%;
}
.item-body .item-food {
  top: 66%;
  left: 82.5%;
}
.item-body .item-potion {
  top: 66%;
  left: 18%;
}
.item-body .item-count {
  position: absolute;
  bottom: 16.5%;
  right: 14.5%;
  width: 20%;
  height: 20%;
  font-size: 12cqw;
  line-height: 1.6;
  text-align: center;
  background: #55555580;
  border-radius: 50%;
  z-index: 1;
  /* box-shadow: 0 0 4px 4px #ffffff; */
}
.item.item-mount {
  left: 50%;
  top: 84.75%;
}
.item:has( .item-image:not( .off ) ):hover:after {
  content: "";
  display: block;
  position: absolute;
  width: 81.75%;
  height: 80%;
  inset: 8.25% 7.5%;
  z-index: -1;
  border-radius: 13%;
  box-shadow: 0 0 6px 4px white;
}
/* .item:hover .item-image:not( .off ) {
  filter: drop-shadow( 1px 1px 0 white ) drop-shadow( -1px -1px 0 white ) drop-shadow( -1px 1px 0 white ) drop-shadow( 1px -1px 0 white ) drop-shadow( 0 0 10px white );
} */
.builder-options {
  position: absolute;
  left: 7%;
  bottom: 10%;
  width: 25%;
  background: url( ../assets/options.png );
}
.builder-screenshot {
  right: 7%;
  background: url( ../assets/download.png );
}
.builder-reset {
  left: 7%;
  background: url( ../assets/reset.png );
}
.builder-options , .builder-reset, .builder-screenshot {
  background-position-y: top;
  background-size: cover;
  appearance: none;
  aspect-ratio: 197 / 54;
  cursor: pointer;
  outline: none;
  border: 0;
}
.builder-reset, .builder-screenshot {
  position: absolute;
  bottom: 10%;
  width: 25%;
  /* width: 197px; */
}
.builder-options:hover, .builder-reset:hover, .builder-screenshot:hover {
  background-position-y: center;
}
.builder-options:active, .builder-reset:active, .builder-screenshot:active {
  background-position-y: bottom;
}
.builder-box:not(.swap-on) .item-inventory {
  display: none;
}
.builder-box.swap-on {
  grid-template-columns: 1fr 0.25fr;
  width: min(100%, 1000px);
}
.item-inventory {
  background: url(../assets/bg-lateral.svg) center / cover, #af7f60;
  display: grid;
  gap: 1rem;
  padding: 1rem;
}
.item-inventory span {
  background: url( ../assets/slot.png ) center / cover;
  aspect-ratio: 1;
}