ACM Logo in CSS, challange accepted

dabblet.css

/**
 * ACM Logo in CSS, challange accepted
 */

#acm-logo{
  width:200px;
  height:200px;
  position:relative;
}
#diamond{
  width:50%;
  height:50%;
  transform:rotate(45deg);
  background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
  margin:15%;
  position:absolute;
}
#circle{
	position:absolute;;
	width:40%;
	height:40%;
	border:4px solid #fff;
	margin:18.5%;
	border-radius:1000px;
	background: linear-gradient(to top, #1e5799 0%,#7db9e8 100%); 
}
#text{
	position:absolute;
	top:30%;
	left:23%;
	color:#fff;
	font-family:Verdana;
	font-size:30px;
	font-weight:bold;
}

dabblet.html

<div id="acm-logo">
  <div id="diamond"></div>
  <div id="circle"></div>
  <div id="text">acm</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"110","seethrough":"","prefixfree":"1","page":"css"}