* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color:/* #000;*/#ffffff;
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
}

main {
    background-color: #000000;
    min-height: 100vh; 
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@keyframes orbit{
    to{
    transform: rotate(360deg);
    }
}
  
.configuracoes {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 2%;
    left: 1%;
    width: 3%;
    height: 5%;
    gap: 10px;
    opacity: 50%;
    transition: width 0.3s, height 0.3s; 
    overflow: hidden;
}

    .configuracoes:hover{
        background-color: rgb(53, 53, 116, 0.5);
        border-radius: 0px 30px 30px 0px;
        border: solid 5px aquamarine;
        height: 33%;
        width: 25%;
        opacity: 100%;
        color: azure;  
    } 

    .configuracoes:hover .bars{
        display: none;
    }

    .configuracoes:hover .conteudo{
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-top: 2%;
        padding: 2%;
        gap: 5%;
        flex-direction: row;
        font-size: 11pt;
    } 

.bars {
    width: 100%;
    height: 4px;
    background-color: rgb(253, 255, 243);
    border-radius: 5px;
    transition-duration: .3s;
}

.conteudo{
    display: none;
} 

.descricao {
    position: absolute;
    flex-direction: column;
    top: 2%;
    background-color: rgb(53, 53, 116, 0.5);
    color: azure;
    border-radius: 30px 0px 30px 30px;
    border: solid 5px aquamarine;
    left: 69%;
    transition: width 0.3s, height 0.3s; 
    width: 30%;
    height: 50%;
    opacity: 0;
    transition: opacity 0.5s ease, bottom 0.5s ease;
}

    .descricao.mostrar {
        opacity: 1;
        
    }

    .descricao h1{
        height: 20%;
        padding-top: 2.5%;
        font-size: 20pt;
        text-align: center;
    }

    .descricao h2{
        height: 45%;
        padding: 3%;
        font-size: 17pt;
        text-align: justify;
    }

    .descricao h3{
        height: 35%;
        padding: 3%;
        font-size: 14pt;
    } 

.Sol, .Mercurio, .Venus, .Terra, .Lua, .Marte,
.Fobos, .Deimos, .Cinturao, .Ceres, .Vesta,
.Jupter, .Io, .Pioneer, .Europa, .Ganimedes, .Calisto,
.Saturno, .Mimas, .Encelado, .Tita,
.Urano, .Netuno, .Plutao{
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    color: aqua;
}

    .Sol::before, .Mercurio::before, .Venus::before, .Terra::before, .Lua::before, .Marte::before,
    .Fobos::before, .Deimos::before, .Cinturao::before, .Ceres::before, .Vesta::before,
    .Jupter::before, .Io::before, .Pioneer::before, .Europa::before, .Ganimedes::before, .Calisto::before,
    .Saturno::before, .Mimas::before, .Encelado::before, .Tita::before,
    .Urano::before, .Netuno::before, .Plutao::before{
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 100%; 
        background-position: center;  
        background-size: cover; 
    }

    .Sol::before{ 
        margin-left: 0%;
        width: 50px;
        height: 50px; 
        background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQiLTIh16bd4dM4qXBeyfM4kksySpAaPzsttQxhpVO99g&s);
        background-size: 10em;
        box-shadow: 0 0 7.5em 2.5em rgb(206, 114, 8); 
        animation: orbit 100s linear reverse infinite;       
    }

    .Mercurio::before {  
        margin-left: 50%;      
        width: 4.879px;
        height: 4.879px;
        background-image: url(https://c.files.bbci.co.uk/3EBA/production/_109185061_lua.jpg);
        background-size: 1em;
        animation: orbit 2.45s linear reverse infinite ; 
    }

    .Venus::before{
        margin-left: 42%;
        width: 12.103px;
        height: 12.103px;
        background-image: url(https://static.mundoeducacao.uol.com.br/mundoeducacao/conteudo_legenda/f5c821353c57b50225cda29678232840.jpg);
        background-size: 1em;
        animation: orbit 10.12s linear infinite; 
    }

    .Terra::before{
        margin-left: 40%;
        width: 12.742px;
        height: 12.742px;
        background-image: url(https://static.todamateria.com.br/upload/pl/an/planetaterra-cke.jpg?auto_optimize=low);
        background-size: 1.3em;
        animation: orbit 23.56s linear reverse infinite;  
    }

        .Lua{ 
            top: 4px;  
            left: 4px;
            margin-left: 45%;
            font-size: 0.5pt;
        }
            .Lua h1{
                margin-left: -35%;
                font-size: 3pt;
            }
        .Lua::before{            
            width: 3.4748px;
            height: 3.4748px;
            border-radius: 100%;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg);
            background-size: 6.5em;
            animation: orbit 11.78s linear reverse infinite;
        }

    .Marte::before{
        margin-left: 45%;
        width: 6.794px;
        height: 6.794px;
        background-image: url(https://www.cnnbrasil.com.br/wp-content/uploads/sites/12/2021/06/13948_80980F03E2DF665A-1.jpg?w=1024);
        background-size: 1.25em;
        animation: orbit 24s linear infinite;
    }

        .Fobos{
            top: 3px;  
            left: 19px;
        }
            .Fobos h1{
                margin-left: -35%;
                font-size: 2pt;
            }
        .Fobos::before{            
            width: 2.2px;
            height: 1.1px;
            background-image: url(https://s2.glbimg.com/4pvuor4d3aFEQXWkjPazeYs1obk=/e.glbimg.com/og/ed/f/original/2015/11/11/fobos.png);
            background-size: 2em;
            animation: orbit 3s linear infinite;
        }

        .Deimos{
            top: 1px;  
            left: 20px;
        }
            .Deimos h1{
                margin-left: -40%;
                font-size: 2pt;
            }
        .Deimos::before{            
            width: 1.2px;
            height: 1px;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Deimos-MRO.jpg/300px-Deimos-MRO.jpg);
            background-size: 0.1em;
            animation: orbit 6s linear infinite;
        }  

    #asteroide{
        width: 0px;
        height: 0px;
    }

    .Asteroide {
        position: absolute;
        border-radius: 50%;
        width: 0.5px;
        height: 0.5px;
        background-color: rgb(189, 189, 189);     
        animation: orbit 200s linear infinite reverse;
    }
    .Cinturao::before{
        margin-left: 45%;
        position: absolute;
        border-radius: 50%;
        width: 1px;
        height: 1px;
        background-color: rgb(189, 189, 189);     
        animation: orbit 200s linear infinite reverse;
    } 

        .Ceres::before{
            margin-left: 50%;
            width: 3px;
            height: 3px;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/b2/Color_global_view_of_Ceres_-_Oxo_and_Haulani_craters.png);
            background-size: 0.3em;
            animation: orbit 16.82s linear reverse infinite;
        }
        .Vesta::before{
            width: 1.53px;
            height: 1.32px;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/23/Vesta_Full-Frame.jpg);
            background-size: 0.15em;
            animation: orbit 13.25s linear reverse infinite;
        }

    .Jupter::before{
        margin-left: 25%;
        width: 19.3820px;
        height: 19.3820px;
        background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9GBGz96k41_K1q_KxvBvTSEQ2i3IXaKWsZrhTuwML5A&s);
        background-size: 1.35em;
        animation: orbit 9.56s linear reverse infinite;  
    }
    
        .Io{ 
            top: 8px;  
            left: 20px;
        }
            .Io h1{
                font-size: 3pt;
            }
        .Io::before{            
            width: 3.5px;
            height: 3.5px;
            border-radius: 100%;
            background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlP84azHT4pGvFj9-mzn1lKWzNZ84eJnq3HaGtCN2hiQ&s);
            background-size: 0.25em;
            animation: orbit 1.76s linear reverse infinite;
        }

        .Pioneer{ 
            top: 8px;  
            left: 20px;
        }
            .Pioneer h1{
                margin-left: -40%;
                font-size: 2pt;
            }
        .Pioneer::before{            
            width: 1.8px;
            height: 1.7px;
            border-radius: 100%;
            background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdTSuIqy0SyHyKkClEJWcRvokIQrU25Bzsww&s);
            background-size: 0.12em;
            background-position: center 4%;
            background-position-x: calc(0%);
        }

        .Europa{ 
            top: 8px;  
            left: 20px;
        }
            .Europa h1{
                margin-left: -35%;
                font-size: 3pt;
            }
        .Europa::before{            
            width: 3px;
            height: 3px;
            border-radius: 100%;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Europa-moon.jpg/250px-Europa-moon.jpg);
            background-size: 0.2em;
            animation: orbit 1.76s linear reverse infinite;
        }

        .Ganimedes{ 
            top: 8px;  
            left: 20px;
        }
            .Ganimedes h1{
                margin-left: -40%;
                font-size: 5pt;
            }
        .Ganimedes::before{            
            width: 5px;
            height: 5px;
            border-radius: 100%;
            background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0ls-GWHDCTfBoBKRQFuxjAtF3E9RnbaPIRfkYyx0qMA&s);
            background-size: 0.5em;
            animation: orbit 7.15s linear reverse infinite;
        }

        .Calisto{ 
            top: 8px;  
            left: 20px;
        }
            .Calisto h1{
                margin-left: -40%;
                font-size: 4pt;
            }
        .Calisto::before{            
            width: 4.5px;
            height: 4.5px;
            border-radius: 100%;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Europa-moon.jpg/250px-Europa-moon.jpg);
            background-size: 0.3em;
            animation: orbit 8.2s linear reverse infinite;
        }

    .Saturno::before{
        margin-left: 12%;
        width: 41px;
        height: 20px;
        background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ38RJAS42mdk2KmPDu56CcOOyphtz2PdRRSEbGz8joAg&s);
        background-size: 3em;
    }

        .Mimas{
            top: 10px;  
            left: 25px;
        }
            .Mimas h1{
                margin-left: -45%;
                font-size: 2pt;
            }
        .Mimas::before{
            width: 1.4px;
            height: 1.4px;
            border-radius: 100%;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Mimas_Cassini.jpg/1200px-Mimas_Cassini.jpg);
            background-size: 0.14em;
            animation: orbit 0.94s linear reverse infinite;
        }

        .Encelado{
            top: 8px;  
            left: 25px;
        }
            .Encelado h1{
                margin-left: -45%;
                font-size: 2pt;
            }
        .Encelado::before{
            width: 1.54px;
            height: 1.54px;
            border-radius: 100%;
            background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4hj64ZAmgc6UABvbpvJvhzZdXIVBmZYFhZA&s);
            background-size: 0.15em;
            animation: orbit 0.94s linear reverse infinite;
        }

        .Tita{
            top: 5px;  
            left: 25px;
        }
            .Tita h1{
                margin-left: -30%;
                font-size: 4pt;
            }
        .Tita::before{
            width: 5.2px;
            height: 5.2px;
            border-radius: 100%;
            background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMR4vI39iEmqrO7stEh2xNXPLjFbGihahSfA&s);
            background-size: 0.52em;
            animation: orbit 1.6s linear reverse infinite;
        }

    .Urano::before{
        margin-left: 30%;
        width: 17.524px;
        height: 17.5724px;
        background-image: url(https://s2.static.brasilescola.uol.com.br/be/2021/04/planeta-urano.jpg);
        background-size: 2em;
        animation: orbit 17.14s linear infinite;  
    }

    .Netuno::before{
        margin-left: 35%;
        width: 14.924px;
        height: 14.924px;
        background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR2VEoWxVRiHEo_KVL5FHMJfYLSBty1APbIuNAnHLy96w&s);
        background-size: 1.2em;
        animation: orbit 16.6s linear reverse infinite;  
    }

    .Plutao::before{
        margin-left: 45%;
        width: 2.3766px;
        height: 2.3766px;
        background-image: url(https://s2.glbimg.com/OuOQhvqzE3VmEe86ro7HRezGHas=/e.glbimg.com/og/ed/f/original/2016/09/20/pluto2.jpg);
        background-size: 0.3em;
        animation: orbit 153s linear reverse infinite;  
    }