@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap");

body {
  background-color: #3d3d3d;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  max-width: 1024px;
  width: 90%;
}

:root {
  --ancho: 35px;
}

* {
  font-family: "Nunito", sans-serif;
}

h1 {
  color: #fff;
}

.switch {
  font-family: "Nunito", sans-serif;
}

.switch > input {
  display: none;
}

.switch > label {
  margin-top: 8px;
  position: relative;
  display: block;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgb(177, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  width: calc(2 * var(--ancho));
  height: var(--ancho);
  border-radius: var(--ancho);
  display: flex;
  align-items: center;
  color: rgb(255, 0, 0);
  text-shadow: 0px 0px 10px rgb(255, 0, 0);
  box-shadow: 0px 0px 10px 1px rgba(255, 0, 0, 0.74);
  cursor: pointer;
}

.switch > input:checked + label {
  content: "✔";
  color: rgb(172, 255, 78);
  background: rgb(0, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(99, 255, 0, 1) 100%
  );
  box-shadow: 0px 0px 10px 6px rgb(43, 255, 0);
  text-shadow: 0px 0px 10px rgb(30, 255, 0);
  transition: all 0.5s ease-in-out;
}

.switch > label:before {
  content: "✖";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: var(--ancho);
  height: var(--ancho);
  background: rgb(255, 0, 0);
  background: radial-gradient(circle, rgb(190, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  color: red;
  text-shadow: 0px 0px 10px rgba(255, 0, 0, 0.829);
  border-radius: 50%;
  transition: all 0.5s ease-in-out;
}
.switch > input:checked + label:before {
  content: "✔";
  color: rgb(105, 255, 67);
  background: #00ff00;
  background: radial-gradient(circle, rgb(9, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.switch > input:checked + label:before {
  transform: translateX(var(--ancho));
}

.switch > label > span {
  position: relative;
  left: calc(calc(var(--ancho) * 2) + 5px);
}