* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
}

.center {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Background slides */
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 300vw;
  height: 100vh;
  display: flex;
  transition: transform 1s ease;
  z-index: 0;
}

.slide {
  width: 100vw;
  height: 100vh;
}

.slide1 { background: #3498db; } /* Blue */
.slide2 { background: #9b59b6; } /* Purple */
.slide3 { background: #1abc9c; } /* Green */

/* Radio buttons hidden */
input[type="radio"] {
  display: none;
}

/* White outlined circles */
.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid white;
  border-radius: 50%;
  z-index: 5;
  top: 80%;
  cursor: pointer;
  transition: 0.3s ease;
}

.c1 { left: calc(50% - 90px); }
.c2 { left: calc(50% - 25px); }
.c3 { left: calc(50% + 40px); }

/* Sliding filled circle */
.dot {
  position: absolute;
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  top: calc(80% + 7px);
  left: calc(50% - 90px + 7px); /* Default for check-1 */
  z-index: 4;
  transition: all 1s ease;
  pointer-events: none;
}

/* Dot sliding logic */
#check-1:checked ~ .dot {
  transform: translateX(0px);
}

#check-2:checked ~ .dot {
  transform: translateX(65px);
}

#check-3:checked ~ .dot {
  transform: translateX(130px);
}

/* Background slide logic */
#check-1:checked ~ .bg {
  transform: translateX(0vw);
}

#check-2:checked ~ .bg {
  transform: translateX(-100vw);
}

#check-3:checked ~ .bg {
  transform: translateX(-200vw);
}