html {
    width: 100%;
}

.starry-sky {
    background-color: black;
    background-image:
        radial-gradient(white, rgba(255, 255, 255, .0) 2px),
        radial-gradient(white, rgba(255, 255, 255, .0) 1px),
        radial-gradient(white, rgba(255, 255, 255, .0) 2px),
        radial-gradient(white, rgba(255, 255, 255, .0) 1px);
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
}

.sun {
    background-color: yellow;
    border-radius: 50%;
    height: 20vw;
    width: 20vw;
    position: absolute;
    top: 30vh;
    left: 40vw;
    color: transparent;
}

@media screen and (min-width: 601px) {

    .sun:hover,
    .sun:active {
        background-image: linear-gradient(yellow, red 50vh);
        color: black;
        text-align: center;
    }

    .pad-p {
        padding-top: 25%;
    }
}

@media screen and (max-width: 601px) {

    .sun:hover,
    .sun:active {
        background-image: linear-gradient(yellow, red 50vh);
        color: black;
        text-align: center;
        font-size: xx-small;
    }

    .pad-p {
        padding-top: 15%;
    }
}

.pad-p {
    padding-top: 25%;
}

.blue-planet {
    background-color: rgb(23, 189, 255);
    border-radius: 50%;
    height: 10vw;
    width: 10vw;
    position: absolute;
    top: 20vh;
    left: 15vw;
}

.blue-planet-moon {
    background-color: beige;
    background-image: radial-gradient(circle at 80% 80%, rgb(10, 10, 10, 0.4), beige 5vh);
    border-radius: 50%;
    height: 3vw;
    width: 3vw;
    position: absolute;
    /* top: 41vh;
    left: 18.5vw; */
    animation-duration: 3s;
    animation-name: orbit-blue;
    offset-path: circle(15vh at 20vw 30vh);
}

@keyframes orbit-blue {
    0%,
    20% {
      offset-distance: 0%;
    }
    80%,
    100% {
      offset-distance: 100%;
    }
}

.red-planet {
    background-color: red;
    border-radius: 50%;
    height: 5vw;
    width: 5vw;
    position: absolute;
    top: 85vh;
    left: 90vw;
}