style.css

:root {
  --background-color: #000;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background-color: var(--background-color);
}

h1 {
  font-size: 300px;
  color: #fff;
  font-family: 'Fuzzy Bubbles', cursive;
  /* font-family: 'Love Ya Like A Sister', cursive; */
}

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #e54343;
  box-shadow: 0 0 10px #e54343, 0 0 40px #e54343, 0 0 80px #e54343;
}

canvas {
  z-index: 1;
  display: block;
  position: absolute;
  transform: scale(1.3);
  transform: translate(-50%, -50%);
  animation: heart 1s ease infinite;
}

@keyframes heart {
  0% {
    transform: scale(1.35);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.3);
  }
}

.i {
  margin: 150px 0 0 180px;
}

.u {
  margin: 150px 120px 0 0;
}

.description {
  margin-top: 50px;
  font-size: 35px;
  text-align: center;
  color: #fff;
  font-family: 'Fuzzy Bubbles', cursive;
}

.img-love {
  margin: 240px 0 0 35px;
  width: 8%;
  height: 8%;
  cursor: pointer;
}

.last-rose {
  color: #e54343;
}

.header {
  display: flex;
}

.img-relationship {
  width: 4%;
  margin: 40px auto 0;
}

.lop-gia {
  display: flex;
}

.shape-1 {
  position: absolute;
  z-index: 5;
  width: 8px;
  height: 250px;
  border-radius: 35% 35%;
  background: #000;
  opacity: 0.8;
  justify-content: center;
  box-shadow: 0 0 10px rgb(0, 0, 0), 0 0 40px rgb(0, 0, 0), 0 0 80px rgb(0, 0, 0);
  transform: translateX(713px) translateY(20px);
}

.shape {
  position: absolute;
  z-index: 5;
  width: 8px;
  height: 290px;
  border-radius: 35% 35%;
  background: rgba(0, 0, 0, 1);
  justify-content: center;
  opacity: 0.8;
  box-shadow: 0 0 10px rgb(0, 0, 0), 0 0 40px rgb(0, 0, 0), 0 0 80px rgb(0, 0, 0);
  transform: translateX(713px) translateY(265px);
}

.shape-2 {
  position: absolute;
  z-index: 5;
  width: 8px;
  height: 200px;
  border-radius: 35% 35%;
  background: #000;
  opacity: 0.8;
  justify-content: center;
  box-shadow: 0 0 10px rgb(0, 0, 0), 0 0 40px rgb(0, 0, 0), 0 0 80px rgb(0, 0, 0);
  transform: translateX(713px) translatey(550px);
}

@keyframes modal {
  0% {
    height: 295px;
  }
  50% {
    height: 300px;
  }
  100% {
    height: 290px;
  }
}