@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
* {
  box-sizing:border-box
}



.dropdown-container {
    position: fixed;
    right: 10px;
    top: 20px;
    display: flex;
    align-items: center;
      margin-right: 20px;

    gap: 8px; /* Space between text and dropdown */
}

.dropdown-container span {
    font-size: 16px;
    color: black;
    font-family: 'Courier';
}


body {
  background:whitesmoke;
}

h1 {
  color: black;
  text-align:left;
  font-size: 18px;
  font-family: 'Courier';
  font-weight: 300;
  margin-bottom:0;
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 60%;
}

.line {
  width:100px;
  height:1px;
  margin:20px auto 40px auto;
  border-bottom:1px solid white;
}

img {
  width:100%;
  display:block;
}

.container {
  width:50%;
  display:block;
  margin:30px auto
}

#before-after-slider {
  width:100%;
  position:relative;
  overflow:hidden;
  border:3px solid white;
}

#after-image {
  display:block
}

#before-image {
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  left:0;
  overflow:hidden;
  z-index:2;
}

#resizer {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  top: 0;
  left: 50%;
  height: 100%;
  width: 40px; /* Wider drag zone for easier grabbing */
  transform: translateX(-50%); /* Center the resizer exactly */
  background: transparent; /* No line */
  cursor: ew-resize;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

#resizer:after {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: black;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3)
  }
}

@media (max-width:767px) {
  .container {
    width:100%;
    padding:0 20px
  }

  .dropdown-container {
    margin-right: 20px;
  }
}