html,
body {
  height: 100 !important;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

body {
  background-color: #cedbdb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg %3E%3Ccircle fill='%23CEDBDB' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23c7d4d4' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23c0cdcd' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23b9c6c6' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23b3bfc0' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23ACB8B9' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

body > .grid {
  height: 100%;
}

.image {
  margin-top: -100px;
}

.column {
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg3 {
  animation-duration: 5s;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

form#login-form {
  min-width: 30vw !important;
}