html, body {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background-color: #101010;
  background-image: radial-gradient(#0f0f0f, #303030);
  cursor: pointer;  
  
}


body:after {
  content: "Click or tap to add hearts!";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: white;
  opacity: 0.2;
  font-size: 12px;
  line-height: 20px;
  
}

.heart-outer {
  display: block;
  position: absolute;
  left: -30px;
  top: -15x;
}
.heart-outer .heart-inner {
  display: inline-block;
  position: relative;
  background-color: pink;
  width: 30px;
  height: 30px;
  margin: 0 10px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.heart-outer .heart-inner:before, .heart-outer .heart-inner:after {
  content: "";
  position: absolute;
  background-color: inherit;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.heart-outer .heart-inner:before {
  top: -15px;
  left: 0;
}
.heart-outer .heart-inner:after {
  left: 15px;
  top: 0;
}

@media only screen 
  and (max-width: 480px) { 
   html, body {
  cursor: none;    
}
}