.earth-revolution-side .sun {
    left: 190px;
    top: 190px;
}
.earth-revolution-side .title {
    position: absolute;
    left: 108px;
    top: 185px;
    text-shadow: white 0 0 10px, black 0 0 2px;
    cursor: default;
}
.earth-revolution-side .back {
    animation-name: sun-back;
    animation-delay: -5s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.earth-revolution-side .front {
    animation-name: sun-front;
    animation-delay: -5s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.earth-revolution-side .earth-orbit-side {
    position: absolute;
    border-top: 2px dashed grey;
    left: 60px;
    top: 200px;
    width: 280px;
    height: 0;
}
.earth-revolution-side .earth-container {
    width: 80px;
    height: 80px;
    left: 20px;
    top: 160px;
    animation-name: orbit-side, orbit-scale;
    animation-duration: 20s;
    animation-delay: -5s, -20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.earth-revolution-side .major-circle-container {
    width: 100%;
    height: 100%;
    overflow: hidden;

}
.earth-revolution-side .atmosphere {
    width: 120%;
    height: 120%;
    left: -10%;
    top: -10%;
    background-image: radial-gradient(#4444ff, #4444ff, #4444ff, transparent, transparent);
    position: absolute;
}
.earth-revolution-side .earth-night, .earth-revolution-side .earth-day {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    animation-delay: -10s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.earth-revolution-side .earth-night {
    background-color: darkgreen;
}
.earth-revolution-side .earth-day {
    background-color: lightgreen;
}
.earth-revolution-side .left {
    clip-path: inset(0 50% 0 0);
}
.earth-revolution-side .right {
    clip-path: inset(0 0 0 50%);
}
.earth-revolution-side .earth-night.left {
    animation-name: phases-dark-left;
}
.earth-revolution-side .earth-night.right {
    animation-name: phases-dark-right;
}
.earth-revolution-side .earth-day.left {
    animation-name: phases-light-left;
}
.earth-revolution-side .earth-day.right {
    animation-name: phases-light-right;
}
.earth-revolution-side .pole-side {
    width: 4%;
    height: 118%;
    background-color: grey;
    position: absolute;
    left: 48%;
    top: -9%;
    border-radius: 2px;
    transform: rotate(23.4deg);
}
.earth-revolution-side .equator {
    width: 100%;
    height: 2%;
    background-color: grey;
    transform: rotate(23.4deg);
    position: absolute;
    left: 0;
    top: 49%;
}

.earth-revolution-side .sun-major-circle {
    width: 125%;
    height: 1px;
    background-color: white;
    transform: rotate(23.4deg);
    position: absolute;
    left: -10px;
    top: 50%;
    animation-name: sun-major-circle;
    animation-delay: -5s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.earth-revolution-side .equator-label {
    position: absolute;
    left: 100px;
    top: 60px;
}
.earth-revolution-side .northern-hemisphere-label {
    position: absolute;
    left: 100px;
    top: 100px;
}
.earth-revolution-side .southern-hemisphere-label {
    position: absolute;
    left: 100px;
    top: 280px;
}

.earth-revolution-side .label {
    left: 2px;
    top: 2px;
    opacity: 0;
    animation-delay: -10s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.earth-revolution-side .equator-label, .earth-revolution-side .northern-hemisphere-label, .earth-revolution-side .southern-hemisphere-label {
    animation-delay: -10s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.equator-label.equinox-going-north {
    animation-name: equinox-going-north;
}
.equator-label.northern-solstice {
    animation-name: northern-solstice;
}
.equator-label.equinox-going-south {
    animation-name: equinox-going-south;
}
.equator-label.southern-solstice {
    animation-name: southern-solstice;
}

.northern-hemisphere-label.spring, .southern-hemisphere-label.fall {
    animation-name: season-0;
}
.northern-hemisphere-label.summer, .southern-hemisphere-label.winter {
    animation-name: season-1;
}
.northern-hemisphere-label.fall, .southern-hemisphere-label.spring {
    animation-name: season-2;
}
.northern-hemisphere-label.winter, .southern-hemisphere-label.summer {
    animation-name: season-3;
}
@keyframes orbit-side {
    from { left: 20px; }
    50% { left: 300px; }
    to { left: 20px; }
}
@keyframes orbit-scale {
    from { width: 40px; height: 40px; top: 180px; }
    50% { width: 160px; height: 160px; top: 120px; }
    to { width: 40px; height: 40px; top: 180px; }
}
@keyframes season-0 {
    from { opacity: 1; }
    24.5% { opacity: 1; }
    25% { opacity: 0; }
    99.5% { opacity: 0; }
    to { opacity: 1; }
}
@keyframes season-1 {
    from { opacity: 0; }
    24.5% { opacity: 0; }
    25% { opacity: 1; }
    49.5% { opacity: 1; }
    50% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes season-2 {
    from { opacity: 0; }
    49.5% { opacity: 0; }
    50% { opacity: 1; }
    74.5% { opacity: 1; }
    75% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes season-3 {
    from { opacity: 0; }
    74.5% { opacity: 0; }
    75% { opacity: 1; }
    99.5% { opacity: 1; }
    to { opacity: 0; }
}
@keyframes sun-back {
    from { opacity: 100% }
    9.999% { opacity: 100% }
    10% { opacity: 0 }
    49.999% { opacity: 0 }
    50% { opacity: 100% }
    to { opacity: 100% }
}
@keyframes sun-front {
    from { opacity: 0 }
    9.999% { opacity: 0 }
    10% { opacity: 100% }
    49.999% { opacity: 100% }
    50% { opacity: 0 }
    to { opacity: 0 }
}
@keyframes equinox-going-north {
    from { opacity: 1; }
    12% { opacity: 1; }
    12.5% { opacity: 0; }
    87% { opacity: 0; }
    87.5% { opacity: 1; }
    to { opacity: 1; }
}
@keyframes northern-solstice {
    from { opacity: 0; }
    12% { opacity: 0; }
    12.5% { opacity: 1; }
    37% { opacity: 1; }
    37.5% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes equinox-going-south {
    from { opacity: 0; }
    37% { opacity: 0; }
    37.5% { opacity: 1; }
    62% { opacity: 1; }
    62.5% { opacity: 0; }
    to { opacity: 0; }
}
@keyframes southern-solstice {
    from { opacity: 0; }
    62% { opacity: 0; }
    62.5% { opacity: 1; }
    87% { opacity: 1; }
    87.5% { opacity: 0; }
    to { opacity: 0; }
}

@keyframes sun-major-circle {
    from { top: 28% }
    50% { top: 72% }
    to { top: 28% }
}