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

body {
    background-image: url(img/espaço.png);
    display: flex;
    justify-content: center;
    align-items: center;
    
}


header {
    width: 100%;
    height: 5%;
    background-color: rgba(128, 128, 128, 0.623);
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    position: absolute;
    z-index: 50;
    overflow: hidden;
}

#solt{
    /* width: 100%;
    height: 100%;
    margin-top: 110%; */
    left: 50%;
    top: 200%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    z-index: 49;
}

#setasol1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 90%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setasol2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 72%;
    left: 90%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

#merct {
    left: 50%;
    top: 300%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    z-index: 49;
}

#setamerc1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 90%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setamerc2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 72%;
    left: 90%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

#venust {
    left: 50%;
    top: 400%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    z-index: 50;

}

#setaven1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setaven2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 77%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

#terrat {
    left: 50%;
    top: 510%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    display: flex;
    z-index: 51
}

#setater1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setater2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 77%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

#martet{
    left: 50%;
    top: 620%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    z-index: 49;
}

#setamar1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setamar2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 71%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

#jupit {
    left: 50%;
    top: 720%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    z-index: 49;
}
#setajup1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setajup2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 70%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

#saturt {
    left: 50%;
    top: 820%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    z-index: 49;
}
#setasat1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 94%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setasat2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 69%;
    left: 94%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

#uranot{
    left: 50%;
    top: 920%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    z-index: 49;
}
#setaura1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setaura2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 68%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

#netunt {
    left: 50%;
    top: 1050%;
    transform: translate(-50% , -50%);
    /* background-color: blue; */
    position: absolute;
    z-index: 49;
}

#setanet1 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 10%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(90deg);
    z-index: 51;
}

#setanet2 a{
    width: 6%;
    height: 6%;
    display: flex;
    position: absolute;
    top: 77%;
    left: 92%;
    transform: translate(-50% , -50%);
    transform: rotate(-90deg);
    z-index: 51;
}

.planetas {
    display: flex;
}

.planetas li {
    display: inline-block;
    margin: 0 20px;
}

/* .planetas li a{
    font-size: 130%;
    text-decoration: none;
    color: white;
    background-color: rgb(100, 100, 100);
    padding: 10px 20px;
    border-radius: 15px;
} */

.planetas li button {
    font-size: 130%;
    text-decoration: none;
    color: white;
    border: none;
    background-color: rgb(100, 100, 100);
    padding: 10px 20px;
    border-radius: 15px;
    cursor: pointer;
}

.planetas li button:hover{
    background-color: rgb(65, 65, 65);
    transform: scale(1.05);
}

.saturno img:hover {
    transform: scale(1.3);
}

.container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 1100px;
    height: 100vh;
}

.container img{
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
   
}

.saturno {

    position: absolute;
    display: flex;
    height: 60px;
}


/* .sol{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 10px;
} */

.sol img{
    width: 200px;
    height: 200px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-left: 20px;
    position: static;
    /* position: absolute; */
}

.mercurio{
    margin-left: -280px;
    animation: orbit1 4s linear infinite;
    transform-origin: center;
    position: absolute;
    background-color: transparent;
    /* border: 5px solid white;
    border-radius: 100%; */
    /* width: 200px;
    height: 200px; */
    /* justify-content: center; */
    /* align-items: center;  */
    /* display: flex; */
}

.venus{
    margin-left: -280px;
    animation: orbit2 6s linear infinite;
    transform-origin: center;
    position: absolute;
    background-color: transparent; 
}

.terra{
    margin-left: -280px;
    animation: orbit3 8s linear infinite;
    transform-origin: center;
    position: absolute; 
}


.marte{
    margin-left: -280px;
    animation: orbit4 10s linear infinite;
    transform-origin: center;
    position: absolute; 
}


.jupiter{
    margin-left: -280px;
    animation: orbit5 12s linear infinite;
    transform-origin: center;
    position: absolute; 
    
}


.saturno{
    margin-left: -280px;
    animation: orbit6 15s linear infinite;
    transform-origin: center;
    position: absolute; 
    

}


.urano{
    margin-left: -280px;
    animation: orbit7 17s linear infinite;
    transform-origin: center;
    position: absolute; 
}


.netuno{
    margin-left: -280px;
    animation: orbit8 19s linear infinite;
    transform-origin: center;
    position: absolute; 
}


@keyframes orbit1 {

    from {
        transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
}

@keyframes orbit2 {

    from {
        transform: rotate(0deg) translateX(250px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(250px) rotate(-360deg);
    }
}

@keyframes orbit3 {

    from {
        transform: rotate(0deg) translateX(300px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(300px) rotate(-360deg);
    }
}

@keyframes orbit4 {

    from {
        transform: rotate(0deg) translateX(350px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(350px) rotate(-360deg);
    }
}

@keyframes orbit5 {

    from {
        transform: rotate(0deg) translateX(400px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(400px) rotate(-360deg);
    }
}

@keyframes orbit6 {

    from {
        transform: rotate(0deg) translateX(450px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(450px) rotate(-360deg);
    }
}

@keyframes orbit7 {

    from {
        transform: rotate(0deg) translateX(500px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(500px) rotate(-360deg);
    }
}

@keyframes orbit8 {

    from {
        transform: rotate(0deg) translateX(550px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(550px) rotate(-360deg);
    }
}

.container img:hover{
    transform: scale(1.3);
}



/* @keyframes animacao {
    from {.nave{opacity: 100%;}}
    to {.nave:hover{.quadrado{opacity: 0;}}}

} */
.nave:hover .quadrado{
    background-image: url(img/fire-flame.gif);
    width: 80px;
    height: 80px;
    margin-top: -190px;
    margin-left: 1280px;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* .nave:hover{
    transform: scale(1.3);
} */
.quadrado {
    background-image: url(img/espaço.png);
    position: absolute;
    width: 85px;
    height: 85px;
    transform: rotate(45deg);
    /* border: 1px solid white; */
    border-radius: 50%;
    margin-left: 1280px;
    margin-top: -200px;
    z-index: 4;
    /* transition: opacity o.3s ease-in-out; */
}

/* .nave{
    animation-name: animacao;
    animation-duration: 1s;
} */

.nave{
top: 0;
left: 0;

}
.nave img{
    display: flex;
    width: 250px;
    height: 225px;
    margin-left: 1150px;
    margin-top: -200px;
    position: absolute;
    z-index: 5;

}

.fogonorabo {
    display: flex;
    margin-top: -880px;
    margin-left: 380px;
    position: absolute;
    transform: rotate(45deg);
    z-index: 3;
}

.fogonorabo img {
    width: 80px;
    height: 80px;
}

                                /* desaparecendo orbitas */

#aparecer{
    display: none;
}

 #aparecer:checked ~ .Orbitas {
    display: none;
    position: absolute;
}

label[for="aparecer"] {
    -webkit-appearance: push-button;
    -moz-appearance: button;
    display: inline-block;
    cursor: pointer;
    font-size: 130%;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 15px;
    color: rgb(255, 255, 255);
    background-color: rgb(87, 196, 54);
    position: absolute;
    margin-left: -90%;
}

#aparecer:checked + header label[for="aparecer"] {
    background-color: rgb(214, 46, 46);
}

                                /* Órbitas e suas Posições */

.Orbitas {
    display: block;
    margin-top: -405px;
    margin-right: 130px;
    position: absolute;
}

.Orbitas .orb1{
    margin-left: -280px;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    border-radius: 100%;
    position: absolute;
}

.orb2{
    margin-left: -330px;
    margin-top: -50px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    border-radius: 100%;
    position: absolute;
}

.orb3{
    margin-left: -380px;
    margin-top: -100px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    border-radius: 100%;
    position: absolute;
}

.orb4{
    margin-left: -430px;
    margin-top: -150px;
    width: 700px;
    height: 700px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    border-radius: 100%;
    position: absolute;
}

.orb5{
    margin-left: -480px;
    margin-top: -200px;
    width: 800px;
    height: 800px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    border-radius: 100%;
    position: absolute;
}

.orb6{
    margin-left: -530px;
    margin-top: -250px;
    width: 900px;
    height: 900px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    border-radius: 100%;
    position: absolute;
}

.orb7{
    margin-left: -580px;
    margin-top: -300px;
    width: 1000px;
    height: 1000px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    border-radius: 100%;
    position: absolute;
}

.orb8{
    margin-left: -630px;
    margin-top: -350px;
    width: 1100px;
    height: 1100px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    border-radius: 100%;
    position: absolute;
}

.creditos {

    width: auto;
    height: auto;
    border: 3px solid rgba(255, 255, 255, 0.466);
    color: white;
    position: absolute;
    left: 93%;
    top: 87%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    background-color: rgba(128, 128, 128, 0.445);
    padding: 20px;
    border-radius: 20px;
}
.creditos li {
    display: block;
}

.creditos li a {
    /* text-decoration: none; */
    color: white;
}