html, body {
    
}
div#firstWords {
    background-color: white;
    font-family: sans-serif;
    font-size: x-small;
    color: gray; 
    position: absolute;
    left: -10;
    top: 100;
    width: 400;
}
div#secondWords {
    font-family: sans-serif;
    font-size: x-small;
    color: gray; 
    position: absolute;
    left: 300;
    top:300;
    width: 400;
}

div#randomPic {
    position: absolute;
    left: 100;
    top:600;
    width: 400;
}

div#circles{
	width:900;
	margin:30px ;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	



}

div#circles:hover{

color:#FFFFFF;
-webkit-transform: scale(0.5) ;
-moz-transform: scale(0.5) ;


-webkit-transform: translate(50,random(-10,10));
-moz-transform: translate(50,random(-10,10));
}



div#circle2{
	width:900;
	margin:30px ;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
}

div#circle2:hover{
-webkit-transform: scale(0.5) ;
-moz-transform: scale(0.5) ;


-webkit-transform: translate(50,random(-10,10));
-moz-transform: translate(50,random(-10,10));
}

div#circle3{
	width:900;
	margin:30px ;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
}

div#circle3:hover{
-webkit-transform: scale(0.5) ;
-moz-transform: scale(0.5) ;


-webkit-transform: translate(50,random(-10,10));
-moz-transform: translate(50,random(-10,10));
}

div#circle4{
	width:900;
	margin:30px ;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
}

div#circle4:hover{
-webkit-transform: scale(0.5) ;
-moz-transform: scale(0.5) ;

-webkit-transform: translate(50,random(-10,10));
-moz-transform: translate(50,random(-10,10));
}

div#circle5{
	width:900;
	margin:30px ;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
}

div#circle5:hover{
-webkit-transform: scale(0.5) ;
-moz-transform: scale(0.5) ;


-webkit-transform: translate(50,random(-10,10));
-moz-transform: translate(50,random(-10,10));
}


div#circle6{

display:block;
width:70px;
height: 70px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
margin:20px auto;
background:black;

width:70;
margin:30px ;
	
position:absolute;
top:100;
	
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
}

div#circle6:hover{
-webkit-transform: scale(0.5) ;
-moz-transform: scale(0.5) ;

background:white;
-webkit-transform: translate(50,10);
-moz-transform: translate(50,10);
}



div#circle7{

display:block;
width:70px;
height: 70px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
margin:20px auto;
background:#666;

width:70;
margin:30px ;
	
position:absolute;
top:200;
	
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
}

div#circle7:hover{
-webkit-transform: scale(0.5) ;
-moz-transform: scale(0.5) ;

background:#aaa;
-webkit-transform: translate(50,10);
-moz-transform: translate(50,10);
}



div#circle8{

display:block;
width:70px;
height: 70px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
margin:20px auto;
background:#aaa;

width:70;
margin:30px ;
	
position:absolute;
top:300;
	
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
}

div#circle8:hover{
-webkit-transform: scale(0.5) ;
-moz-transform: scale(0.5) ;

background:black;
-webkit-transform: translate(50,10);
-moz-transform: translate(50,10);
}
















.circle{
display:block;
width:70px;
height: 70px;
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
margin:20px auto;


}






h1{
color: #CCE6FF;
font-size: small;
font-family: sans-serif;
}


h2{
color:#FECCFF;
font-size: small;
font-family: sans-serif;
}


p{
background-color: white;
    font-family: sans-serif;
    font-size: x-small;
    color: gray; 
}