CSS Battle - Checkers

checkers.css

/* Using Box shadow and box-reflect */

<div class=a>
<style>
*{background:#926927}
.a{
  width: 20;
  height:20;
  background:#F8B140;
  border-radius: 50%;
  position: fixed;
  top: 40;
  left: 190;
  box-shadow: -15px 25px #F8B140, 15px 25px #F8B140, -30px 50px #F8B140, 0px 50px #F8B140, 30px 50px #F8B140, -45px 75px #F8B140, -15px 75px #F8B140, 15px 75px #F8B140, 45px 75px #F8B140, -60px 100px #F8B140, -30px 100px #F8B140, 0px 100px #F8B140, 30px 100px #F8B140, 60px 100px #F8B140, -75px 125px #F8B140, -45px 125px #F8B140, -15px 125px #F8B140, 15px 125px #F8B140, 45px 125px #F8B140, 75px 125px #F8B140, -90px 150px #F8B140, -60px 150px #F8B140, -30px 150px #F8B140, 0px 150px #F8B140, 30px 150px #F8B140, 60px 150px #F8B140, 90px 150px #F8B140;
-webkit-box-reflect: below 180px
}

/* Using radial gradient */

<center><p a><p b><p><p c><p d><p c><p><p b><p a><style>*{background:#926927}p{background:radial-gradient(1q,#F8B140,11q,#0000)0/30px;height:20;margin:40 87-35}[a]{width:30}[b]{width:60}[c]{width:180}[d]{width:150