/* styles used in the setup and activation views */

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow: auto;
}

h1 {
  margin-top: 0;
}

.view {
  margin: 60px 0;
  width: 100%;
  max-width: 500px;
}

.view code {
  background-color: transparent;
  cursor: copy;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes color {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

.gradient {
  --blob-size: 200px;
  --speed: 6s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);

  width: var(--blob-size);
  height: var(--blob-size);
  filter: blur(calc(var(--blob-size) / 5));
  animation: rotate var(--speed) var(--easing) alternate infinite, color 5s var(--easing) alternate infinite;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  margin-top: 60px;
  margin-bottom: 80px;

  background-size: 200% 200%;
  background-image: linear-gradient(#096dbd, #c340ff, #ffa240);
}