.moon-phases .moon-dark, .moon-phases .moon-light, .moon-phases .spherical {
    width: 200px;
    height: 200px;
    left: 100px;
    top: 100px;
}
.moon-phases .moon-dark {
    background-color: #444444;
}
.moon-phases .moon-light {
    background-color: lightgray;
}
.moon-phases .spherical {
    animation-name: spherical;
}
@keyframes spherical {
    from { background-image: radial-gradient(at 100% 50%, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 30%)); }
    25% { background-image: radial-gradient(at 100% 50%, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 30%)); }
    37.5% { background-image: radial-gradient(at 75% 50%, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 30%)); }
    50% { background-image: radial-gradient(at 50% 50%, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 30%)); }
    62.5% { background-image: radial-gradient(at 25% 50%, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 30%)); }
    75% { background-image: radial-gradient(at 0% 50%, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 30%)); }
    99.9% { background-image: radial-gradient(at 0% 50%, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 30%)); }
    to { background-image: radial-gradient(at 100% 50%, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 30%)); }
}
.moon-phases .left, .moon-phases .right, .moon-phases .spherical {
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.moon-dark.left {
    clip-path: inset(0px 100px 0px 0px);
    animation-name: phases-dark-left;
}
.moon-light.left {
    clip-path: inset(0px 100px 0px 0px);
    animation-name: phases-light-left;
}
.moon-dark.right {
    clip-path: inset(0px 0px 0px 100px);
    animation-name: phases-dark-right;
}
.moon-light.right {
    clip-path: inset(0px 0px 0px 100px);
    animation-name: phases-light-right;
}

.moon-phases .label {
    top: 60px;
    left: 110px;
}
.label.new {
    animation-name: phase-new;
}
.waxing-crescent {
    animation-name: waxing-crescent;
}
.first-quarter {
    animation-name: first-quarter;
}
.waxing-gibbous {
    animation-name: waxing-gibbous;
}
.full {
    animation-name: full;
}
.waning-gibbous {
    animation-name: waning-gibbous;
}
.last-quarter {
    animation-name: last-quarter;
}
.waning-crescent {
    animation-name: waning-crescent;
}
@keyframes phase-new {
    from { opacity: 1; }
    5.75% { opacity: 1; }
    6.25% { opacity: 0; }
    93.25% { opacity: 0; }
    93.75% { opacity: 1; }
    to { opacity: 1; }
}
@keyframes waxing-crescent {
    from { opacity: 0; }
    5.75% { opacity: 0; }
    6.25% { opacity: 1; }
    18.25% { opacity: 1; }
    18.75% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes first-quarter {
    from { opacity: 0; }
    18.25% { opacity: 0; }
    18.75% { opacity: 1; }
    30.75% { opacity: 1; }
    31.25% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes waxing-gibbous {
    from { opacity: 0; }
    30.75% { opacity: 0; }
    31.25% { opacity: 1; }
    43.25% { opacity: 1; }
    43.75% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes full {
    from { opacity: 0; }
    43.25% { opacity: 0; }
    43.75% { opacity: 1; }
    55.75% { opacity: 1; }
    56.25% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes waning-gibbous {
    from { opacity: 0; }
    55.75% { opacity: 0; }
    56.25% { opacity: 1; }
    68.25% { opacity: 1; }
    68.75% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes last-quarter {
    from { opacity: 0; }
    68.25% { opacity: 0; }
    68.75% { opacity: 1; }
    80.75% { opacity: 1; }
    81.25% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes waning-crescent {
    from { opacity: 0; }
    80.75% { opacity: 0; }
    81.25% { opacity: 1; }
    93.25% { opacity: 1; }
    93.75% { opacity: 0; }
    to { opacity: 0; }
}