:root {
  --pageGrey: #212121;
  --lightBlue: #acc0ce;
  --pagePurple: #946E83;
  --pagePink: #fff0fb;
  --pageYellow: #fadf72;
  
  --darkBlue: #18252a;
  --pageGreen: #5f9774;
  --lightGreen: #8ed29c;
  --shadowBlue: #edfff4;
  --grey: #a2a2a2;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background-color: var(--darkBlue);
}
.heart {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: brown;
  transform: rotate(45deg);
  animation: heartbeat .8s linear 3;
}
.heart:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: brown;
  transform: translateY(-50%);
  border-radius: 50%;
}
.heart:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: brown;
  transform: translateX(-50%);
  border-radius: 50%;
}
@keyframes heartbeat {
  0% { transform: rotate(45deg) scale(1);}
  25% { transform: rotate(45deg)  scale(1);}
  30% { transform: rotate(45deg)  scale(1.4);}
  50% { transform: rotate(45deg)  scale(1.2);}
  70% { transform: rotate(45deg)  scale(1.4);}
  100% { transform: rotate(45deg)  scale(1);}
}