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

body{
    height: 100vh;
background-image: url(galaxy.gif);
background-size: cover;

}

.sun{
    width:150px;
    height: 150px;
    border-radius: 50%;
    background-image: url(starr.png);
    background-size: cover;
    position:relative;
    margin:400px auto;
    animation: sunny 5s infinite;

   }

.mercury-outline{
    width:240px;
    height:240px;
    border-radius: 50%;
outline:2px dotted white;
position:absolute;
top:360px;
left:830px;

    
}
.mercury{
    width:35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(241, 228, 230), rgb(92, 13, 48));
    animation: mercury 6s infinite linear;
    position:absolute;
    top:460px;
    left:930px;
}
.venus-outline{
    width:340px;
    height:340px;
    border-radius: 50%;
outline:2px dotted white;
position:absolute;
top:310px;
left:780px;
}


.venus{
    width:45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(225, 234, 245), rgb(12, 67, 246));
    animation: venus 7s infinite linear;
    position:absolute;
    top:450px;
    left:920px;
    
}
.earth-outline{
    width:440px;
    height:440px;
    border-radius: 50%;
outline:2px dotted white;
position:absolute;
top:260px;
left:730px;
}

.earth{
    width:70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(223, 239, 221), rgb(3, 194, 6));
    animation: earth 8s infinite linear;
    position:absolute;
    top:440px;
    left:915px;
    

}
.moon{
    width:20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(143, 109, 165, 0), rgb(248, 248, 249));
    animation: moon 2s infinite linear;
    position:absolute;
    top:25px;
    left:25px;
}


.mars-outline{
width:520px;
height:520px;
border-radius: 50%;
outline:2px dotted white;
position:absolute;
top:220px;
left:690px;
}

.mars{
    width:50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(236, 131, 100), rgb(83, 3, 3));
    animation: mars 9s infinite linear;
    position:absolute;
    top:455px;
    left:925px;
    
}
.jupiter-outline{
    width:610px;
    height:610px;
    border-radius: 50%;
    outline:2px dotted white;
    position:absolute;
    top:175px;
    left:645px;
    }
    
.jupiter{
    width:95px;
    height: 95px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(234, 223, 148), rgb(95, 71, 2));
    animation: jupiter 10s infinite linear;
    position:absolute;
    top:435px;
    left:900px;
    
}
.saturn-outline{
    width:720px;
    height:720px;
    border-radius: 50%;
    outline:2px dotted white;
    position:absolute;
    top:120px;
    left:590px;
    }

.saturn{
    width:180px;
    height: 76px;
    background-image: url(saturn.png);
    background-size: cover;
    position:absolute;
    animation: saturn 11s infinite linear;
    top:440px;
    left:870px;
    z-index: 2;

}

.uranus-outline{
    width:820px;
    height:820px;
    border-radius: 50%;
    outline:2px dotted white;
    position:absolute;
    top:70px;
    left:535px;
    z-index: 1;
    }


.uranus{
    width:50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(232, 227, 235), rgb(7, 6, 44));
    position:absolute;
    animation: uranus 12s infinite linear;
    top:450px;
    left:920px;
    z-index: 2;



}
.neptune-outline{
    width:900px;
    height:900px;
    border-radius: 50%;
    outline:2px dotted white;
    position:absolute;
    top:30px;
    left:500px;
    }

.neptune{
    width:40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(247, 206, 239), rgb(90, 1, 72));
    animation: neptune 14s infinite linear;
    position:absolute;
    top:460px;
    left:930px;

}
.planets{
    font-size: 10px;
color: white;
}

 @keyframes mercury{
    from{
        transform: rotate(0) translateX(120px);

    }
    to{
        transform: rotate(360deg) translateX(120px);

    }
}

@keyframes venus{
    from{
        transform: rotate(0) translateX(170px);

    }
    to{
        transform: rotate(360deg) translateX(170px);

    }
}

@keyframes earth{
    from{
        transform: rotate(0) translateX(220px);

    }
    to{
        transform: rotate(360deg) translateX(220px);

    }
}

@keyframes moon{
    from{
        transform: rotate(0) translateX(50px);

    }
    to{
        transform: rotate(360deg) translateX(50px);

    }
}

@keyframes mars{
    from{
        transform: rotate(0) translateX(265px);

    }
    to{
        transform: rotate(360deg) translateX(265px);

    }
}


@keyframes jupiter{
    from{
        transform: rotate(0) translateX(310px);

    }
    to{
        transform: rotate(360deg) translateX(310px);

    }
}

@keyframes saturn{
    from{
        transform: rotate(0) translateX(360px);

    }
    to{
        transform: rotate(360deg) translateX(360px);

    }
}



@keyframes uranus{
    from{
        transform: rotate(0) translateX(410px);

    }
    to{
        transform: rotate(360deg) translateX(410px);

    }
}

@keyframes neptune{
    from{
        transform: rotate(0) translateX(450px);

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

    }
}

@keyframes sunny{ to{transform: scale(1.4);}
0%{transform: scale(1.32);}
10%{transform: scale(1.4);}
35%{transform: scale(1.35);}
50%{transform: scale(1.4);}
60%{transform: scale(1.33);}
90%{transform: scale(1.4);}
100%{transform: scale(1.34);}

}