/* phone */
.phone {
  --screen-clr: #0d85aa;
  --border-clr: #29536d;
  --loader-clr: #CCE3DE;
  background-color: var(--screen-clr);
  height: 13rem;
  aspect-ratio: 10/16;
  border-radius: .5rem;
  border: 5px solid var(--border-clr);
  border-top: 10px solid var(--border-clr);
  border-bottom: 10px solid var(--border-clr);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  animation: shake .5s infinite linear;
  position: relative;
}

/* camera */
.phone::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 5px;
  background-color: var(--loader-clr);
  border-radius: .5rem;
}

/* loader */
.loader {
  border: 10px dashed var(--loader-clr);
  width: 2rem;
  height: 2rem;
  padding: 1.7rem;
  border-radius: 50%;
  animation: loading 2s infinite ease-in-out;
}

/* loading text */
.text {
  color: var(--loader-clr);
}

/* loader spinning */
@keyframes loading {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}

/* phone shaking */
@keyframes shake {
  0% {
    rotate: 0deg;
  }

  10% {
    rotate: .5deg;
  }

  20% {
    rotate: 0deg;
  }

  30% {
    rotate: -.5deg;
  }

  50% {
    rotate: 0deg;
  }

  100% {
    rotate: 0deg;
  }
}