<div id="pio"></div>

*,
*:after,
*:before {
    box-sizing: border-box;
}

html,
body{
  height: 100%;
}

body{
  background: -webkit-radial-gradient(center, ellipse cover, #fa8072 60%,#a84d4d 100%);
  background: -moz-radial-gradient(center, ellipse cover, #fa8072 60%,#a84d4d 100%);
}

#pio {
  position: absolute;
  width: 200px;
  height: 280px;
  top: 50%;
  left: 50%;
  margin-top: -140px;
  margin-left: -100px;
  background: -webkit-linear-gradient(top, #c96060 0%,#d82929 42%,#bc1e1e 45%,#e87d7d 100%);
  background: -moz-linear-gradient(top, #c96060 0%,#d82929 42%,#bc1e1e 45%,#e87d7d 100%);
  border-radius: 50%;
  box-shadow: 0 30px 40px rgba(0,0,0,0.5);
  border-top: 50px solid #FFDF89;
  border-bottom: 20px solid #FFBC89;
  animation: border 1s -0.5s ease-in-out infinite;
}

#pio:after,
#pio:before{
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#cecece 77%,#a0a0a0 100%);
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%,#cecece 77%,#a0a0a0 100%);
  box-shadow: 0 2px 5px #a84d4d;
  border-radius: 50%;
  content:"●";
  color: green;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -45px;
  width: 100px;
  height: 90px;
}

#pio:after{
  line-height: 100px;
  font-size: 5em;
  margin-left: 150px;
}

#pio:before{
  line-height: 50px;
  font-size: 2em;
  margin-left: -250px;
}

@keyframes border{
  50%{
    border-top: 90px solid #FFDD89;
    border-bottom: 90px solid #FFC089;
    box-shadow: 0px 50px 80px rgba(0,0,0,0.4);
    height: 220px;
    margin-top: -110px;
  }
}

// autor Marco Barría