@font-face {
  font-family: "Minecraft";
  src: url("/Minecraft.woff") format("woff");
}

body {
  font-family: "Minecraft", mono;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  margin: 0;
  padding: 0;

  overflow: hidden;
}

#debug {
  position: absolute;
  display: none;
  flex-direction: column;
  top: 64px;
  left: 16px;
  color: white;
  text-shadow: 1.5px 1.5px 0px rgba(75, 75, 75, 0.8);
  font-family: "Minecraft", mono;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  z-index: 1000;
}

.stat {
  padding: 0px 8px;
  background: rgba(255, 255, 255, 0.1);
  width: "100%";
  text-align: left;
}

#cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}

#toolbar {
  position: absolute;
  display: flex;
  width: min(720px, 45vw);
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);

  #toolbar-bg {
    position: relative;
    width: 100%;
    image-rendering: pixelated;
  }

  #toolbar-active-border {
    position: absolute;
    left: 0%;
    width: 13.5%;
    transform: translateX(-4.5%) translateY(-4.5%);
    image-rendering: pixelated;
  }

  .toolbar-slot {
    position: absolute;
    left: 0%;
    width: 13.5%;
    aspect-ratio: 1;
    transform: translateX(-4.5%) translateY(-4.5%) scale(0.65);
    image-rendering: pixelated;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  #toolbar-slot-1 {
    left: 0%;
  }

  #toolbar-slot-2 {
    left: 11%;
  }

  #toolbar-slot-3 {
    left: 22%;
  }

  #toolbar-slot-4 {
    left: 33%;
  }

  #toolbar-slot-5 {
    left: 44%;
  }

  #toolbar-slot-6 {
    left: 55%;
  }

  #toolbar-slot-7 {
    left: 66%;
  }

  #toolbar-slot-8 {
    left: 77%;
  }

  #toolbar-slot-9 {
    left: 88%;
  }
}

#main-menu {
  --btn-size: 30px;
  width: calc(var(--btn-size) * 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;

  img {
    width: 130%;
    height: auto;
  }
}

#buttons {
  display: grid;
  grid-template-columns: var(--btn-size) calc(var(--btn-size) * 10) var(
      --btn-size
    );
  grid-template-rows: repeat(3, var(--btn-size));
  grid-template-areas: 
  ". 		first 		."
  ". 		second 		."
  ". 		third 		.";
  grid-gap: 8px;

  & .mc-button:nth-child(1) {
    grid-area: first;
  }

  & .mc-button:nth-child(2) {
	grid-area: second;
  }

  & .mc-button:nth-child(3) {
	grid-area: third;
  }
}

#menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url("/textures/dirt.png");
  background-repeat: repeat;
  background-size: 64px 64px;
  image-rendering: pixelated;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  p {
    color: white;
    text-shadow: 1.5px 1.5px 0px rgba(75, 75, 75, 0.8);
  }

  #loading {
    display: none;
  }

  #loading-progress {
    width: 200px;
    height: 3px;
    background: #808080;

    #loading-progress-bar {
      width: 0%;
      height: 100%;
      background: #80ff80;
    }
  }
}

.mc-button {
  height: var(--btn-size);
  width: calc(var(--btn-size) * 10);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;

  background: #999 url("https://i.ibb.co/rb2TWXL/bgbtn.png") center / cover;
  image-rendering: pixelated;
  border: 2px solid #000;

  &:focus {
    outline: none;
  }

  /* Mouse over */
  &:hover .title,
  &:focus .title {
    background-color: rgba(100, 100, 255, 0.45);
    text-shadow: 2px 2px #202013cc;
    color: #ffffa0;
  }
  &:active .title {
    box-shadow: inset -2px -4px #0004, inset 2px 2px #fff5;
  }
  /* Button title */
  .title {
    width: 100%;
    height: 100%;
    padding-bottom: 0.3em;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #ddd;
    text-shadow: 2px 2px #000a;
    box-shadow: inset -2px -4px #0006, inset 2px 2px #fff7;
  }
  /* Others */
  &.full {
    width: 100%;
    height: 100%;
  }
}
