* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #E7DEE7 0%, #fcfcfc 20%, #E7DEE7 100%);
  box-shadow: inset rgba(0, 0, 0, 0.1) -50px -50px 200px 12px;
}

input, label {
  z-index: 2;
}

.the-darkness {
  z-index: 1;
}

label {
  position: relative;
  width: 225px;
  height: 90px;
  background-color: #d8d8d8;
  border: 3px solid #D6D6D6;
  border-radius: 100px;
  box-shadow: inset rgba(255, 255, 255, 0.35) -4px 14px 36px 0, inset rgba(0, 0, 0, 0.05) 4px -10px 36px 0, rgba(0, 0, 0, 0.05) 0 0 24px 6px;
  cursor: pointer;
  transition: border-color 2s ease-out, box-shadow 2s ease-out, transform 0.1s ease-out;
}
label:before, label:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 100px;
}
label:before {
  left: 36px;
  width: 9px;
  height: 9px;
  background-color: #D6D6D6;
  box-shadow: inset rgba(0, 0, 0, 0.08) 2px 1px 0 0;
  transition: background-color 2s ease-out;
}
label:after {
  right: 24px;
  width: 40px;
  height: 40px;
  background-color: #E5E5E5;
  box-shadow: inset rgba(0, 0, 0, 0.12) 2px 20px 20px -12px, inset rgba(255, 255, 255, 0.4) -4px -4px 12px 0, rgba(0, 0, 0, 0.1) 0 4px 8px -6px;
}

input {
  visibility: hidden;
}
input:checked + label {
  background-color: #E5E5E5;
  border-color: #B4C307;
  box-shadow: inset rgba(255, 255, 255, 0.35) -4px 14px 36px 0, inset rgba(0, 0, 0, 0.05) 4px -10px 36px 0, rgba(180, 195, 7, 0.6) 0 0 30px -4px;
  transform: scale(0.99);
  transition: border-color 0.2s ease-out, box-shadow 2s ease-out, transform 0.1s ease-out;
}
input:checked + label:before {
  background-color: #F6F107;
  box-shadow: rgba(246, 241, 7, 0.4) 0 0 6px 6px;
  transition: background-color 0.2s ease-out;
}
input:active + label {
  transform: scale(0.98);
}

.the-darkness {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: inset rgba(0, 0, 0, 0.6) 0 0 300px;
  transition: opacity 0.5s ease-out;
}

input:checked ~ div {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}