.orbita{
    position: absolute;
    border: 1px dashed #ffffff26;
    border-radius: 50%;
    pointer-events: none;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    animation: linear infinite girar;
}


.planeta {
    position: absolute;
    border-radius: 50%;
    pointer-events: auto;

    top: -8px;
    left: 50%;
    transform: translate(-50%);
}



.sol {
    position: absolute;

    width: 110px;
    height: 110px;
    background-color: radial-gradient(circle, #ff5100, #ff2600);
    background: #ff481a;

    border-radius: 50%;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    box-shadow: 0 0 20px #ff5100,
    0 0 40px #ff3c00;


    background-image: url(https://www.solarsystemscope.com/spacepedia/images/handbook/renders/sun.png);
    background-size: 135px;
    background-position: center;
}



.mercurio-orbita {
    width: 180px;
    height: 180px;
    animation-duration: 18s;

}
.mercurio{
    width: 24px;
    height: 24px;
    background: #9e9e9e;

    top: -10px;


    background-image: url(https://www.solarsystemscope.com/spacepedia/images/handbook/renders/mercury.png);
    background-size: cover;
}


.venus-orbita{
    width: 260px;
    height: 260px;
    animation-duration: 24s;
}
.venus{
    width: 32px;
    height: 32px;
    background-color: #db632b;

    top: -15px;
    

    background-image: url(https://static.vecteezy.com/system/resources/previews/051/075/296/non_2x/the-planet-venus-is-shown-in-this-image-free-png.png);
    background-size: 36px;
    background-position: center;
}


.terra-orbita{
    width: 360px;
    height: 360px;
    animation-duration: 36s;
}
.terra{
    width: 34px;
    height: 34px;
    background: #3ea6ff;
    box-shadow: 0 0 10px #00aeff;

background-image: url(https://cdn.creazilla.com/cliparts/79039/planet-earth-clipart-lg.png);
    background-size: cover;

    top: -15px;
}

.lua-orbita {
    position: absolute;

    width: 52px;
    height: 55px;

    border: 0.5px dashed rgba(255,255,255,0.2);

    border-radius: 50%;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    animation:
        girar 5s linear infinite;
}
.lua {
    position: absolute;

    width: 12px;
    height: 12px;

    background: #d8d8d8;

    border-radius: 50%;

    top: 0;
    left: 50%;

    transform:
        translate(-50%, -50%);


        background-image: url(https://m.media-amazon.com/images/I/81SG5Wy+-mL.png);
    background-size: cover;
}

.terra-container {
    position: absolute;

    top: 0;
    left: 50%;

    transform:
        translate(-50%, -50%);


        background-image: url(https://cdn.creazilla.com/cliparts/79039/planet-earth-clipart-lg.png);
    background-size: cover;
}




.marte-orbita{
    width: 450px;
    height: 450px;
    animation-duration: 48s;
}
.marte{
    width: 28px;
    height: 28px;
    background: #ff3300;

    top: -14px;


    background-image: url(https://www.solarsystemscope.com/spacepedia/images/handbook/renders/mars.png);
    background-size: cover;
}


.jupiter-orbita{
    width: 560px;
    height: 560px;
    animation-duration: 60s;
}
.jupiter{
    width: 55px;
    height: 55px;
    background: #ff5e13;

    top: -26px;


    background-image: url(https://www.solarsystemscope.com/spacepedia/images/handbook/renders/jupiter.png);
    background-size: cover;
}


.saturno-orbita{
    width: 700px;
    height: 700px;
    animation-duration: 90s;
}
.saturno{
    width: 46px;
    height: 46px;
    background: #ff9d2d;

    top: -22px;


    background-image: url(https://www.aristocrat.com.br/cdn/shop/files/Saturn_1122x.png?v=1758045729);
    background-size: 57px;
    background-position: center;
    
}
.saturno::after {
    content: "";

    position: absolute;

    width: 78px;
    height: 16px;

    border: 3px solid #d2be8ccc;

    border-radius: 50%;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        rotate(20deg);
}


.urano-orbita{
    width: 825px;
    height: 825px;
    animation-duration: 130s;
}
.urano{
    width: 42px;
    height: 42px;
    background: #7fffd4;

    top: -20px;


    background-image: url(https://png.pngtree.com/png-clipart/20240306/original/pngtree-uranus-planet-illustration-png-image_14525259.png);
    background-size: 55px;
    background-position: center;
}


.netuno-orbita{
    width: 950px;
    height: 950px;
    animation-duration: 165s;
}
.netuno{
    width: 38px;
    height: 38px;
    background: #4169e1;

    top: -18px;


    background-image: url(https://static.wikia.nocookie.net/ultraverse/images/9/92/Neptune_-6.png/revision/latest/scale-to-width-down/298?cb=20191016022405);

    background-size: 39px;
    background-position: center;
}