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

body{
    background-image: url(./spaceImage.jpg);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.solarsystem{
    position: relative;
    height: 1000px;
    width: 1000px;
}

.sun{
    position: absolute;
    height: 120px;
    width: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: yellow;
    box-shadow: 0px 0px 10px 10px gold;
    border-radius: 50%;
}

.orbit{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid silver;
    border-radius: 50%;
    animation-name: orbit;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.orbit1{
    height: 180px;
    width: 180px;
    animation-duration: 3s;
}

.orbit2{
    height: 250px;
    width: 250px;
    animation-duration: 5s;
}

.orbit3{
    height: 350px;
    width: 350px;
    animation-duration: 7s;
}

.orbit4{
    height: 450px;
    width: 450px;
    animation-duration: 9s;
}

.orbit5{
    height: 550px;
    width: 550px;
    animation-duration: 11s;
}

.orbit6{
    height: 650px;
    width: 650px;
    animation-duration: 13s;
}

.orbit7{
    height: 750px;
    width: 750px;
    animation-duration: 15s;
}

.orbit8{
    height: 850px;
    width: 850px;
    animation-duration: 17s;
}

.planet{
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}

.mercury{
    height: 20px;
    width: 20px;
    background-color: brown;
    box-shadow: 0px 0px 5px 5px white;
}

.venus{
    height: 25px;
    width: 25px;
    background-color: yellow;
    box-shadow: 0px 0px 5px 5px white;
}

.earth{
    height: 30px;
    width: 30px;
    background-color: blue;
    box-shadow: 0px 0px 5px 5px white;
}

.mars{
    height: 35px;
    width: 35px;
    background-color: red;
    box-shadow: 0px 0px 5px 5px white;
}

.jupiter{
    height: 50px;
    width: 50px;
    background-color: orange;
    box-shadow: 0px 0px 5px 5px white;
}

.saturn{
    height: 45px;
    width: 45px;
    background-color: purple;
    box-shadow: 0px 0px 5px 5px white;
}

.uranus{
    height: 40px;
    width: 40px;
    background-color: skyblue;
    box-shadow: 0px 0px 5px 5px white;
}

.neptune{
    height: 20px;
    width: 20px;
    background-color: darkblue;
    box-shadow: 0px 0px 5px 5px white;
}

@keyframes orbit {
    from{
        transform: translate(-50%,-50%) rotate(0deg);
    }
    to{
        transform: translate(-50%,-50%) rotate(360deg);
    }
}