<input class="ios-switch" type="checkbox">
<iframe class="main" src="https://mankeung.github.io/docs/mk-data">

.btn {
    border-radius: 31px;
    width: 102px;
    height: 62px;
    background-color: #e9e9eb;
}
.ios-switch {
    position: relative;
    appearance: none;
    cursor: pointer;
    transition: all 100ms;
    @extend .btn;
    &::before {
        position: absolute;
        content: "";
        transition: all 300ms cubic-bezier(.45, 1, .4, 1);
        @extend .btn;
    }
    &::after {
        position: absolute;
        left: 4px;
        top: 4px;
        border-radius: 27px;
        width: 54px;
        height: 54px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(#000, .3);
        content: "";
        transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
    }
    &:checked {
        background-color: #5eb662;
        & + .main {
            filter: invert(1) hue-rotate(180deg);
        }
        &::before {
            transform: scale(0);
        }
        &::after {
            transform: translateX(40px);
        }
    }
}

.main {
  background-color: #fff;
  transition: all 300ms;
  width: 100vw;
  height: calc(100vh - 62px);
  border: none;
}

* {
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

img,
video {
    filter: invert(1) hue-rotate(180deg);
}