html {
  font-size: 62.5%;
}

body {
  width: 42vw;
  left: 29vw;
  position: absolute;
}

h1 {
  font-size: 3.2rem;
}

h2 {
  font-size: 4.8rem;
}

p {
  font-size: 1.6rem;
}

.title {
  text-align: right;
}

.content {
  background-color: linear-gradient(45deg, #ffffff, #000000);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

@media (max-width: 800px) {
  body {
    width: 70vw;
    position: absolute;
    left: 15vw;
  }
}

@media (max-width: 600px) {
  body {
    width: 80vw;
    position: absolute;
    left: 10vw;
  }
}

.heart {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.heart > div {
  animation: beat 0.7s ease-in alternate infinite;
  margin: 0 1rem;
}

@keyframes beat {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(2.2);
  }
}

.time-to {
  position: absolute;
  top: 0;
  right: 0;
  font-family: sans-serif;
}

.may-day {
  position: absolute;
  top: 1.2rem;
  right: 0;
  font-family: sans-serif;
}