:root {
    --sizemodifier: .2;
    --timemodifier: 10
}

@keyframes animation {
  0% {rotate: 0deg;}
  100% {rotate: 360deg;}
}

#sun {
    width: calc(2500px * var(--sizemodifier));
    height: calc(2500px * var(--sizemodifier));

    animation: animation calc(100s * var(--timemodifier)) linear infinite;
}

#mercury {
    width: calc(24px * var(--sizemodifier));
    height: calc(24px * var(--sizemodifier));
    
    transform: translateX(275px);
    animation: animation  calc(.24s * var(--timemodifier)) linear infinite;
}

#venus {
    width: calc(60px * var(--sizemodifier));
    height: calc(60px * var(--sizemodifier));

    transform: translateX(325px);
    animation: animation  calc(.62s * var(--timemodifier)) linear infinite;
}

#earth {
    width: calc(63px * var(--sizemodifier));
    height: calc(63px * var(--sizemodifier));

    transform: translateX(400px);
    animation: animation calc(1s * var(--timemodifier)) linear infinite;
}

#mars {
    width: calc(34px * var(--sizemodifier));
    height: calc(34px * var(--sizemodifier));

    transform: translateX(550px);
    animation: animation calc(1.88s * var(--timemodifier)) linear infinite;
}

#jupiter {
    width: calc(71.5px * var(--sizemodifier));
    height: calc(71.5px * var(--sizemodifier));

    transform: translateX(800px);
    animation: animation calc(12s * var(--timemodifier)) linear infinite;
}

#saturn {
    width: calc(60.3px * var(--sizemodifier));
    height: calc(60.3px * var(--sizemodifier));

    transform: translateX(1150px);
    animation: animation calc(29s * var(--timemodifier)) linear infinite;
}

#uranus {
    width: calc(25.4px * var(--sizemodifier));
    height: calc(25.4px * var(--sizemodifier));

    transform: translateX(1650px);
    animation: animation calc(84s * var(--timemodifier)) linear infinite;
}

#neptune {
    width: calc(24.8px * var(--sizemodifier));
    height: calc(24.8px * var(--sizemodifier));

    transform: translateX(2450px);
    animation: animation calc(165s * var(--timemodifier)) linear infinite;
}

img.planet {position: absolute;}

div.main-div {
    
    width: 100vw;
    height: 100vh;

    top: 0;
    bottom: 0;

    /* border: 2px solid rgb(144, 54, 54); */

}

body {
    transform: scale(0.3);

    background-color: rgb(0,0,0);
    /* background-image: url('https://img.freepik.com/premium-vector/space-background-with-stars-vector-illustration_97886-319.jpg'); */
}

.text1 {
    position: absolute;
    transform: translate(0px, -600px);

    font-family: fantasy;
    color: rgb(144, 54, 54);
    font-size: 4em;
}

.margin-center {
    margin-left: auto;
    margin-right: auto;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}