@charset "UFT-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.7);
}
body {
  display: flex;
  background-color: #2b2b2b;
  justify-content: center;
}
.study {
  width: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /* text-align: center; */
  padding: 50px;
}
.view {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  border-right: #fff solid 1px;
}

label {
  position: relative;
  margin: 5px 0;
  padding: 5px 0;
  cursor: pointer;
}

label input {
  appearance: none;
  display: none;
}

label span {
  position: relative;
  display: block;
  width: 80px;
  height: 40px;
  background-color: #222;
  border-radius: 40px;
  box-shadow: inset 0 2px 15px rgba(0, 0, 0, 0.2),
              inset 0 2px 2px rgba(0, 0, 0, 0.2),
              inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

label .indicator {
  position: absolute;
  top: 5px;
  left: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(to bottom, #444, #222);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1),
              inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: 0.5s;
  transform: scale(0.9);
}
label input:checked ~ .indicator {
  left: 40px;
}

label .indicator::before {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s;
  width: 5px;
  height: 5px;
  background: #f00;
  border-radius: 50%;
  box-shadow: 0 0 2px #f00,
              0 0 5px #f00,
              0 0 10px #f00,
              0 0 15px #f00,
              0 0 20px #f00,
              0 0 25px #f00,
              0 0 30px #f00,
              0 0 40px #f00;
}

label input:checked ~ .indicator::before {

  background: #0f0;
  border-radius: 50%;
  box-shadow: 0 0 2px #0f0,
              0 0 5px #0f0,
              0 0 10px #0f0,
              0 0 15px #0f0,
              0 0 20px #0f0,
              0 0 25px #0f0,
              0 0 30px #0f0,
              0 0 40px #0f0;
}

/* ///////// */

.title {
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.7);
}