* {margin: 0; padding: 0}

body {
    position: relative;
    overflow-x:hidden;
    z-index: -1;
  width:75%;
  margin:0 auto;
}

html {
        background: #07121b url(http://www.amrzek.com/space.png) repeat 0px 0px;
  height: 100vh;
    animation: space 15s linear infinite;
    -webkit-animation: space 15s linear infinite;
    -moz-animation: space 15s linear infinite;
    -o-animation: space 15s linear infinite;
}


@keyframes space
{
from {background-position:0px 0px;}
to {background-position:-700px 0px;}
}

@-webkit-keyframes space
{
from {background-position:0px 0px;}
to {background-position:-700px 0px;}
}

@-moz-keyframes space
{
from {background-position:0px 0px;}
to {background-position:-700px 0px;}
}

@-o-keyframes space
{
from {background-position:0px 0px;}
to {background-position:-700px 0px;}
}

.planets {
width: 100%;
height: 350px;
position: relative;
margin-top: 30px;
z-index: -1;

}

.planets * {
    border-radius: 50%;
    -webkit-border-radius:50%;
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
}

.red {
background: #BC2626;
width: 260px;
height: 260px;
position: absolute;
overflow: hidden;
left: 0px;
top: 60px;
z-index: 9;
}

.red:before {position: absolute;
content: '';
background: #941717;
width: 80px;
height: 110px;
border-radius: 50%;
-webkit-border-radius:50%;
top: 140px;
right: -20px;
z-index: 8;
box-shadow: 6px -3px 0px #7E1010 inset;}

.red:after {position: absolute;
content: '';
background: #941717;
width: 100px;
height: 60px;
border-radius: 50%;
-webkit-border-radius:50%;
top: 230px;
right: 90px;
z-index: 8;
box-shadow: 11px 1px 0px #7E1010 inset;}

.circles_red {background: #941717;
width: 150px;
height: 90px;
border-radius: 50%;
-webkit-border-radius:50%;
top: -34px;
right: 130px;
position: absolute;
display: block;
z-index: 8;
box-shadow: 11px -5px 0px #7E1010 inset;
}

.circles_red:before {content: '';
background: #941717;
width: 80px;
height: 60px;
border-radius: 50%;
-webkit-border-radius:50%;
top: 136px;
right: -30px;
position: absolute;
z-index: 8;
box-shadow: 4px -7px 0px #7E1010 inset;

}

.circles_red:after {content: '';
background: #941717;
width: 80px;
height: 60px;
border-radius: 50%;
-webkit-border-radius:50%;
top: 170px;
right: 98px;
z-index: 8;
position: absolute;
box-shadow: 4px -7px 0px #7E1010 inset;}


.earth {
    background: #7ecded;
    width: 130px;
    height: 130px;
    position: absolute;
    overflow: hidden;
    right: 90px;
    top: 190px;
    z-index: 3;
}

.earth:before {
    position: absolute;
    content: '';
    background: #1AA845;
    width: 110px;
    height: 80px;
    border-radius: 50%;
    -webkit-border-radius:50%;
    top: -30px;
    right: 70px;
    box-shadow: 0px -5px 0px #189C34 inset;
}

.earth:after {
    position: absolute;
    content: '';
    background: #1AA845;
    width: 80px;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius:50%;
    top: 90px;
    right: 20px;
    box-shadow: -6px 0px 0px #189C34 inset;
}

.snow {    
    position: absolute;
    background: #FFF;
    width: 50px;
    height: 50px;
    top: 62px;
    right: 110px;
    box-shadow: -6px 0px 0px #F5F5F5 inset;
    z-index: 4;
    }

.snow:after {    
position: absolute;
background: #FFF;
content: '';
width: 50px;
height: 60px;
top: -24px;
right: -144px;
border-radius: 50%;
-webkit-border-radius:50%;
box-shadow: 1px -3px 0px #E6E6E6 inset;
    }



.eyes_earth {width: 14px;
height: 20px;
position: absolute;
display: block;
background: #181818;
top: 26px;
right: 37px;

    animation: eyes_earth 2s infinite;
    -webkit-animation: eyes_earth 2s infinite;
    -moz-animation: eyes_earth 2s infinite;
    -o-animation: eyes_earth 2s infinite;
}

.eyes_earth:after {
    content: '';
width: 12px;
height: 15px;
position: absolute;
display: block;
background: #181818;
top: -2px;
right: -10px;
border-radius: 50%;
-webkit-border-radius:50%;

    animation: eyes_earthafter 2s infinite;
    -webkit-animation: eyes_earthafter 2s infinite;
    -o-animation: eyes_earthafter 2s infinite;
    -moz-animation: eyes_earthafter 2s infinite;
}


@-webkit-keyframes eyes_earthafter
{
0% {height:15px;}
5% {height:0px;}
10% {height:15px;}
100% {height:15px;}
}

@-moz-keyframes eyes_earthafter
{
0% {height:15px;}
5% {height:0px;}
10% {height:15px;}
100% {height:15px;}
}

@-o-keyframes eyes_earthafter
{
0% {height:15px;}
5% {height:0px;}
10% {height:15px;}
100% {height:15px;}
}

@keyframes eyes_earthafter
{
0% {height:15px;}
5% {height:0px;}
10% {height:15px;}
100% {height:15px;}
}


@-webkit-keyframes eyes_earth
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-moz-keyframes eyes_earth
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-o-keyframes eyes_earth
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@keyframes eyes_earth
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}


.green {
background: #55a9b3;
width: 120px;
height: 120px;
position: absolute;
overflow: hidden;
left: 330px;
top: 220px;
 -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

    animation: green_planet 18s linear infinite;
    -webkit-animation: green_planet 18s linear infinite;
    -moz-animation: green_planet 18s linear infinite;
    -o-animation: green_planet 18s linear infinite;
}


@keyframes green_planet  
{
0% {
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}

50% { 
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}

51% {
        transform: scaleX(1);
        filter: none;
        -ms-filter: "none";}

100% {
        transform: scaleX(1);
        filter: none;
        -ms-filter: "none";}

}


@-webkit-keyframes green_planet  
{
0% {
        -webkit-transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}

50% { 
        -webkit-transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}

51% {
        -webkit-transform: scaleX(1);
        filter: none;
        -ms-filter: "none";}

100% { 
        -webkit-transform: scaleX(1);
        filter: none;
        -ms-filter: "none";}

}


@-moz-keyframes green_planet  
{
0% { -moz-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}

50% { -moz-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}

51% { -moz-transform: scaleX(1);
        transform: scaleX(1);
        filter: none;
        -ms-filter: "none";}

100% { -moz-transform: scaleX(1);
        transform: scaleX(1);
        filter: none;
        -ms-filter: "none";}
}


@keyframes green_planet 
{
0% {    transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}

50% {
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}

51% {  transform: scaleX(1);
        filter: none;
        -ms-filter: "none";}

100% { 
        transform: scaleX(1);
        filter: none;
        -ms-filter: "none";}
}


.green:before {position: absolute;
content: '';
background: #2b838e;
width: 20px;
height: 30px;
border-radius: 50%;
-webkit-border-radius:50%;
top: 100px;
right: 30px;
box-shadow: 4px -3px 0px #1e6d78 inset;}

.green:after {position: absolute;
content: '';
background: #2b838e;
width: 30px;
height: 30px;
border-radius: 50%;
-webkit-border-radius:50%;
top: 60px;
right: 60px;
box-shadow: 5px -2px 0px #1e6d78 inset;}

.circles_green {background: #2b838e;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-border-radius:50%;
top: -4px;
right: -10px;
position: absolute;
display: block;
box-shadow: 4px -4px 0px #1e6d78 inset;
}

.circles_green:before {content: '';
background: #2b838e;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-border-radius:50%;
top: -4px;
right: 95px;
position: absolute;
box-shadow: -2px -4px 0px #1e6d78 inset;

}


.eyes_green {width: 14px;
height: 20px;
position: absolute;
display: block;
background: #181818;
top: 30px;
right: 40px;

    animation: eyes_green 2s infinite;
    -webkit-animation: eyes_green 2s infinite;
    -moz-animation: eyes_green 2s infinite;
    -o-animation: eyes_green 2s infinite;
}

.eyes_green:after {
    content: '';
width: 12px;
height: 15px;
position: absolute;
display: block;
background: #181818;
top: 0px;
right: -11px;
border-radius: 50%;
-webkit-border-radius:50%;

    animation: eyes_greenafter 2s infinite;
    -webkit-animation: eyes_greenafter 2s infinite;
    -moz-animation: eyes_greenafter 2s infinite;
    -o-animation: eyes_greenafter 2s infinite;
}


@-webkit-keyframes eyes_greenafter
{
0% {height:15px;}
5% {height:0px;}
10% {height:15px;}
100% {height:15px;}
}

@-moz-keyframes eyes_greenafter
{
0% {height:15px;}
5% {height:0px;}
10% {height:15px;}
100% {height:15px;}
}

@-o-keyframes eyes_greenafter
{
0% {height:15px;}
5% {height:0px;}
10% {height:15px;}
100% {height:15px;}
}

@keyframes eyes_greenafter
{
0% {height:15px;}
5% {height:0px;}
10% {height:15px;}
100% {height:15px;}
}

@-webkit-keyframes eyes_green
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-moz-keyframes eyes_green
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-o-keyframes eyes_green
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@keyframes eyes_green
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}


.eyes_red {width: 20px;
height: 30px;
position: absolute;
display: block;
background: #181818;
top: 60px;
right: 60px;

    animation: eyes_red 2s infinite;
    -webkit-animation: eyes_red 2s infinite;
    -moz-animation: eyes_red 2s infinite;
    -o-animation: eyes_red 2s infinite;
}

.eyes_red:after {
    content: '';
width: 14px;
height: 20px;
position: absolute;
display: block;
background: #181818;
top: 8px;
right: -13px;
border-radius: 50%;
-webkit-border-radius:50%;

    animation: eyes_redafter 2s infinite;
    -webkit-animation: eyes_redafter 2s infinite;
    -moz-animation: eyes_redafter 2s infinite;
    -o-animation: eyes_redafter 2s infinite;
}

@keyframes eyes_redafter
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-webkit-keyframes eyes_redafter
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-moz-keyframes eyes_redafter
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-o-keyframes eyes_redafter
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-webkit-keyframes eyes_red
{
0% {height:30px;}
5% {height:0px;}
10% {height:30px;}
100% {height:30px;}
}

@-moz-keyframes eyes_red
{
0% {height:30px;}
5% {height:0px;}
10% {height:30px;}
100% {height:30px;}
}

@-o-keyframes eyes_red
{
0% {height:30px;}
5% {height:0px;}
10% {height:30px;}
100% {height:30px;}
}

@keyframes eyes_red
{
0% {height:30px;}
5% {height:0px;}
10% {height:30px;}
100% {height:30px;}
}

.yellow {
background: #efc849;
width: 180px;
height: 180px;
position: absolute;
overflow: hidden;
left: 520px;
top: 60px;
}

.yellow:before {
position: absolute;
content: '';
background: #E8A344;
width: 39px;
height: 30px;
border-radius: 50%;
-webkit-border-radius:50%;
top: 127px;
right: 80px;
box-shadow: 3px -1px 0px #E18F33 inset;
}

.yellow:after {
position: absolute;
content: '';
background: #E8A344;
width: 50px;
height: 38px;
border-radius: 50%;
-webkit-border-radius:50%;
top: 70px;
right: 28px;
box-shadow: 5px 1px 0px #E18F33 inset;
}

.circles_yellow {
background: #E8A344;
width: 60px;
height: 33px;
top: 9px;
position: absolute;
right: 61px;
box-shadow: 5px 0px 0px #E18F33 inset;
}

.eyes_yellow {width: 20px;
height: 30px;
position: absolute;
display: block;
background: #181818;
top: 60px;
right: 130px;

        animation: eyes_yellow 2s infinite;
        -webkit-animation: eyes_yellow 2s infinite;
        -moz-animation: eyes_yellow 2s infinite;
        -o-animation: eyes_yellow 2s infinite;

}

.eyes_yellow:after {
        content: '';
width: 14px;
height: 20px;
position: absolute;
display: block;
background: #181818;
top: 8px;
right: 18px;
border-radius: 50%;
-webkit-border-radius:50%;

        animation: eyes_yellowafter 2s infinite;
        -webkit-animation: eyes_yellowafter 2s infinite;
        -moz-animation: eyes_yellowafter 2s infinite;
        -o-animation: eyes_yellowafter 2s infinite;
}

@keyframes eyes_yellowafter
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-webkit-keyframes eyes_yellowafter
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-moz-keyframes eyes_yellowafter
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-o-keyframes eyes_yellowafter
{
0% {height:20px;}
5% {height:0px;}
10% {height:20px;}
100% {height:20px;}
}

@-webkit-keyframes eyes_yellow
{
0% {height:30px;}
5% {height:0px;}
10% {height:30px;}
100% {height:30px;}
}

@-moz-keyframes eyes_yellow
{
0% {height:30px;}
5% {height:0px;}
10% {height:30px;}
100% {height:30px;}
}

@-o-keyframes eyes_yellow
{
0% {height:30px;}
5% {height:0px;}
10% {height:30px;}
100% {height:30px;}
}

@keyframes eyes_yellow
{
0% {height:30px;}
5% {height:0px;}
10% {height:30px;}
100% {height:30px;}
}



.moon {
    background: #e8e8e8;
    width: 75px;
    height: 75px;
    position: absolute;
    overflow: hidden;
    right: 0px;
    top: 120px;
    z-index: 3;
}

.moon:before {
    position: absolute;
content: '';
background: #E2E2E2;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-border-radius:50%;
top: -20px;
right: 49px;
box-shadow: 0px -5px 0px #C8C8C8 inset;
}

.moon:after {
    position: absolute;
    content: '';
    background: #e2e2e2;
    width: 80px;
    height: 50px;
    border-radius: 50%;
    -webkit-border-radius:50%;
    top: 90px;
    right: 20px;
    box-shadow: -6px 0px 0px #c8c8c8 inset;
}

.circles_moon {    
    position: absolute;
background: #CECECE;
width: 15px;
height: 19px;
top: 46px;
right: 24px;
box-shadow: 2px -1px 0px #B1B1B1 inset;
z-index: 4;
    }

.circles_moon:after {    
    position: absolute;
background: #E2E2E2;
content: '';
width: 50px;
height: 40px;
top: -48px;
right: -52px;
border-radius: 50%;
-webkit-border-radius:50%;
box-shadow: 1px -3px 0px #C8C8C8 inset;
    }



.eyes_moon {
    width: 9px;
height: 10px;
position: absolute;
display: block;
background: #181818;
top: 34px;
right: 51px;

    animation: eyes_moon 2s infinite;
    -webkit-animation: eyes_moon 2s infinite;
    -moz-animation: eyes_moon 2s infinite;
    -o-animation: eyes_moon 2s infinite;
}

.eyes_moon:after {
content: '';
width: 10px;
height: 13px;
position: absolute;
display: block;
background: #181818;
top: -4px;
right: -9px;
border-radius: 50%;
-webkit-border-radius:50%;

    animation: eyes_moonafter 2s infinite;
    -webkit-animation: eyes_moonafter 2s infinite;
    -moz-animation: eyes_moonafter 2s infinite;
    -o-animation: eyes_moonafter 2s infinite;
}


@-webkit-keyframes eyes_moonafter
{
0% {height:13px;}
5% {height:0px;}
10% {height:13px;}
100% {height:13px;}
}

@-moz-keyframes eyes_moonafter
{
0% {height:13px;}
5% {height:0px;}
10% {height:13px;}
100% {height:13px;}
}

@-o-keyframes eyes_moonafter
{
0% {height:13px;}
5% {height:0px;}
10% {height:13px;}
100% {height:13px;}
}

@keyframes eyes_moonafter
{
0% {height:13px;}
5% {height:0px;}
10% {height:13px;}
100% {height:13px;}
}


@-webkit-keyframes eyes_moon
{
0% {height:10px;}
5% {height:0px;}
10% {height:10px;}
100% {height:10px;}
}

@-moz-keyframes eyes_moon
{
0% {height:10px;}
5% {height:0px;}
10% {height:10px;}
100% {height:10px;}
}

@-o-keyframes eyes_moon
{
0% {height:10px;}
5% {height:0px;}
10% {height:10px;}
100% {height:10px;}
}

@keyframes eyes_moon
{
0% {height:10px;}
5% {height:0px;}
10% {height:10px;}
100% {height:10px;}
}


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

  .container {width: 400px !important}

.planets {
    -webkit-transform: scale(0.6);
     -moz-transform: scale(0.6);
     -o-transform: scale(0.6);
     transform: scale(0.6);

    width: 100%;
    left: -55px;
    margin-top: -90px;
}

.earth, .moon {opacity: 0}

.red {left: -50px;}

.green {left: 250px;}

.yellow {left: 380px;}

}


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

  .planets {
    -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
    width: 120%;
    left: -55px;
    margin-top: -90px;
    }

.red {left: -50px;}

.green {left: 250px;}

.yellow {left: 380px;}

.earth {right: 30px;}

.moon {right: -30px;}
}

@media (min-width : 800px) and (max-width : 1024px) {

  
.planets {
    -webkit-transform: scale(0.85);
     -moz-transform: scale(0.85);
     -o-transform: scale(0.85);
     transform: scale(0.85);

width: 120%;
left: -78px;
}

}