@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap");

<meta name="viewport" content="width=device-width, initial-scale=-2.0" >

html, body {
  color: white;
  background-color: #1e1e23;
  text-align: center;
  font-family: "Raleway", sans-serif;
}
html h2, body h2 {
  margin-top: 50px;
  margin-bottom: 0;
  text-shadow: 5px 5px rgba(0, 0, 0, 0.4);
}
html h3, body h3 {
  margin: 0;
  opacity: 0.4;
}

.line, .carousel li img, .carousel li, .carousel {
  width: 100%;
}

.flex, .carousel-wrapper, .center, .carousel ul {
  display: flex;
}

.center, .carousel ul {
  align-items: center;
  justify-content: center;
}

.carousel-wrapper {
  position: relative;
  max-width: 600px;
  margin: 50px;
}
.carousel-wrapper input {
  display: none;
}

.carousel {
  overflow: hidden;
  border-radius: 15px;
}
.carousel ul {
  position: relative;
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  height: 90%;
  width: 2000%;
  transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.carousel li img {
  border-radius: 15px;
}

.nav-dot {
  position: absolute;
  cursor: pointer;
  margin-left: -303px;
  bottom: 33px;
  width: 25px;
  height: 25px;
  opacity: 0.5;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
.nav-dot:hover {
  opacity: 0.8;
  transform: scale(1.2);
}
.nav-dot:active {
  transform: scale(0.9);
}

.nav-dot[for=slide1] {
  left: 41%;
}

#slide1:checked ~ .carousel ul {
  left: 0%;
}
#slide1:checked ~ .nav-dot[for=slide1] {
  opacity: 1;
}

.nav-dot[for=slide2] {
  left: 47%;
}

#slide2:checked ~ .carousel ul {
  left: -100%;
}
#slide2:checked ~ .nav-dot[for=slide2] {
  opacity: 1;
}

.nav-dot[for=slide3] {
  left: 53%;
}

#slide3:checked ~ .carousel ul {
  left: -200%;
}
#slide3:checked ~ .nav-dot[for=slide3] {
  opacity: 1;
}

.nav-dot[for=slide4] {
  left: 59%;
}

#slide4:checked ~ .carousel ul {
  left: -300%;
}
#slide4:checked ~ .nav-dot[for=slide4] {
  opacity: 1;
}

.nav-dot[for=slide5] {
  left: 65%;
}

#slide5:checked ~ .carousel ul {
  left: -400%;
}
#slide5:checked ~ .nav-dot[for=slide5] {
  opacity: 1;
}

.nav-dot[for=slide6] {
  left: 71%;
}

#slide6:checked ~ .carousel ul {
  left: -600%;
}
#slide6:checked ~ .nav-dot[for=slide6] {
  opacity: 1;
}

.nav-dot[for=slide7] {
  left: 77%;
}

#slide7:checked ~ .carousel ul {
  left: -700%;
}
#slide7:checked ~ .nav-dot[for=slide7] {
  opacity: 1;
}

.nav-dot[for=slide8] {
  left: 83%;
}

#slide8:checked ~ .carousel ul {
  left: -800%;
}
#slide8:checked ~ .nav-dot[for=slide8] {
  opacity: 1;
}

.nav-dot[for=slide9] {
  left: 89%;
}

#slide9:checked ~ .carousel ul {
  left: -900%;
}
#slide9:checked ~ .nav-dot[for=slide9] {
  opacity: 1;
}

.nav-dot[for=slide10] {
  left: 95%;
}

#slide10:checked ~ .carousel ul {
  left: -1000%;
}
#slide10:checked ~ .nav-dot[for=slide10] {
  opacity: 1;
}

.nav-dot[for=slide11] {
  left: 101%;
}

#slide11:checked ~ .carousel ul {
  left: -1100%;
}
#slide11:checked ~ .nav-dot[for=slide11] {
  opacity: 1;
}

.nav-dot[for=slide12] {
  left: 107%;
}

#slide12:checked ~ .carousel ul {
  left: -1200%;
}
#slide12:checked ~ .nav-dot[for=slide12] {
  opacity: 1;
}

.nav-dot[for=slide13] {
  left: 113%;
}

#slide13:checked ~ .carousel ul {
  left: -1300%;
}
#slide13:checked ~ .nav-dot[for=slide13] {
  opacity: 1;
}

.nav-dot[for=slide14] {
  left: 119%;
}

#slide14:checked ~ .carousel ul {
  left: -1300%;
}
#slide14:checked ~ .nav-dot[for=slide14] {
  opacity: 1;
}

.nav-dot[for=slide15] {
  left: 125%;
}

#slide15:checked ~ .carousel ul {
  left: -1400%;
}
#slide15:checked ~ .nav-dot[for=slide15] {
  opacity: 1;
}

.nav-dot[for=slide16] {
  left: 131%;
}

#slide16:checked ~ .carousel ul {
  left: -1500%;
}
#slide16:checked ~ .nav-dot[for=slide16] {
  opacity: 1;
}

.nav-dot[for=slide17] {
  left: 137%;
}

#slide17:checked ~ .carousel ul {
  left: -1600%;
}
#slide17:checked ~ .nav-dot[for=slide17] {
  opacity: 1;
}

.nav-dot[for=slide18] {
  left: 143%;
}

#slide18:checked ~ .carousel ul {
  left: -1700%;
}
#slide18:checked ~ .nav-dot[for=slide18] {
  opacity: 1;
}

.nav-dot[for=slide19] {
  left: 149%;
}

#slide19:checked ~ .carousel ul {
  left: -1800%;
}
#slide19:checked ~ .nav-dot[for=slide19] {
  opacity: 1;
}

.nav-dot[for=slide20] {
  left: 155%;
}

#slide20:checked ~ .carousel ul {
  left: -1900%;
}
#slide20:checked ~ .nav-dot[for=slide20] {
  opacity: 1;
}

.right-arrow, .left-arrow {
  display: none;
  position: absolute;
  cursor: pointer;
  font-weight: bolder;
  text-shadow: 0 0 7.5px rgba(0, 0, 0, 0.7);
  top: 50%;
  z-index: 1;
  opacity: 0.7;
  margin-top: -25px;
  height: 50px;
  font-size: 50px;
  transition: 0.2s;
}
.right-arrow:hover, .left-arrow:hover {
  opacity: 1;
  transform: scale(1.2);
}
.right-arrow:active, .left-arrow:active {
  transform: scale(0.9);
}

.left-arrow {
  left: 15px;
}

.right-arrow {
  right: 15px;
}

#slide1:checked ~ .left-arrow[for=slide20], #slide1:checked ~ .right-arrow[for=slide2] {
  display: block;
}

#slide2:checked ~ .left-arrow[for=slide1], #slide2:checked ~ .right-arrow[for=slide3] {
  display: block;
}

#slide3:checked ~ .left-arrow[for=slide2], #slide3:checked ~ .right-arrow[for=slide4] {
  display: block;
}

#slide4:checked ~ .left-arrow[for=slide3], #slide4:checked ~ .right-arrow[for=slide5] {
  display: block;
}

#slide5:checked ~ .left-arrow[for=slide4], #slide5:checked ~ .right-arrow[for=slide6] {
  display: block;
}

#slide6:checked ~ .left-arrow[for=slide5], #slide6:checked ~ .right-arrow[for=slide7] {
  display: block;
}

#slide7:checked ~ .left-arrow[for=slide6], #slide7:checked ~ .right-arrow[for=slide8] {
  display: block;
}

#slide8:checked ~ .left-arrow[for=slide7], #slide8:checked ~ .right-arrow[for=slide9] {
  display: block;
}

#slide9:checked ~ .left-arrow[for=slide8], #slide9:checked ~ .right-arrow[for=slide10] {
  display: block;
}

#slide10:checked ~ .left-arrow[for=slide9], #slide10:checked ~ .right-arrow[for=slide11] {
  display: block;
}

#slide11:checked ~ .left-arrow[for=slide10], #slide11:checked ~ .right-arrow[for=slide12] {
  display: block;
}

#slide12:checked ~ .left-arrow[for=slide11], #slide12:checked ~ .right-arrow[for=slide13] {
  display: block;
}

#slide13:checked ~ .left-arrow[for=slide12], #slide13:checked ~ .right-arrow[for=slide14] {
  display: block;
}

#slide14:checked ~ .left-arrow[for=slide13], #slide14:checked ~ .right-arrow[for=slide15] {
  display: block;
}

#slide15:checked ~ .left-arrow[for=slide14], #slide15:checked ~ .right-arrow[for=slide16] {
  display: block;
}

#slide16:checked ~ .left-arrow[for=slide15], #slide16:checked ~ .right-arrow[for=slide17] {
  display: block;
}

#slide17:checked ~ .left-arrow[for=slide16], #slide17:checked ~ .right-arrow[for=slide18] {
  display: block;
}

#slide18:checked ~ .left-arrow[for=slide17], #slide18:checked ~ .right-arrow[for=slide19] {
  display: block;
}

#slide19:checked ~ .left-arrow[for=slide18], #slide19:checked ~ .right-arrow[for=slide20] {
  display: block;
}

#slide20:checked ~ .left-arrow[for=slide19], #slide20:checked ~ .right-arrow[for=slide1] {
  display: block;
}