body{
  width:100vw;
  height:100vh;
  margin:0;
  padding:0;
  overflow:hidden;
}
.pop_it_container{
  width:100%;
  height:100%;
  background:#ed4444;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.pop_it{
  width:10vw;
  height:10vw;
  border-radius:50% 50%;
  background:#ed4444;
  border:solid 1vw rgba(0,0,0,0.3);
  margin:2vw;
  position:relative;
  overflow:hidden;
}
.pop_it:active{
  transform:rotate(180deg);
}
.pop_it:after
{ 
  content:"";
  display:block;
  width:150%;
  height:150%;
  position:absolute;
  left:-25%;
  top:30%;
}
.pop_it:before
{ 
  content:"";
  display:block;
  width:150%;
  height:150%;
  background-image: radial-gradient(circle, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 70%);
  position:absolute;
  left:-25%;
  top:-70%;
}
.color_input_bg{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0.3;
  color:#fff;
}
.color_input_bg:active{
  opacity:1;
}
.pop_count{
  position:absolute;
  pointer-events:none;
  left:0;
  top:0;
  width:100%;
  height:100%;
  font-size:10vw;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  opacity:0;
  transition:0.3s;
}