html, body {
  height: 100%;
}

body {
  /* display: flex;*/
  /* align-items: center; */   /* center carousel di layar */
  justify-content: center;
  background: #111;      /* optional biar kontras */
}

#carousel {
  position: relative;
  height: 80vh;          /* 80% tinggi layar */
  width: 100%;
  margin: 0 auto;
  overflow: hidden;

  display: flex;
  align-items: center;   /* center vertikal isi */
  justify-content: center;
}

@media (max-width: 768px) {
  #carousel {
    height: 70vh;
  }
}

#carousel div {
  position: absolute;
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
  opacity: 1;
}

#carousel div img {
  width: 40vw;       /* responsif berdasarkan layar */
  max-width: 400px;
  transition: width 1s;
}

/* hide left */
#carousel div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}

#carousel div.hideLeft img {
  width: 200px;
}

/* hide right */
#carousel div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}

#carousel div.hideRight img {
  width: 200px;
}

/* prev */
#carousel div.prev {
  z-index: 5;
  left: 30%;
  transform: translateY(50px) translateX(-50%);
}

#carousel div.prev img {
  width: 300px;
}

/* prev second */
#carousel div.prevLeftSecond {
  z-index: 4;
  left: 15%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}

#carousel div.prevLeftSecond img {
  width: 200px;
}

/* selected (center) */
#carousel div.selected {
  z-index: 10;
  left: 50%;
  transform: translateY(0px) translateX(-50%);
}

#carousel div {
  top: 50%;
  transform: translateY(-50%);
}

#carousel div.selected img {
  height: 80vh;     /* 80% tinggi layar */
  width: auto;      /* biar proporsi tidak rusak */
  max-width: 90vw;  /* biar tidak keluar layar */
  transform: translateY(0px) translateX(-50%);  
}

/* next */
#carousel div.next {
  z-index: 5;
  left: 70%;
  transform: translateY(50px) translateX(-50%);
}

#carousel div.next img {
  width: 300px;
}

/* next second */
#carousel div.nextRightSecond {
  z-index: 4;
  left: 85%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}

#carousel div.nextRightSecond img {
  width: 200px;
}

/* buttons */
.buttons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}