.earth-revolution .sun {
    left: 190px;
    top: 190px;
}
.earth-revolution .earth-orbit {
    position: absolute;
    border: 2px dashed gray;
    left: 60px;
    top: 60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
}
.earth-revolution .earth-orbit-container {
    position: absolute;
    left: 60px;
    top: 60px;
    width: 280px;
    height: 280px;
    animation-name: rotation;
    animation-delay: -5s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.earth-revolution .earth-container {
    width: 80px;
    height: 80px;
    left: -40px;
    top: 100px;
}
.earth-revolution .atmosphere {
    width: 100px;
    height: 100px;
    left: -10px;
    top: -10px;
    background-image: radial-gradient(#4444ff, #4444ff, #4444ff, transparent, transparent);
    position: absolute;
}
.earth-revolution .earth-night {
    width: 100%;
    height: 100%;
    background-color: darkgreen;
    left: 0;
    top: 0;
}
.earth-revolution .earth-day {
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    left: 0;
    top: 0;
    animation-name: none;
    clip-path: inset(0px 0px 0px 40px);
}