body{
   margin: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
label{
    margin-top: -550px;
    margin-left: 850px;
    width: 500px;
    height: 200px;
    position: relative;
    display: block;
    background: #ebebeb;
    border-radius: 200px;
    box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4), inset 0px -5px 15px rgba(255, 255,255,0.4);
    cursor: pointer;
    transition:0.5s ;
}
label:after{
    content: "";
    width: 180px;
    height: 180px;
    position: absolute;
    top:10px;
    left: 10px;
    background: linear-gradient(180deg,#ffcc89,#d8860b);
    border-radius: 180px;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.2);

}
input{
    width: 0;
    height:0 ;
    visibility: hidden;
}
input:checked+label{

    background:#242424;

}
input:checked+label:after{
    left: 490px;
    transform: translateX(-100%);
    background: linear-gradient(180deg,#777,#3a3a3a);
}
label:active:after{
    width: 260px;
}
.background{
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: -1;
    position: absolute;
    transition: 0.3s;
}
input:checked+label+.background{
    background:#242424;
}
label i{
    position: relative;
    top: 60px;
    z-index: 100;
    font-size: 90px;
    margin: 0 50px;
}
label i#moon{
    margin-left: 170px;
    color: #242424;
}


 label i#sun{
color: #fff;

}
input:checked+label i#sun{
    color: #7e7e7e;
}
input:checked+label i#moon{
    color: #fff;
} 