@media screen and (max-width:420px){



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

}

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

   }

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

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


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

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

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


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

.mars{
    width:22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(236, 131, 100), rgb(83, 3, 3));
    animation: mars 8s infinite linear;
    position:absolute;
    top:195px;
    left:195px;
    
}
.jupiter-outline{
    width:280px;
    height:280px;
    border-radius: 50%;
    outline:2px dotted white;
    position:absolute;
    top:67px;
    left:67px;
    }
    
.jupiter{
    width:26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(234, 223, 148), rgb(95, 71, 2));
    animation: jupiter 10s infinite linear;
    position:absolute;
    top:194px;
    left:195px;
    
}
.saturn-outline{
    width:320px;
    height:320px;
    border-radius: 50%;
    outline:2px dotted white;
    position:absolute;
    top:47px;
    left:47px;
    }

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

}

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


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



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

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

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

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

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

    }
}

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

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

    }
}

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

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

    }
}

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

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

    }
}

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

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

    }
}


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

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

    }
}

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

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

    }
}



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

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

    }
}

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

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

    }
}

@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);}

}
}


@media screen and (max-width:360px){

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

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

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


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

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

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


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

.mars{
    width:22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(236, 131, 100), rgb(83, 3, 3));
    animation: mars 8s infinite linear;
    position:absolute;
    top:175px;
    left:175px;
    
}
.jupiter-outline{
    width:245px;
    height:245px;
    border-radius: 50%;
    outline:2px dotted white;
    position:absolute;
    top:60px;
    left:60px;
    }
    
.jupiter{
    width:26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgb(234, 223, 148), rgb(95, 71, 2));
    animation: jupiter 10s infinite linear;
    position:absolute;
    top:170px;
    left:170px;
    
}
.saturn-outline{
    width:275px;
    height:275px;
    border-radius: 50%;
    outline:2px dotted white;
    position:absolute;
    top:45px;
    left:45px;
    }

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

}

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


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


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

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

}


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

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

    }
}

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

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

    }
}

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

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

    }
}

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

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

    }
}

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

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

    }
}


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

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

    }
}

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

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

    }
}



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

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

    }
}

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

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

    }
}

@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);}

}
}