.page {
  height: calc(100vh - 50px);
  max-height: -webkit-fill-available;
  flex: auto !important;
  background-color: #000;
  color: #fff;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  overflow: hidden;
}

.progressbar {
  position: relative;
  width: 100%;
  max-width: 250px;
  margin: 24px auto;
}

.aura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 250px;
  transition: top 3s, left 3s;

  background-image: url("/goosebumps-aura.png");
  background-size: 130%;
  background-repeat: no-repeat;
  background-position: center center;
  animation: appearance 3s, pulse 1s alternate infinite;
}

.process-items {
  overflow: hidden;
}

.process-item {
  display: flex;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 8px;
  line-height: 32px;
  position: relative;
  transition: top 0.4s ease-in-out;
}

.process-item__pick {
  position: relative;
  margin-right: 15px;
}

.process-item__icon {
  width: 32px;
}

.process-item__label {
  color: red;
}

.circular-progressbar {
  animation: appearance-progressbar 4s;
}


@keyframes appearance {
  0% {
    scale: .4;
  }

  33% {
    scale: .6;
  }

  66% {
    scale: .8;
  }

  100% {
    scale: 1;
  }
}


@keyframes pulse {
  0% {
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes appearance-progressbar {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}