body {
  background-color: #56AEF4;
  color: inherit;
}

body:after {
  content: "";
  position: fixed;
  top: 0;
  height: 100vh;
  left: 0;
  right: 0;
  z-index: -1;
  background: linear-gradient(#1145B3, #5FBCFF);
  background-size: cover;
}

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 60vw;
  padding: 5vmax;
  background-color: #EEEEEE;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23);
}

#clouds-background {
  overflow-x: hidden;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

.cloud {
  opacity: 0.95;
  width: 40vmax;
  right: -40vmax;
  position: absolute;
  animation-name: float;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#cloud0 {
  top: -2vh;
  animation-duration: 80s;
  animation-delay: -13s;
}

#cloud1 {
  top: 15vh;
  animation-duration: 76s;
  animation-delay: 11s;
}

#cloud2 {
  top: 23vh;
  animation-duration: 81s;
  animation-delay: -37s;
}

@keyframes float {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100vw - 40vmax));
  }
}