html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

shell-app:not(:empty) + .loading-page {
  display: none;
}

.loading-page {
  height: 100%;
  width: 100%;
}

.loading {
  position: absolute;
  width: 100%;
  height: 77%;
  bottom: 0;
  background-size: cover;
  background-position: top center;
}

.loading-text {
  font-size: 30px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  margin-top: 5%;
  font-family: sans-serif;
}

.loading-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@keyframes dots {
  50% {
    transform: translateY(-0.4rem);
  }
  100% {
    transform: translateY(0);
  }
}

.d {
  font-size: 40px;
  line-height: 0.7;
  animation: dots 1.5s ease-out infinite;
}
.d-2 {
  animation-delay: 0.5s;
}
.d-3 {
  animation-delay: 1s;
}

@media only screen and (max-width: 768px) {
  .loading {
    height: 80%;
  }
  .loading-text {
    padding-top: 10px;
    font-size: 18px;
  }
  .d {
    font-size: 20px;
  }
  @keyframes dots {
    50% {
      transform: translateY(-0.2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
}