html,body{ height:100%; } body{ margin:0; padding:0; background-color:black; /* background-image:url('background.png'); background-repeat:no-repeat; */ background-size:100%; } #top{ position:absolute; } #message{ position:absolute; top:37%; width:100%; font-size:90%; } h1, p{ color:white; text-align:center; } #container{ min-height:100%; margin-bottom:-50px; } * html #container{ height:100%; } #footer-spacer{ height:0px; } #footer{ height:30px; } /* animation */ /* position the bars and balls correctly (rotate them and translate them outward)*/ .bar1 { -moz-transform:rotate(0deg) translate(0, -40px); -webkit-transform:rotate(0deg) translate(0, -40px);opacity:0.12; } .bar2 { -moz-transform:rotate(45deg) translate(0, -40px); -webkit-transform:rotate(45deg) translate(0, -40px);opacity:0.25; } .bar3 { -moz-transform:rotate(90deg) translate(0, -40px); -webkit-transform:rotate(90deg) translate(0, -40px);opacity:0.37; } .bar4 { -moz-transform:rotate(135deg) translate(0, -40px); -webkit-transform:rotate(135deg) translate(0, -40px);opacity:0.50; } .bar5 { -moz-transform:rotate(180deg) translate(0, -40px); -webkit-transform:rotate(180deg) translate(0, -40px);opacity:0.62; } .bar6 { -moz-transform:rotate(225deg) translate(0, -40px); -webkit-transform:rotate(225deg) translate(0, -40px);opacity:0.75; } .bar7 { -moz-transform:rotate(270deg) translate(0, -40px); -webkit-transform:rotate(270deg) translate(0, -40px);opacity:0.87; } .bar8 { -moz-transform:rotate(315deg) translate(0, -40px); -webkit-transform:rotate(315deg) translate(0, -40px);opacity:1; } #div4 { position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; width:100px; height:100px; -moz-border-radius:100px; -webkit-border-radius:100px; -moz-transform:scale(0.5); -webkit-transform:scale(0.5); -webkit-animation-name: rotateThis; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } #div4 div { width:20px; height:20px; background:#fff; -moz-border-radius:40px; -webkit-border-radius:40px; position:absolute; left:40px; top:40px; } /* add a shadow to the first */ #div4 div { -moz-box-shadow:black 0 0 4px; -webkit-box-shadow:black 0 0 4px; }