/* Minecraft switch made by: csozi | Website: english.csozi.hu*/

/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2em;
  cursor: pointer;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.off {
  position: absolute;
  content: "";
  height: 2em;
  width: 2em;
  background-color: white;
  transition: .4s;
  image-rendering: pixelated;
  opacity: 1;
}

.on {
  position: absolute;
  content: "";
  height: 2em;
  width: 2em;
  background-color: white;
  transition: .4s;
  image-rendering: pixelated;
  opacity: 0;
}

.switch input:checked+.slider {
  background-color: #ccc;
}

.switch input:focus+.slider {
  box-shadow: 0 0 1px #ccc;
}

.switch input:checked~.off {
  transform: translateX(2em);
}

.switch input:checked~.on {
  transform: translateX(2em);
  opacity: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg-color: rgb(30, 30, 30);
  --border-color: rgb(40, 18, 18);
  --primary-green: rgb(0, 140, 69);
  --light-green: rgb(39, 206, 64);
  --medium-dark-green: rgb(12 110 61);
  --dark-green: rgb(6, 77, 42);
  --border-color: rgb(40, 18, 18);
  --text-color: white;
  --primary-hover: rgb(10, 152, 80);
}


.minecraft-button {
  text-decoration: none;
  text-align: center;
  text-shadow: var(--dark-green) 0 .1em 0;
  color: var(--text-color);
  background-color: var(--primary-green);
  position: relative;

  width: 6em;
  padding-bottom: .3em;
  border-radius: .1rem;
}

.minecraft-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -.175em;
  width: 105%;
  height: 100%;
  background-color: var(--medium-dark-green);
  z-index: -1;
  border: .07em solid var(--border-color)
}

.minecraft-button::after {
  content: '';
  border: 1px solid red;
  position: absolute;
  top: -0.175em;
  left: 0;
  width: 100%;
  height: 125%;
  background-image: linear-gradient(var(--light-green) 50%,
      var(--dark-green));
  z-index: -1;
  border: .07em solid var(--border-color);
}

.minecraft-button:hover {
  background-color: var(--primary-hover);
}