body {
  font-family: 'Patrick Hand', cursive;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  background-color: #001220;
}

hgroup {
  z-index: 10;
  position: absolute;
  color: #9B5DE5;
  text-align: center;
  top: 50%;
  mix-blend-mode: plus-lighter;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.5rem;
}

h1 {
  font-size: 4rem;
  margin: 0 auto;
}

h2 {
  font-size: 2rem;
  margin: 1rem auto 0;
}

.o-blob {
  width: auto;
  aspect-ratio: 16/9;
  height: 100vh;
  max-width: 100vw;
  display: block;
  margin: 0 auto;
}

.o-blob path {
  transition-property: fill;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(.46,-0.63,.79,1.57);
}

.o-background {
  aspect-ratio: 16/9;
  max-width: 100vw;
  max-height: 100vh;
  position: absolute;
}

.o-background.is-top-right {
  top: 0;
  right: 0;
}

.o-background.is-bottom-left {
  bottom: 0;
  left: 0;
}