body,
html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  color: rgb(20, 20, 20);
  overflow: hidden;
  background: url("../assets/img/ui_edit/Background2x.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#foo {
  color: rgb(255, 157, 0);
  color: #f66913;
  color: #f74018;
}

/* THREEJS */
canvas {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#threeD-container {
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* filter:drop-shadow(0px 10px 10px rgba(0,0,0,0.5)); */
}
#threeD-container.hover {
  cursor: grab;
}
#threeD-container.hover.down {
  cursor: grabbing;
}
.stats_br,
.stats_bl,
.stats_tr,
.stats_tl {
  position: absolute;
}
.stats_tl,
.stats_tr {
  top: 0px !important;
  bottom: auto !important;
}
.stats_bl,
.stats_br {
  top: auto !important;
  bottom: 0px !important;
}
.stats_tl,
.stats_bl {
  left: 0px !important;
  right: auto !important;
}
.stats_tr,
.stats_br {
  left: auto !important;
  right: 0px !important;
}

/* BUTTON */
button {
  position: relative;
  border: none;
  outline: none;
  height: auto;
  background: transparent;
  pointer-events: none;
  transform: none;
  transition: 0.2s;
}
button:hover {
  transform: translateY(1px);
}

/* SVG */
path,
rect {
  pointer-events: fill;
  cursor: pointer;
}

/* UI */
#creature-ui {
  padding-top: 2rem;
  position: absolute;
  z-index: 100;
  height: 100%;
  width: 100%;
  pointer-events: all;

  --padFrame: 15px;
}

#model-viewer_container {
  /* z-index: 100; */
  position: absolute;
  width: 100%;
  height: 100%;
  /* display: none; */
  /* top:50%;
        left:50%;
        transform: translate(-50%, -50%); */
  /* border:1px solid red; */
}

#inventory_container {
  z-index: 100;
  position: absolute;
  width: auto;
  height: auto;
  top: calc(var(--padFrame));
  /* top:50%;
        transform: translateY(-50%); */
  bottom: auto;
  /* right:var(--padFrame); */
  left: var(--padFrame);
}

#inventory-holder_thumb {
  display: none;
  position: relative;
  width: 52.5px;
  height: 52.5px;
  /* right:0px; */
  left: -6px;
  top: -4px;

  --clr_def_bor: #000000;
  --clr_def_inr: #0071bc;
  --clr_hov_bor: #1d5872;
  --clr_hov_inr: #54b3e8;
  --clr_foc_bor: #000000;
  --clr_foc_inr: #004e7a;
}
#inventory-holder_thumb > #inventory-holder_thumb_svg > g > g > path,
#inventory-holder_thumb > #inventory-holder_thumb_svg > g > .inr {
  transition: 0.2s;
}
#inventory-holder_thumb > #inventory-holder_thumb_svg > g > g > path {
  fill: var(--clr_def_bor);
}
#inventory-holder_thumb:hover > #inventory-holder_thumb_svg > g > g > path {
  fill: var(--clr_hov_bor);
}
#inventory-holder_thumb:active > #inventory-holder_thumb_svg > g > g > path {
  fill: var(--clr_foc_bor);
}
#inventory-holder_thumb > #inventory-holder_thumb_svg > g > .inr {
  fill: var(--clr_def_inr);
}
#inventory-holder_thumb:hover > #inventory-holder_thumb_svg > g > .inr {
  fill: var(--clr_hov_inr);
}
#inventory-holder_thumb:active > #inventory-holder_thumb_svg > g > .inr {
  fill: var(--clr_foc_inr);
}

#inventory-holder {
  --border1: 2px;
  /*  */
  --padding1: 6px;
  --border2: 1px;
  /*  */
  --padding2: 1px;
  --border3: 2px;
  /*  */
  --shadowX: 3px;
  --shadowY: 3px;
  --bor_rad: 10px;
  /*  */

  position: relative;
  width: 275px;
  height: 500px;

  background: #d9a7a7;
  border-radius: var(--bor_rad);
  border: var(--border1) solid #000;

  margin: calc(
    var(--border1) + var(--padding1) + var(--border2) + var(--padding2) +
      var(--border3)
  );
  margin-top: calc(
    var(--border1) + var(--padding1) + var(--border2) + var(--padding2) +
      var(--border3) + 10px
  );
  margin-right: calc(
    var(--border1) + var(--padding1) + var(--border2) + var(--padding2) +
      var(--border3) + var(--shadowX)
  );
  margin-bottom: calc(
    var(--border1) + var(--padding1) + var(--border2) + var(--padding2) +
      var(--border3) + var(--shadowY)
  );
  margin-left: calc(
    var(--border1) + var(--padding1) + var(--border2) + var(--padding2) +
      var(--border3) + 10px
  );
}
#inventory-holder:before {
  content: "";
  z-index: -1;
  position: absolute;
  height: calc(100% + (var(--border1) * 2));
  width: calc(100% + (var(--border1) * 2));
  top: calc(0px - var(--border1) - var(--padding1) - var(--border2));
  left: calc(0px - var(--border1) - var(--padding1) - var(--border2));
  padding: var(--padding1);
  border-radius: calc(
    var(--bor_rad) + var(--border1) + var(--padding1) + var(--border2)
  );
  background: #c1272d;
  border: var(--border2) solid #ed1c24;
}
#inventory-holder:after {
  content: "";
  z-index: -2;
  position: absolute;
  height: calc(
    100% + (var(--border1) * 2) + (var(--padding1) * 2) + (var(--border2) * 2)
  );
  width: calc(
    100% + (var(--border1) * 2) + (var(--padding1) * 2) + (var(--border2) * 2)
  );
  top: calc(
    0px - var(--border1) - var(--padding1) - var(--border2) - var(--padding2) -
      var(--border3)
  );
  left: calc(
    0px - var(--border1) - var(--padding1) - var(--border2) - var(--padding2) -
      var(--border3)
  );
  padding: var(--padding2);
  border-radius: calc(
    var(--bor_rad) + var(--border1) + var(--padding1) + var(--border2) +
      var(--padding2) + var(--border3)
  );
  background: #f15a24;
  border: var(--border3) solid black;
  box-shadow: var(--shadowX) var(--shadowY) 0px rgba(0, 0, 0, 1);
}

#inventory-holder_exit-btn {
  --size: 40px;
  z-index: 1;
  position: absolute;
  left: calc(0px - (var(--size) / 2) - 4px);
  top: calc(0px - (var(--size) / 2) - 4px);
  width: var(--size);
  height: var(--size);
  transition: 0.2s;
  cursor: pointer;
  pointer-events: all;
  background: url("../assets/img/ui/X_Normal4x.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#inventory-holder_exit-btn:hover {
  background: url("../assets/img/ui/X_Hover4x.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#inventory-holder_exit-btn:active {
  background: url("../assets/img/ui/X_Click4x.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#inventory-holder_content {
  --pad: 10px;
  position: absolute;
  width: calc(100% - (var(--pad) * 2));
  height: calc(100% - (var(--pad) * 2));
  left: 0px;
  top: 0px;
  padding: var(--pad);
  overflow-x: hidden;
  overflow-y: auto;
}
#inventory-holder_content::-webkit-scrollbar {
  width: 6px;
}
#inventory-holder_content::-webkit-scrollbar-track {
  background: transparent;
}
#inventory-holder_content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}
#inventory-holder_content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#inventory-holder_content.loading {
  pointer-events: none;
}
#inventory-holder_content.loading > * {
  pointer-events: none;
}

/*  */
.cube-icon {
  --mar: 5px;
  display: block;
  float: left;
  position: relative;
  width: calc(33.3% - (var(--mar) * 2));
  /* height:var(--size); */
  margin: var(--mar);
  aspect-ratio: 1;
  transition: 0.2s;
  cursor: pointer;
  filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.25));
}
.cube-icon:hover {
  transform: translateY(1px);
  opacity: 0.85;
}
.cube-icon.loading {
  pointer-events: none;
  opacity: 1;
}

.cube-icon > img {
  --size: 90%;
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: calc(50% - 1.5px);
  top: calc(50% - 1.5px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cube-icon.off > img {
  opacity: 0.5;
}

.cube-icon:after {
  display: none;
  content: "";
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.2s;
  background: url("../assets/img/ui_edit/X_Normal_red.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  pointer-events: none;
}
.cube-icon.off:after {
  display: block;
}
.cube-icon:hover:after {
  background: url("../assets/img/ui_edit/X_Hover_red.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  pointer-events: none;
}
.cube-icon:active:after {
  background: url("../assets/img/ui_edit/X_Clicked_red.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  pointer-events: none;
}
.cube-icon.loading:after {
  display: block;
  background: url("../assets/img/ui_edit/circle-notch-solid_wht.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35%;
  animation: spin 2s linear infinite;
  opacity: 0.75;
}
.cube-icon.loading > img {
  opacity: 0.25;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@font-face {
  font-family: "wwDigital";
  src: url("/fonts/namcoregular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* Hover state */
#gallery-button:hover {
  content: url("/assets/img/gallery-button/GalleryButton_Hover4x.png");
}

/* Click (active) state */
#gallery-button:active {
  content: url("/assets/img/wallet-button/WalletButton_Clicked4x.png");
}
#btn-connect:hover {
  content: url("/assets/img/wallet-button/WalletButton_Hover4x.png");
}
#btn-connect:active {
  content: url("/assets/img/wallet-button/WalletButton_Clicked4x.png");
}

#social-button:hover {
  content: url("/assets/img/socials-button/SocialsButton_Hover4x.png");
}



a {
  position: relative;
}
/* Click (active) state */
#wallet-button-connect:active {
  content: url("/assets/img/wallet-button/WalletButton_Clicked4x.png");
}
#wallet-button-connect:active {
  content: url("/assets/img/wallet-button/WalletButton_Clicked4x.png");
}

.nav-bar {
  z-index: 98;
  position: absolute;
  width: 70%;
  background: transparent;
  display: flex;
  justify-content: end;
  top: 50px;
  right: 10px;
  font-family: "wwDigital";
  flex-direction: column;
  align-items: end;
  gap: 15px;
  font-size: 10px;
}
.nav-sub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  color: white;
  font-size: 10px;
}
.nav-sub.custom a {
  margin-top: 0px;
  margin-bottom: 27px;
  display: inline-block;
}

.nav-bar a {
  display: inline-block;
  text-decoration: none; /* Remove underline from link */
  color: inherit; /* Inherit text color */
}

.nav-sub.custom  {
  margin-top: 5px;
  margin-left: 24px;
  z-index: 2;
}
.nav-sub.wallet img {
  width: 155px !important;
}
.nav-sub.wallet span { 
  z-index: 2;
  pointer-events: none;

}
.nav-sub.wallet a {
  margin-top: 0px;
}

.nav-sub.wallet a {
  display: inline-block;
  text-decoration: none; /* Remove underline from link */
  color: inherit; /* Inherit text color */
}

.nav-sub.wallet img {
  cursor: pointer;  
  display: block; /* Ensures the image fills the anchor tag */
}

.nav-bar a {
  margin-top: 15px;
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.nav-bar img {
  position: absolute;
  width: 180px;
  z-index: 1;
  cursor: pointer;
}
.nav-sub a { 
  z-index: 2;
}
.stats_bl {
  display: none !important;
}
#WEB3_CONNECT_MODAL_ID {
  z-index: 9999;
  position: relative;
}

#wallet-button {
  display: none;
  z-index: 99;
}
#selected-account {
  text-transform: lowercase;
}
#btn-connect-container {
}

.no-cubes-message {
  font-family: "wwDigital";
  padding-left: 20px;
  line-height: 150%;
  text-transform: lowercase;
}