:root {
  font-size: 16px;
}

html,
body {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 14rem;
  margin: 0;
}

body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.background {
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color:red;
  transition: background-color 300ms ease-out;
}

.background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="5" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.25"/></svg>');
  background-repeat: repeat;
  opacity: 0.4;
  transition: opacity 300ms ease-out;
}

input[type="checkbox"] {
  display: block;
  position: relative;
  z-index: 100;
  margin-top: -7rem;
  bottom: -7rem;
  width: 16rem;
  height: 7rem;
  border-radius: 3.5rem;
  cursor: pointer;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

input[type="checkbox"]:checked ~ .background {
  background-color: green;
}

input[type="checkbox"]:checked ~ .background::before {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="5" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.25"/></svg>');
  opacity: 0.8;
}

.styles {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
}

.styles label {
  cursor: pointer;
  font-family: sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.3);
  transition: color 300ms ease-out;
  margin: 0 0.5rem;
}

input[type="radio"] {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  border: none;
  outline: none;
  visibility: hidden !important;
}

input[type="radio"]#skeuomorphism:checked ~ .styles label[for="skeuomorphism"] {
  color: rgba(0, 0, 0, 0.55);
}

input[type="radio"]#neumorphism:checked ~ .styles label[for="neumorphism"] {
  color: rgba(0, 0, 0, 0.55);
}

input[type="checkbox"]:checked ~ input[type="radio"] ~ .styles label {
  color: rgba(0, 0, 0, 0.2);
}

input[type="checkbox"]:checked ~ input[type="radio"]#skeuomorphism:checked ~ .styles label[for="skeuomorphism"] {
  color: rgba(0, 0, 0, 0.35);
}

input[type="checkbox"]:checked ~ input[type="radio"]#neumorphism:checked ~ .styles label[for="neumorphism"] {
  color: rgba(0, 0, 0, 0.35);
}

/* TOGGLE SWITCH */

.toggle-switch {
  display: block;
  position: relative;
  width: 16rem;
  height: 7rem;
  border-radius: 3.5rem;
  transition: box-shadow 300ms ease-out;
}

.toggle-switch::before,
.toggle-switch::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 50;
  top: 0.25rem;
  left: 0.25rem;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 3.5rem;
  transition:
    left 300ms ease-out,
    background-color 300ms ease-out,
    box-shadow 300ms ease-out,
    opacity 300ms ease-out;
}

.toggle-switch::after {
  opacity: 0.4;
}

input[type="checkbox"]:checked ~ .toggle-switch::before,
input[type="checkbox"]:checked ~ .toggle-switch::after {
  left: 9.25rem;
}

input[type="checkbox"]:checked ~ .toggle-switch::after {
  opacity: 0.8;
}

/* SKEUOMORPHISM */

input[type="radio"]:nth-of-type(2):checked ~ .toggle-switch {
  box-shadow:
    inset 0 0 7rem 7rem rgba(0, 0, 0, 0.3),
    inset 0 0.8rem 0.4rem rgba(0, 0, 0, 0.3),
    inset 0 3rem 1rem rgba(0, 0, 0, 0.25),
    0 -0.25em 0.25em rgba(0, 0, 0, 0.2),
    0 0.25em 0.25em rgba(255, 255, 255, 0.08);
}

input[type="radio"]:nth-of-type(2):checked ~ .toggle-switch::before {
  background-color: #283241;
  box-shadow:
    inset 0 0.25rem 0.25rem rgba(255, 255, 255, 0.08),
    inset 0 -0.25rem 0.25rem rgba(0, 0, 0, 0.2),
    0 0.6rem 0.4rem rgba(0, 0, 0, 0.5),
    0 1.25rem 1rem rgba(0, 0, 0, 0.5);
}

input[type="checkbox"]:checked ~ input[type="radio"]:nth-of-type(2):checked ~ .toggle-switch {
  box-shadow:
    inset 0 0 7rem 7rem rgba(0, 0, 0, 0.1),
    inset 0 0.8rem 0.4rem rgba(0, 0, 0, 0.2),
    inset 0 3rem 1rem rgba(0, 0, 0, 0.1),
    0 -0.25em 0.25em rgba(0, 0, 0, 0.15),
    0 0.25em 0.25em rgba(255, 255, 255, 0.4);
}

input[type="checkbox"]:checked ~ input[type="radio"]:nth-of-type(2):checked ~ .toggle-switch::before {
  background-color: #d0cbc4;
  box-shadow:
    inset 0 0.25rem 0.25rem rgba(255, 255, 255, 0.4),
    inset 0 -0.25rem 0.25rem rgba(0, 0, 0, 0.15),
    0 0.6rem 0.4rem rgba(0, 0, 0, 0.25),
    0 1.25rem 1rem rgba(0, 0, 0, 0.25);
}

/* NEUMORPHISM */

input[type="radio"]:nth-of-type(3):checked ~ .toggle-switch::before {
  box-shadow:
    inset 0 0 7rem 7rem rgba(255, 255, 255, 0.005),
    -0.35rem -0.35rem 0.9rem 0.2rem rgba(255, 255, 255, 0.04),
    0.5rem 0.5rem 1rem 0.2rem rgba(0, 0, 0, 0.4),
    inset 0.25rem 0.25rem 0.5rem rgba(255, 255, 255, 0.04),
    inset -0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 0.4);
}

input[type="radio"]:nth-of-type(3):checked ~ .toggle-switch::after {
  opacity: 0;
}

input[type="checkbox"]:checked ~ input[type="radio"]:nth-of-type(3):checked ~ .toggle-switch::before {
  box-shadow:
    inset 0 0 7rem 7rem rgba(0, 0, 0, 0.01),
    -0.35rem -0.35rem 0.9rem 0.2rem rgba(255, 255, 255, 0.32),
    0.5rem 0.5rem 1rem 0.2rem rgba(0, 0, 0, 0.2),
    inset 0.25rem 0.25rem 0.5rem rgba(255, 255, 255, 0.32),
    inset -0.25rem -0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}