@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(400px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app:empty {
  background: linear-gradient(180deg, #7ed2fc 0%, #b0eae4 100%);
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
}

.app:empty::before {
  content: '';
  height: 40px;
  width: 180px;
  background-repeat: no-repeat;
  background-image: url('./scoir-blue-logo.svg');
  background-size: cover cover;
  background-position: center center;
  animation: slideUpFadeIn 0.75s ease-out;
}

.app:empty::after {
  content: '';
  margin-top: 50px;
  height: 40px;
  width: 96px;
  background-repeat: no-repeat;
  background-image: url('./loading_dots.gif');
  background-size: contain;
  background-position: center center;
  animation: slideUpFadeIn 0.75s ease-out;
}