input#theme-switch {
    position: fixed;
    right: 10px;
    top: 10px;
    cursor: pointer;
    appearance: none;
    width: 80px;
    height: 40px;
    background-color: #ededed;
    border-radius: 20px;
    border: 2px solid #ccc;
    user-select: none;
    outline: none;
}

input#theme-switch:focus {
    outline: none;
    box-shadow: none;
}

input#theme-switch::after {
    content: '';
    width: 40px;
    height: 40px;
    background-color: #1d1d1c;
    border-radius: 40px;
    transform: scale(0.8);
    position: absolute;
    left: 0;
    top: -2px;
    transition: left 0.7s, background-image 0.7s;
    background-image: url('../img/light-icon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    user-select: none;
    pointer-events: none;
}


input#theme-switch:checked::after {
    left: 40px;
    background-image: url('../img/dark-icon.png');
    background-size: 70%;
    background-position: center;
    user-select: none;
    pointer-events: none;
}