body {
  font-family: "Helvetica Neue", "Arial", sans-serif;
  text-transform: lowercase;
  color: rgba(35, 35, 35, 0.9);
  font-weight: 500;
  font-size: 2rem;
  margin: 0;
  width: 100vw;
}

.wrapper {
  position: relative;
  overflow: hidden;
}

main {
  background: linear-gradient(180deg, #bafc67, #fdabb588, #fff0);
  background-repeat: no-repeat;
  padding-left: 7vw;
  background-blend-mode: color;
  height: 700px;
}

.title {
  font-size: 5rem;
  margin-top: 0px;
  padding-top: 64px;
  margin-bottom: 48px;
  white-space: pre-line;
  line-height: 96%;
  font-weight: 500;
}

p {
  line-height: 96%;
}

p a {
  color: unset;
  text-decoration: none;
}

p a:hover {
  color: unset;
  text-decoration: underline;
}

.links {
  list-style: none;
  padding-left: 0;
}

.links li {
  margin: 8px 0px
}

.links a {
  color: #5550FFDF;
  text-decoration: none;
}

.links a:after {
  content: " ";
  font-family: "SF Pro Icons";
  font-size: 1.8rem;
  font-weight: 700;
}

.links a:hover {
  text-decoration: underline;
}

.circle {
  border-radius: 100%;
  position: absolute;
  display: block;
  z-index: -1;
  background: linear-gradient(180deg, #b0c5f9, #e7a7be, #fed6db);
  filter: blur(10px);
  animation-name: fade-up;
  animation-timing-function: ease-out;
}

.circle:nth-of-type(1) {
  width: 200px;
  height: 200px;
  left: 20px;
  top: 300px;
  animation-duration: 0.4s;
}

.circle:nth-of-type(2) {
  width: 300px;
  height: 300px;
  left: 500px;
  top: 0;
  animation-duration: 1s;
}

.circle:nth-of-type(3) {
  width: 140px;
  height: 140px;
  left: 100px;
  top: 70px;
  animation-duration: 3s;
}

@keyframes fade-up {
  from {
    transform: translateY(40%);
    opacity: 0%;
  }
  to {
    transform: translateY(0%);
    opacity: 100%;
  }
}