:root {
  --primary-bg-color: #1e1e1ef7;
  --primary-color: #f0f0f0;
  --secondary-bg-color:#212332;
  --border: #444444;
  --slot: #5a6060;
  --slot-border: #111111bc;
  --slot-hover: #8a3d09;
}
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-thumb {
  background: #4c4c4c; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
::-webkit-scrollbar-track {
  background: #00000055; 
}
.clickable {
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

.clickable:hover {
  transform: scale(1.1);
}
.clickable:active {
  transform: scale(0.9);
}
body {
  margin: 0;
  font-family: "Pixelify Sans", sans-serif !important;
  scrollbar-width:2px !important;


}
#enterGameButtonLoadingScreenWrapper{
  z-index:1000;
  position:absolute; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}
#ui {
  user-select: none;
  z-index: 2;
  width: 100vw;
  height: 100vh; /* IMPORTANT */
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
}
.btn {
  border-radius: 0px !important;
  transition: transform 0.25s ease-in-out;
}
.btn:hover {
  transform: scale(1.1);
}
.btn:active {
  transform: scale(0.9);
}
#inventory {
  position: fixed;
  display: flex;
  justify-content: space-evenly;
  bottom: 5px;
  width: fit-content;
  margin-bottom: 1dvh;
  height: 7vh;
}
#mainMenuWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
h2 {
  font-size: 3dvh !important;
}
li {
  font-size: 2.1dvh !important;
}
ul {
  width: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  list-style-position: outside;
}
#mainMenu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
  text-align: center;
  width: 100%;
  height: 100%;
  z-index: 90;
 background:  RGB(171, 171, 255);
background: radial-gradient(circle,rgba(171, 171, 255, 1) 0%, rgba(103, 103, 145, 1) 100%);
}
#credits {
  text-align: center;
overflow:auto;
  position: absolute;
  top: 50%;
  color: var(--primary-color);
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background-color: var(--primary-bg-color);
  z-index: 92;
  width: 75%;
  height: 75%;
   box-sizing: border-box;
 
  overflow-y: auto; 
}

#settings {
  text-align: center;

  position: absolute;
  top: 50%;
  color: var(--primary-color);
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background-color: var(--primary-bg-color);
  z-index: 92;
  width: 75%;
  height: 75%;
}
#woldSelectButton{
  width:fit-content !important;
}
#worldSelect {
  text-align: center;

  position: absolute;
  top: 50%;
  color: var(--primary-color);
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background-color: var(--primary-bg-color);
  z-index: 92;
  width: 75%;
  height: 75%;
  box-sizing: border-box;
 
  overflow-y: auto; 
  max-height: 90vh;
}
input{
  font-size:1.8dvh;
}
label{
  font-size:1.8dvh;
}
#worldCreate {
  text-align: center;

  position: absolute;
  top: 50%;
  color: var(--primary-color);
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background-color: var(--primary-bg-color);
  z-index: 92;
  width: 75%;
  height: 75%;
  box-sizing: border-box;
 
  overflow-y: auto; 
  max-height: 90vh;
}
@keyframes popOpen {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes popCloseHide {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    transform: translate(-50%, -50%) scale(0);
  }
}
.popAnim {
  animation-name: popOpen;
  animation-duration: 0.25s;
  animation-fill-mode: both;
}
.popCloseHide {
  animation-name: popCloseHide;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}
.mainMenuButton {
  margin: 5px 0.7dvh 5px 0.7dvh !important;
  font-size: 4dvh !important;
  border-radius: 1px !important;
  padding: 0.95dvh 1.95dvh 0.95dvh 1.95dvh !important;
}
.slotHover {
  border-color: var(--slot-hover) !important;
}
.slot {
  aspect-ratio: 1/1;
  width: 7dvh;
  margin: 0.1vh;
  height: 7dvh;

  color: white;
  text-align: center;
  vertical-align: middle;
  background: var(--slot);
  border: 0.5vh solid var(--slot-border);
  box-sizing: border-box;
}

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--primary-bg-color);
  width: fit-content;
  min-width:50%;
  min-height:30dvh;
  height: fit-content;
  text-align: center;

  color: white;
  
  z-index: 203;
}
#popupTitle {
  font-weight: bold;
  margin-top: 1px;
  font-size: 6dvh !important;
  
  background-color: #2F2F2F;
}
#popupContent {
  margin-top: 1px;
  font-weight: 500;
  font-size: 2.5dvh;
}
#backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 91;
}
#errorBackdrop{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 202;
}

#popupClose {
  aspect-ratio: 1;
  position: fixed;
  top: 10px;
  right: 10px;
  border-radius: 0px !important;
}

.closeButton {
    aspect-ratio: 1/1 !important;
  position: fixed;
  top: 10px;
  right: 10px;
  
 

  
}
@keyframes loadingScreenChangeColor {
  0% {
 background: #3c4154;
background: radial-gradient(circle,rgba(60, 65, 84, 1) 0%, rgba(46, 46, 54, 1) 100%);
  }
  100% {
 background: #8891a8;
background: radial-gradient(circle,rgba(136, 145, 168, 1) 0%, rgba(68, 71, 87, 1) 100%);
  }
}
.loadingScreenChangeColor{
  animation-name: loadingScreenChangeColor;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
#loadingScreen{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:100%;
  height:100dvh;
  z-index:999;
 background: #3c4154;
background: radial-gradient(circle,rgba(60, 65, 84, 1) 0%, rgba(46, 46, 54, 1) 100%);
  color:whitesmoke;
  text-align:center;
  vertical-align:middle;
}

#loadingScreenWrapper{
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:45%;

}
.worldSelectRow{
  background-color: #252833;
  padding:1dvh;
 margin:0.5dvh;
overflow: visible;

  
}
#loadingTitle{
  font-size:8dvh;
}
#loadingProgressWrapper{
  border-radius:0px !important;
  border-width:0px !important;
 
}
#loadingProgress{
  border-radius:0px;
  background-color:rgb(145, 144, 255) !important;
   border-width:0px !important;
  
}
.worldDesc{
 font-size:2.1dvh;
}
.worldTitle{
font-size:3.25dvh;
}
.worldCreateButton{
  margin-top:.5dvh;
  margin-bottom:1.5dvh;
  font-size:2dvh !important;
}