body{
    background-image:url('1.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    height:90vh;
}
p{
    display:flex;
    justify-content: center;
    align-items: center;
    height:80%;
}
h2{
    text-align: center;
    font-size:3rem;
    color:rgb(255, 255, 255);
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.Soare{
    background: radial-gradient(circle, #fff700, #f9a602, #e85d04);
    height:60vh;
    width:40vw;
    border-radius: 40vw;
    box-shadow:1px 1px 10px 9px #fff700;
    position: relative;
    left: -500px;
}
.Flex{
    display:flex;
    flex-direction:row;
}
.Centru{
    display:flex;
    align-items: center;
    justify-content: baseline;
    height:90vh;
    width:100%;
}
.Grid{
    display:grid;
    margin-top:100px;
    grid-template-columns: repeat(9,1fr);
    gap:10px;
    justify-items: center;
    align-content: center;
    
}
.Planeta{
    animation: rotire2 10s linear infinite;
}
.Planete{
    color:white;
    text-align:center;
    font-size:1.5rem;
    display:grid;
    grid-template-columns: repeat(9,1fr);
    position: relative;
    height:90vh;
    top:0px;
    left:-520px;
    gap:25px;
}
.Mercur{
    background: radial-gradient(circle, #6B6B6B 0%, #B0B0B0 80%);
    height:4vh;
    width:4vh;
    border-radius:50%;
    position:relative;
    animation: rotire 5s linear infinite;
    cursor:pointer;
}
.Mercur1{
    height:40vh;
    width:40vh;
    border-radius:50%;
    position:relative;
    display: block;
    margin: auto;
    cursor:pointer;
    animation: rotire1 5s linear infinite;
}
.Venus{
    border-radius:50%;
    background: radial-gradient(circle, #EED6B7 0%, #C8A165 80%);
    height:8vh;
    width:8vh;
    position:relative;
    animation: rotire 10s linear infinite;
    cursor:pointer;

}
.Terra{
    cursor:pointer;
    border-radius:50%;
    background: radial-gradient(circle, #2E86C1 50%, #229954 60%, #F0E68C 90%);
    height:8vh;
    width:8vh;
    position:relative;
    animation: rotire 15s linear infinite;

}
.Marte{
    cursor:pointer;
    border-radius:50%;
    background: radial-gradient(circle, #B03A2E 0%, #D98880 80%);
    height:16vh;
    width:16vh;
    position:relative;
    animation: rotire 20s linear infinite;

}
.Jupiter{
    cursor:pointer;
    border-radius:50%;
    background: radial-gradient(circle, #D9B382 0%, #7D6608 80%);
    height:32vh;
    width:32vh;
    position:relative;
    animation: rotire 25s linear infinite;
    z-index: 0;
}
.Uranus{
    cursor:pointer;
    border-radius:50%;
    background: radial-gradient(circle, #85C1E9 0%, #154360 80%);
    height:27vh;
    width:27vh;
    position:relative;
    animation: rotire 35s linear infinite;
    z-index: 0;

}
.Saturn{
    cursor:pointer;
    border-radius:50%;
    height:35vh;
    width:35vh;
    background: radial-gradient(circle, #F9E79F 0%, #A04000 80%);
    animation: rotire 30s linear infinite;
    z-index: 0;

}
.Neptun{
    cursor:pointer;
    border-radius:50%;
    background: radial-gradient(circle, #2980B9 0%, #1B2631 80%);
    height:20vh;
    animation: rotire 40s linear infinite;
    width:20vh;
    position:relative;
    z-index: 0;

}
footer{
    background-color: #0a0a0a;
    width:98%;
    height:5vh;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    margin:0;
    z-index:12;
    position: absolute;

}
#p{
    text-align:center;
    color:white;
    font-size:2rem;
    backdrop-filter: blur(12px);
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#h1{
    text-align: center;
    font-size:4rem;
    color:white;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
#Nu{
    display:none;
}
button{
    float:right;
    cursor:pointer;
    color:white;
    border:none;
    margin:15px;
    padding:20px;
    border-radius:10px;
    font-size: 15px;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
@keyframes rotire {   
     0% {
    transform: rotate(0deg) translateX(0px) translateY(0px)  rotate(0deg);
  }
  100% {
    transform: rotate(45deg) translateX(400px) translateY(600px) rotate(45deg);}

}

@keyframes rotire1 {   
     0% {
    transform: rotate(0deg) translateX(50px) translateY(50px);
  }
  100% {
    transform: rotate(360deg) translateX(50px) translateY(50px);}

}

@keyframes rotire2 {
        0%   { transform: translateX(-100%); }
        25%   { transform: translateX(0%); }
        50%  { transform: translateX(100%); }
        75%  { transform: translateX(0%); }
       100% { transform: translateX(-100%); }
}
img{
    width:78%;
    height:30vh;
    border-radius: 100%;
    cursor:pointer;
}
span{
    color:#ffffff;
    align-items: center;
    font-size: 1rem;
    font-family: sans-serif;
    font-weight: bold;
}
a{
    text-decoration: none;
    color:#fce5c7;
}
a:hover{
    color:#f4ae52;
}
a:active{
    color:#f3971f;
}
@media screen and (max-width:1300px){
    img{
        width:70%;
        height:20vh;
    }
body{
        overflow: scroll;
    }
button{
    color:white;
}
.Soare{
    left: -40vw;
    height:30vh;
    box-shadow:9px 10px 10px 9px #fff700;
}
.Planete{
    left:-40vw;
    gap:20px;
}
.Mercur{
    height:1vh;
    width:1vh;

}
.Venus{
    height:2vh;
    width:2vh;
}
.Terra{
    height:2vh;
    width:2vh;
}
.Marte{
    height:5vh;
    width:5vh;
}
.Jupiter{
    height:10vh;
    width:10vh;
}
.Uranus{
    height:8vh;
    width:8vh;
}
.Saturn{
    height:10vh;
    width:10vh;
}
.Neptun{
    height:6vh;
    width:6vh;
}
.Grid{
    grid-template-columns: repeat(3,1fr);
}
.Planeta:nth-child(4){
    animation: rotire2 6s linear infinite;

}
.Planeta:nth-child(5){
    animation: rotire2 6s linear infinite;
    
}
.Planeta:nth-child(6){
    animation: rotire2 6s linear infinite;
    
}
.Planeta:nth-child(7){
    animation: rotire2 9s linear infinite;
    
}
.Planeta:nth-child(8){
    animation: rotire2 9s linear infinite;
    
}
.Planeta:nth-child(9){
    animation: rotire2 9s linear infinite; 
}
}