body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.background {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: 
    radial-gradient(circle at 30% 30%, #e9eef7 0%, #b7c7e6 40%, transparent 80%),
    radial-gradient(circle at 70% 70%, #e9eef7 0%, #b7c7e6 40%, transparent 80%),
    radial-gradient(circle at 80% 20%, #e9eef7 0%, #b7c7e6 40%, transparent 80%),
    #dbe6f6;
  background-size: 120% 120%, 120% 120%, 120% 120%, cover;
  background-position: 30% 30%, 70% 70%, 80% 20%, center;
  animation: gradientMove 2s ease-in-out infinite alternate;
}

@keyframes gradientMove {
  0% {
    background-position:
      30% 30%,
      70% 70%,
      80% 20%,
      center;
  }
  100% {
    background-position:
      40% 40%,
      60% 80%,
      70% 30%,
      center;
  }
}

.content {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 5rem;
  font-style: italic;
  color: #23263a;
  margin: 0 0 0.5rem 0;
}

p {
  font-family: 'Instrument Serif', serif;
  font-size: 1.25rem;
  color: #7a7e8a;
  margin: 0;
}

code, pre, .monospace {
  font-family: 'JetBrains Mono', monospace;
}