.slideshow {
    width: 750px;
    height: 200px;
    margin: 100px auto;
  }
  .slideshow .inner {
    position: relative;
    top: -80px;
    width: 100%;
    height: 100%;
  }
  .slideshow .inner .show-img {
    width: 300px;
    height: 200px;
    position: absolute;
    transition: 0.3s;
    box-shadow: 8px 8px 16px rgb(0, 0, 0,.6);
  }
  .slideshow .inner .show-img img {
    width: 100%;
    height: 100%;
  }
  .slideshow .arrow {
    border: double var(--dark-blue);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    position: relative;
    top: 10px;
    z-index: 800;
  }
  .slideshow .arrow.left  {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    right: 50px;

  }
  .slideshow .arrow.right  {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    left: 20px;
  }

  .slideshow .switch-button {
    position: relative;
    top: 180px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .slideshow .switch-button p {
    width: fit-content;
    margin: 0 5px;
    float: left;
    text-indent: 0;
    cursor: pointer;
    background-color:aliceblue;
    color:var(--blue);
    border-radius: 20px;
    font-family: 'Louis';
    box-shadow: 8px 8px 16px rgb(0, 0, 0,.6);
  }
  .slideshow .switch-button p:first-child {
    background-color: var(--flower-orange);
  }
  .slideshow #last {
    transform: translateX(0);
    z-index: 9;
    opacity: 1;
  }
  .slideshow #first {
    transform: translateX(200px) scale(1.3);
    z-index: 99;
    opacity: 1;
  }
  .slideshow #second {
    transform: translateX(400px);
    z-index: 9;
    opacity: 1;
  }
  .slideshow #left {
    transform: translateX(-100px);
    z-index: 1;
    opacity: 0;
  }
  .slideshow #right {
    transform: translateX(500px);
    z-index: 1;
    opacity: 0;
  }