.themetoggle {
    position: fixed;
    left: 1vw;
    bottom: 1vh;
}

/* From Uiverse.io by santosh-sarkar */
.themetoggle .toggle {
    display: grid;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    place-items: center;
    cursor: pointer;
    line-height: 1;
}

.themetoggle .toggle > * {
    grid-area: 1 / 1 / 1 / 1;
}

.themetoggle .input {
    display: none;
}

.themetoggle .icon {
    transition: transform 500ms;
    line-height: 0.1;
}

.themetoggle .icon--moon {
    transition-delay: 200ms;
    color: #b4b4b4;
}

.themetoggle .icon--sun {
    transform: scale(0);
    color: #ffa500;
}

.themetoggle #theme-switch:checked+.icon--moon {
    transform: rotate(360deg) scale(0);
}

.themetoggle #theme-switch:checked~.icon--sun {
    transition-delay: 200ms;
    transform: scale(1) rotate(360deg);
}