:root {
  --bg-color: #F1E8E8;
  --white: #FFFFFF;
  --black: #282F3C;
  --pink: rgba(255, 98, 98, 1);
  --pink-light: rgba(255, 98, 98, 0.3);
  --pink-lighter: rgba(255, 98, 98, 0.1);
  --gray: #959595;
  --trans: 0.3s ease;
}

body {
  background: var(--bg-color);
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  padding-top: 5rem;
}

.container {
  position: relative;
}


/* Input checkbox */
input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  top: 10px;
  left: 10px;
  background: var(--pink);
  border-radius: 20rem;
  transition: var(--trans);
  transform: translateX(0px);
}

/* Toggle button */
input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  color: var(--pink);
  width: 95px;
  height: 35px;
  display: block;
  border-radius: 20rem;
  transition: var(--trans);
  background: var(--pink-lighter);
}

/* Toggle Text */
input[type="checkbox"] + label span {
  position: absolute;
  top: 10px;
  left: 35px;
}

input[type="checkbox"] + label span.light, 
input[type="checkbox"]:checked + label span.dark {
  display: none;
}

input[type="checkbox"]:checked + label span.light {
  display: inline;
}

/* In Dark Mode button */
input[type="checkbox"]:checked + label {
  transition: var(--trans);
  background: var(--pink-lighter);
}

input[type="checkbox"]:checked + label span {
  margin-right: 16px;
  margin-left: -13px;
}

input[type="checkbox"]:checked + label::before {
  transition: var(--trans);
  transform: translateX(59px);
}

input[type="checkbox"]:checked:hover + label,
input[type="checkbox"]:not(:checked):hover + label {
  background: var(--pink-light);
}