body{
    padding: 0px;
    background-image: url(media/stars.jpg);
    background-size: 100%;
}
.sun{
    height: 120px;
    width: 120px;
    background-image: url(media/sun.jpg);
    border-radius: 50%;
    background-size: cover;
    box-shadow: -4px 2px 56px #f9c05f;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.mercury{
    height: 20px;
    width: 20px;
    background: #a9c2ba;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #f9c05f;
    left: 43%;
    top: 42%;
    transform: translate(-50%,-50%);
    animation: orbit2 2s linear infinite;
}
@keyframes orbit2{
    from{transform: rotate(0deg)translateX(75px) rotate(0deg);}
    to{transform: rotate(360deg)translateX(75px) rotate(-360deg);}
}
p{
    color: white;
    font-family: system-ui;
    position: absolute;
    left: -30px;
    top: -25px;
}
.mercury-outline,.venus-outline-1,.earth-outline-1,.mars-outline-1,.jupiter-outline-1,.saturn-outline-1,
.uranus-outline-1,.neptune-outline {
    border-radius: 60%;
    border: 2px dotted #ddd9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mercury-outline{
    height: 160px;
    width: 160px;
}

.venus{
    height: 40px;
    width: 40px;
    background-image: url(media/venus.jpeg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #c1aa81;
    left: 40%;
    top: 42%;
    transform: translate(-50%,-50%);
    animation: orbit3 35.02s linear infinite;
}

@keyframes orbit3{
    from{transform: rotate(0deg)translateX(120px) rotate(0deg);}
    to{transform: rotate(360deg)translateX(120px) rotate(-360deg);}
}

.venus-outline-1{
    height: 230px;
    width: 230px;
}

.earth{
    height: 50px;
    width: 50px;
    background-image: url(media/EARTH.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #2855D6;
    left: 44%;
    top: 43%;
    transform: translate(-50%,-50%);
    animation: orbit4 29.78s linear infinite;
}

@keyframes orbit4{
    from{transform: rotate(0deg)translateX(165px) rotate(0deg);}
    to{transform: rotate(360deg)translateX(165px) rotate(-360deg);}
}

.earth-outline-1{
    height: 340px;
    width: 340px;
}
.earth-circle{
    height: 65px;
    width: 65px;
    border: 1px dotted #fff;
    position: relative;
    left: -8px;
    top: -8px;
    border-radius: 40px;
}
.earth-inner{
    height: 10px;
    width: 10px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 45%;
    top: 45%;
    animation: orbit5 3s linear infinite;
}
@keyframes orbit5{
    from{transform: rotate(0deg)translateX(35px) rotate(0deg);}
    to{transform: rotate(360deg)translateX(35px) rotate(-360deg);}
}

.mars{
    height: 30px;
    width: 30px;
    background-image: url(media/mars.jpeg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #fea335;
    left: 46.5%;
    top: 46.5%;
    transform: translate(-50%,-50%);
    animation: orbit6 24.08s linear infinite;
}

@keyframes orbit6{
    from{transform: rotate(0deg)translateX(205px) rotate(0deg);}
    to{transform: rotate(360deg)translateX(205px) rotate(-360deg);}
}

.mars-outline-1{
    height: 410px;
    width: 410px;
}


.jupiter{
    height: 40px;
    width: 40px;
    background-image: url(media/jupiter2.jpg);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #cac2b9;
    left: 45%;
    top: 45%;
    transform: translate(-50%,-50%);
    animation: orbit7 60s linear infinite;
}

@keyframes orbit7{
    from{transform: rotate(0deg)translateX(240px) rotate(0deg);}
    to{transform: rotate(360deg)translateX(240px) rotate(-360deg);}
}

.jupiter-outline-1{
    height: 470px;
    width: 470px;
}

.saturn{
    height: 40px;
    width: 40px;
    background-image: url(media/saturn.png);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: -4px 2px 56px #cac2b9;
    left: 45%;
    top: 45%;
    transform: translate(-50%,-50%);
    animation: orbit8 9.67s linear infinite;
}

@keyframes orbit8{
    from{transform: rotate(0deg)translateX(280px) rotate(0deg);}
    to{transform: rotate(360deg)translateX(280px) rotate(-360deg);}
}

.saturn-outline-1{
    height: 550px;
    width: 550px;
}


.uranus{
    height: 30px;
    width: 30px;
    background-image: url(media/uranus.png);
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    left: 48%;
    top: 48%;
    transform: translate(-50%,-50%);
    animation: orbit9 60s linear infinite;
}

@keyframes orbit9{
    from{transform: rotate(0deg)translateX(310px) rotate(0deg);}
    to{transform: rotate(360deg)translateX(310px) rotate(-360deg);}
}

.uranus-outline-1{
    height: 620px;
    width: 620px;
}


.neptune{
    height: 30px;
    width: 30px;
    background: azure;
    background-size: 100%;
    border-radius: 50%;
    position: absolute;
    left: 48%;
    top: 48%;
    transform: translate(-50%,-50%);
    animation: orbit10 5.45s linear infinite;
}

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

.neptune-outline{
    height: 720px;
    width: 720px;
}