body,
main,
picture,
img,
input {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(30, 30, 30);
  display: grid;
  place-content: center;
  min-height: 100vh;
}
body main {
  --dragger-position: 50%;
  box-sizing: content-box;
  border-radius: 5px;
  border: 8px solid #FFF;
  background: #000;
  width: 80vw;
  height: 55vw;
  overflow: hidden;
  position: relative;
}
body main picture {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
}
body main picture img {
  all: unset;
  -o-object-position: left;
     object-position: left;
  overflow: hidden;
  height: inherit;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body main #before {
  z-index: 1;
}
body main #before img {
  width: 50%;
}
body main #slider {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  margin: 0;
  outline: 0;
}
body main #slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 1000px;
  background-color: #ffffff;
  cursor: pointer;
  border: none;
}
body main #slider::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  width: 8px;
  height: 1000px;
  background-color: #ffffff;
  cursor: pointer;
  border: none;
}
body main #slider::-ms-thumb {
  appearance: none;
  width: 8px;
  height: 100vh;
  background-color: #ffffff;
  cursor: pointer;
  border: none;
}
body main::after {
  content: "";
  background-image: url(../assets/dragger.svg);
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50%;
  left: var(--dragger-position);
  background-size: cover;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1;
}/*# sourceMappingURL=style.css.map */