*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Custom Properties */
:root{
    --primary_color : #242424;
    --secondary_color : #fff;
    --ternary_color : #7e7e7e;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
}
label{
    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.3s;
}
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,2);
    transition: 0.3s;
}
input{
    width: 0;
    height: 0;
    visibility: hidden;
}
input:checked + label{
    background: var(--primary_color);
}
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: var(--secondary_color);
    z-index: -1;
    position: absolute;
}
input:checked + label + .background{
    background: var(--primary_color);
}
label svg{
    position: absolute;
    width: 120px;
    top: 40px;
    z-index: 100;
}
label svg.sun{
    top: 48px;
    left: 38px;
    fill: var(--secondary_color);
    transition: 0.3s;
}
label svg.moon{
    top: -303px;
    left: 340px;
    fill: var(--ternary_color);
    transition: 0.3s;
}
input:checked + label svg.sun{
    fill: var(--ternary_color);
}
input:checked + label svg.moon{
    fill: var(--secondary_color);
}