body {
  font-family: "Kanit", sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #dcfdff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%234972cc' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%231c0faa' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%235a68cd' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%231d12a5' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%236e5bca' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%231d14a1' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23834bc3' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%231e169c' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%239734b9' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%231f1898' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23aa00aa' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23201993' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

section {
  text-align: center;
  margin: auto;
  width: 200px;
  padding: 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.good,
.cheap,
.fast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.switch {
  position: relative;
  height: 2em;
  width: 3.7em;
}
.switch-line {
  position: absolute;
  z-index: 5;
  top: 25%;
  background-color: #909090;
  height: 1em;
  width: 3.8em;
  border-radius: 2em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  transition: all 250ms ease-in;
}
.switch-circle {
  position: absolute;
  z-index: 10;
  left: 0;
  background-color: #DCDCDC;
  height: 2em;
  width: 2em;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 250ms ease-in;
}

/* Good */
.good .switch.active .switch-line {
  background-color: #2a49c6;
  transition: all 250ms ease-in;
}
.good .switch.active .switch-circle {
  left: 48%;
  background-color: #2a40c6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 250ms ease-in;
}

/* Cheap */
.cheap .switch.active .switch-line {
  background-color: #2ac64c;
  transition: all 250ms ease-in;
}
.cheap .switch.active .switch-circle {
  left: 48%;
  background-color: #2ac64c;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 250ms ease-in;
}

/* Fast */
.fast .switch.active .switch-line {
  background-color: #c62f2a;
  transition: all 250ms ease-in;
}
.fast .switch.active .switch-circle {
  left: 48%;
  background-color: #c62f2a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 250ms ease-in;
}