<body>
  <input type="checkbox">
</body>
* {
  left: 0;
  top: 0;
  margin: 0;
}
input[type="checkbox"] {
  z-index: 3;
  width: 10vw;
  height: 4vw;
  -webkit-appearance: none;
  position: absolute;
  outline: none;
  border: none;
  cursor: pointer;
  left: 85vw;
  top: 10vh;
  border-radius: 2.5vw;
  background: #0B0E21;
}
input[type="checkbox"]:before {
  content: "";
  position: absolute;
  width: 3vw;
  height: 3vw;
  border-radius: 5vw;
  background: #f4f1de;
  left: .5vw;
  top: .5vw;
  transition: .5s;  
}
input[type="checkbox"]:checked {
  background: #f4f1de;
}
input:checked[type="checkbox"]:before {
  left: 6.5vw;
  background: #0B0E21;
}
input[type="checkbox"]:checked ~ #container {
  background: #0B0E21;
}
input[type="checkbox"]:checked ~ #container > h1 {
  color: #1F85A0;
}
input[type="checkbox"]:checked ~ #container > h3 {
  color: #C2BFA4;
}
input[type="checkbox"]:checked ~ #container > p {
  color: #7E4D65;
}
#container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  background: #f4f1de;
}
h1 {
  text-align: center;
  color: #e07a5f;
  font-family: 'Oswald', sans-serif;
  font-size: 5vw;
  margin: 12vh auto 0 auto;
}
h3 {
  text-align: center;
  color: #3d405b;
  font-family: 'Poppins', sans-serif;
  font-size: 2.5vw;
  margin: 5vh auto;
}
p {
  color: #7E4D65;
  font-size: 2.5vw;    
  font-family: 'Roboto', sans-serif;
  text-align: left;
  margin: 2vh 2vw;
}


@media (max-width: 720px) {
  input[type="checkbox"] {
    width: 20vw;
    height: 8vw;
    left: 75vw;
    border-radius: 25vw;
    top: 5vh;
  }
  input[type="checkbox"]:before {
    width: 6vw;
    height: 6vw;
    top: 1vw;
    left: 1vw;
  }
  input:checked[type="checkbox"]:before {
    left: 13vw;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.