:root {
    --clocktowerStrokeOne: #FFF;
    --clocktowerStrokeTwo: #b31b1b;
    --clocktowerBGOne: #FFF;
    --clocktowerBGTwo: #FFF;
}


.mode-switch {

    height: 50px;
    width: 50px;
    aspect-ratio: 1/1;
    border-radius: 99em;
    background-position: left center;
    background-size:contain;
    background: transparent;
    z-index: 10;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    cursor: pointer;

}


.mode-switch.initial .sky {
            animation: unset !important;
        }


.mode-switch.initial .clocktower svg g > * {
                        animation: unset !important;
                    }


.mode-switch .clocktower {
        background-size: 50px;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        
    }


.mode-switch .clocktower .svg g > * {

                }


.mode-switch .sky {
        height: 50px;
        width: 50px;
        position: absolute;
        left: 0;
        top: 0;
        animation-fill-mode: forwards;
        z-index: 0;
        background: transparent;
    }


.mode-switch .sky:before, .mode-switch .sky:after {
            display: block;
            position: absolute;
            font-size: var(--step-0);
            font-family: var(--font-awesome);
            transition: all 500ms ease-in;

        }


.mode-switch .sky:before {
            content: '\e28f';
            color: hsl(var(--carnelian-dm, var(--carnelian))); 
            top: 0em;
            left: 60%;


        }


.mode-switch .sky:after {
            content: '\f755';
            color: lightyellow;
            bottom: 0;
            left: 0;
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
        }


.mode-switch.light-mode {
        border: 1px solid hsl(var(--carnelian-dm, var(--carnelian)));
        transition: border 1s ease-in;
        background: transparent;
    }


.mode-switch.light-mode .sky {
            will-change: transform, opacity, fill; /* Prevents flicker in Safari */
            animation: rotateInLight 1000ms ease-in;
            -webkit-animation: rotateInLight 1000ms ease-in;
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);


        }


.mode-switch.light-mode .sky:before {
                opacity: 1;
            }


.mode-switch.light-mode .sky:after {
                opacity: 0;
            }


.mode-switch.light-mode .clocktower svg g > * {
                    
                    stroke: hsl(var(--carnelian-dm, var(--carnelian)));
                    transition: stroke 1s ease-in;

                }


.mode-switch.light-mode .clocktower svg g .st0 {

                        will-change: transform, opacity, fill; /* Prevents flicker in Safari */
                        animation: transitionLight 1000ms ease-in;
                        -webkit-animation: transitionLight 1000ms ease-in;
                        transition: all 1000ms ease-in-out;
                        fill: hsl(var(--menu-background));
                    }


.mode-switch.dark-mode {
        border: 1px solid hsl(var(--text-white-dm, var(--text-white)));
        transition: border 1s ease-in;
        background: transparent;

    }


.mode-switch.dark-mode.transition .sky {
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }


.mode-switch.dark-mode .sky {
            animation: rotateInDark 1000ms ease-in;
            -webkit-animation: rotateInDark 1000ms ease-in;
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);

        }


.mode-switch.dark-mode .sky:before {
                opacity: 0;
            }


.mode-switch.dark-mode .sky:after {
                opacity: 1;
            }


.mode-switch.dark-mode .clocktower svg g > * {
                    stroke: black;
                    transition: stroke 1100ms ease-in;

                }


.mode-switch.dark-mode .clocktower svg g .st0 {
                        animation: transitionDark 1000ms ease-in;
                        transition: all 1100ms ease-in-out;
                        fill: rgb(75, 75, 75);
                    }


.mode-switch.dark-mode .clocktower svg g .st1 {
                        fill: lightyellow;
                    }


.mode-switch.dark-mode .sky--light {
                opacity: 0;
            }


.mode-switch.dark-mode .sky--hc {
                opacity: 0;
            }


.mode-switch.dark-mode .sky--dark {
                display: block;
            }


/* @keyframes transitionDark {
    0% {
        fill: hsl(var(--menu-background));
    }

    100% {
        fill: hsl(var(--menu-background));
    }
}
@keyframes transitionLight {
    0% {
        fill: hsl(var(--menu-background));
    }

    100% {
        fill: hsl(var(--menu-background));
    }
} */


@keyframes rotateInDark {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}


@keyframes rotateInLight {

    0% {
        transform: rotate(180deg);
    }

    99% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}