@font-face {
  font-family: 'Minecraft';
  src: url('/assets/fonts/minecraft.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
}

main {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111030;
  background: linear-gradient(151deg, rgba(17, 16, 48, 1) 0%, rgba(25, 10, 36, 1) 50%, rgba(20, 7, 26, 1) 100%);
}

#loading {
  display: none;
}

.mcbutton-wrapper {
  margin-top: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 465px;
  height: 174px;
  justify-content: center;
  align-items: center;
  background-image: url('/assets/images/bg.png');
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  z-index: 3;
}

.mcbutton-backend {
  font-family: 'Minecraft';
  font-size: 30px;
  pointer-events: all;
  position: relative;
  z-index: 5;
}

.mcbutton-backend a {
  text-decoration: none;
}

.mcbutton-back {
  background-color: #1d4d13;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.mcbutton {
  width: 365px;
  height: 80px;
  background-color: #1e1e1f;
  color: white;
  font-weight: 100;
  letter-spacing: 1px;
  border: 6px solid #1e1e1f;
  border-top: 14px solid #1e1e1f;
  user-select: none;
  pointer-events: none;
}

.mcbutton-front {
  background-color: #3c8527;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  box-shadow:
  inset 0 6px #639d52,  /* top */
  inset 6px 0 #639d52,  /* left */
  inset 0 -6px #4f913c, /* bottom */
  inset -6px 0 #4f913c; /* right */
  cursor: pointer;
  pointer-events: none;
}

@media (hover: hover) {
  .mcbutton-front:hover {
    background-color: #377926;/* #2a641c; */
    margin-bottom: 16px;
    pointer-events: all;
    box-shadow:
    inset 0 6px #6ea55e,  /* top */
    inset 6px 0 #6ea55e,  /* left */
    inset 0 -6px #549443, /* bottom */
    inset -6px 0 #549443; /* right */
    /* inset 0 6px #7fa277,  /* top */
    /* inset 6px 0 #7fa277,  /* left */
    /* inset 0 -6px #699260, /* bottom */
    /* inset -6px 0 #699260; /* right */
  }
}

.mcbutton-front.active {
  background-color: #265e1b; /* #1d4d13 */
  margin-bottom: 0;
  box-shadow:
  inset 0 6px #75946f,  /* top */
  inset 6px 0 #75946f,  /* left */
  inset 0 -6px #5b7e54, /* bottom */
  inset -6px 0 #5b7e54; /* right */
}

.mcbutton-back:hover {
  background-color: #1d4d13;
}

.mcbutton-backend.active {
  padding-top: 8px;
}

.mcbutton.active {
  border-top: 6px solid #1e1e1f;
}

@media (max-width: 465px) {
  .mcbutton-wrapper {
    width: calc(465px * 0.8);
    height: calc(174px * 0.8);
  }
  .mcbutton {
    width: calc(365px * 0.8);
    height: calc(80px * 0.8);
    font-size: calc(30px * 0.8);
    border: 5px solid #1e1e1f;
    border-top: 13px solid #1e1e1f;
  }
  .mcbutton-backend {
    font-size: calc(30px * 0.8);
  }
  .mcbutton-front {
    box-shadow:
    inset 0 4.8px #639d52,  /* top */
    inset 4.8px 0 #639d52,  /* left */
    inset 0 -4.8px #4f913c, /* bottom */
    inset -4.8px 0 #4f913c; /* right */
  }
  .mcbutton-front.active {
    box-shadow:
    inset 0 4.8px #75946f,  /* top */
    inset 4.8px 0 #75946f,  /* left */
    inset 0 -4.8px #5b7e54, /* bottom */
    inset -4.8px 0 #5b7e54; /* right */
  }
  .mcbutton.active {
    border-top: 5px solid #1e1e1f;
  }  
}


@media (max-width: 375px) {
  .mcbutton-wrapper {
    width: calc(465px * 0.7);
    height: calc(174px * 0.7);
  }
  .mcbutton {
    width: calc(365px * 0.7);
    height: calc(80px * 0.7);
    font-size: calc(30px * 0.7);
    border: 4px solid #1e1e1f;
    border-top: 12px solid #1e1e1f;
  }
  .mcbutton-backend {
    font-size: calc(30px * 0.7);
  }
  .mcbutton-front {
    box-shadow:
    inset 0 4.2px #639d52,  /* top */
    inset 4.2px 0 #639d52,  /* left */
    inset 0 -4.2px #4f913c, /* bottom */
    inset -4.2px 0 #4f913c; /* right */
  }
  .mcbutton-front.active {
    box-shadow:
    inset 0 4.2px #75946f,  /* top */
    inset 4.2px 0 #75946f,  /* left */
    inset 0 -4.2px #5b7e54, /* bottom */
    inset -4.2px 0 #5b7e54; /* right */ 
  }
  .mcbutton.active {
    border-top: 4px solid #1e1e1f;
  }
} 

@media (max-width: 340px) {
  .mcbutton-wrapper {
    width: calc(465px * 0.6);
    height: calc(174px * 0.6);
  }
  .mcbutton {
    width: calc(365px * 0.6);
    height: calc(80px * 0.6);
    font-size: calc(30px * 0.6);
    border: 3px solid #1e1e1f;
    border-top: 11px solid #1e1e1f;
  }
  .mcbutton-backend {
    font-size: calc(30px * 0.6);
  }
  .mcbutton-front {
    box-shadow:
    inset 0 3.6px #639d52,  /* top */
    inset 3.6px 0 #639d52,  /* left */
    inset 0 -3.6px #4f913c, /* bottom */
    inset -3.6px 0 #4f913c; /* right */
  }
  .mcbutton-front.active {
    box-shadow:
    inset 0 3.6px #75946f,  /* top */
    inset 3.6px 0 #75946f,  /* left */
    inset 0 -3.6px #5b7e54, /* bottom */
    inset -3.6px 0 #5b7e54; /* right */
  }
  .mcbutton.active {
    border-top: 3px solid #1e1e1f;
  }
}