/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
    background:#6953ac;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}




body {
	
	
}


#container {
	
}

div#AA{
    background:#ffb3ff;
    width:400px;
    height:300px;
    border-radius:50%;
    position:absolute;
    bottom:20px;
    right:20px;
    transition: all 3s;
    z-index: 7;

}

div#AA:hover{
    background:#a9ec93;
    height:400px;
    bottom:50px;
    right:70px;
    border: 10px dotted #393946;
}


div#BB{
    font-size:300px;
    color:#badb57;
    position: absolute;
    top:200px;
    left:20px;
    transition: all 2s;
    z-index: 6;

}

div#BB:hover{
    color:#db5778;
}

div#CC{
    background:#3d2e6b;  
    width:0;
    height:0;
    font-size:200px;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top:50px solid #3d2e6b;
    position: absolute;
    top:200px;
    left:400px;
    transition: all 1s;
    z-index: 5;

}

div#CC:hover{
    background:#6953ac;
    border-top: 50px solid #e9c763;
    transform:rotate(180deg)scale(3);
}

div#DD{
    width:150px;
    font-size:300px;
    color:#ffe6ff;
    position:absolute;
    left:200px;
    bottom:400px;
    transition:all 7s;
    z-index: 4;

    
}

div#DD:hover{
    transform:skewX(30deg);   
    opacity: 0.2;
    
}

div#EE{
    position: absolute;
    right: 200px;
    top: 100px;
    font-size:500px;
    color:#93bfec; 
    transition:10s;   
    z-index: 3;

}

div#EE:hover{
    transform: rotate(360deg);
    position:absolute;
    right:5px;
    top:150px;
}

div#FF{
    color:#dfff80;  
    font-size:400px;
    position: absolute;
    bottom:200px;
    left:500px;
    transition: all 1s;
    z-index: 2;

    
}

div#FF:hover{
   transform: skewY(40deg);
 font-size:800px;
    
}

div#GG{
    font-size:1000px;
    color: #60b6d2;
    position: absolute;
    left:10px;
    top:150px;
    opacity:20%;
    z-index: 1;
    transition:3s;
}

div#GG:hover{
    opacity:100%;
    z-index: 2;
    
}

div#HH{
    background:#db57db;
    border: 4px dashed #fbeafb;
    height: 25px;
    width: 50px;
    position:absolute;
    top:65px;
    left:240px;
    transition: all 9s;
    z-index: 9;
}

div#HH:hover{
    position:absolute;
    top:900px;
    left:240px;
    height:500px;
    width:1000px;
    border:40px dotted dashed #badb57;
}

div#II{
      width: 100px;
      height: 50px;
    position:absolute;
      top:230px;
    left:600px;
      transform: skew(20deg);
      background: #ccc0f2;
    z-index:10;
    transition:4s;
    }
  

div#II:hover{
    transform:skew(0deg,80deg) rotateX(450deg);
}

div#JJ{width: 0;
      height: 0;
      border-bottom: 100px solid #b3ffff;
      border-left: 100px solid transparent;
    position: absolute;
    bottom:-50px;
    right:600px;
  transition:7s;

}

div#JJ:hover{
    transform: matrix(0.586,0.8,-0.8,0.586,40,30);
border-radius: 50px;
    position: absolute;
    bottom:30px;
    right:500px;
    width:100px;
    height:100px;
    opacity: 10%;

}