Untitled

<html>
    <head>
        <style>
            html, body {
                width: 100%;
                height: 100%;

                background-color: black;
            }

            #sun {
                position: absolute;
                top: 50%;
                left: 50%;

                height: 200px;
                width: 200px;
                margin-top: -100px;
                margin-left: -100px;

                border-color: orange;
                border-width: 2px;
                border-style: solid;
                border-radius: 50%;

                box-shadow: 0 0 64px yellow;

                animation: dynamic-glow 1s linear infinite;
            }

            #earth {
                position: absolute;
                top: 0;
                left: 50%;

                height: 100px;
                width: 100px;
                margin-left: -50px;
                margin-top: -50px;

                border-color: blue;
                border-width: 2px;
                border-style: solid;
                border-radius: 50%;
            }

            #moon {
                position: absolute;
                top: 0;
                left: 50%;

                height: 50px;
                width: 50px;
                margin-left: -25px;
                margin-top: -25px;

                border-color: blue;
                border-width: 2px;
                border-style: solid;
                border-radius: 50%;
            }

            #earth-orbit {
                position: absolute;
                top: 50%;
                left: 50%;

                width: 600px;
                height: 600px;
                margin-top: -300px;
                margin-left: -300px;

                border-width: 2px;
                border-style: dotted;
                border-color: rgba(255, 255, 255, 0.2);
                border-radius: 50%;

                animation: spin-right 10s linear infinite;
            }

            #moon-orbit {
                position: absolute;
                top: 0;
                left: 50%;

                width: 200px;
                height: 200px;
                margin-top: -100px;
                margin-left: -100px;

                border-width: 2px;
                border-style: dotted;
                border-color: rgba(255, 255, 255, 0.2);
                border-radius: 50%;

                animation: spin-right 2s linear infinite;
            }


            @keyframes spin-right {
              100% { transform: rotate(360deg); }
            }

            @keyframes dynamic-glow {
              50% { transform: scale(0.95); }
            }
        </style>
    </head>

    <body>
        <img id="sun" src="http://goo.gl/PmbqZa">

        <div id="earth-orbit">
            <div id="moon-orbit">
                <img id="moon" src="http://goo.gl/41IWnf">
            </div>
            <img id="earth" src="http://goo.gl/41IWnf">
        </div>
    </body>
</html>