.account {
  --x: 72%;
  --y: 32%;
  --size: min(18vw, 22vh);

  --opacity: 0;
  --time: 3800ms;
  z-index: 15;
  cursor: default;
  filter: drop-shadow(22px 28px 26px rgba(0,0,0,.20));
}
.account {
  background-image: url("../assets/images/moon.PNG");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  overflow: hidden;
    color: rgb(249, 249, 24);
  text-shadow:
    0 0 4px rgba(0,0,0,.8),
    0 0 12px rgba(0,0,0,.7),
    2px 2px 6px rgba(0,0,0,.8);
}

.account.open {
  --scale: 1;
  --opacity: 1;
  padding: 0;
}



.account.focus {
  --x: 72%;
  --y: 32%;
  --size: min(34vw, 34vh);
  --scale: 1.6;
  --time: 2800ms;
  z-index: 40;
  padding: 0;
}

.account-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
}

.account:not(.focus) .account-shell {
  opacity: 0;
}

.account:not(.focus) .account-form,
.account:not(.focus) .account-title,
.account:not(.focus) .account-phase-start,
.account:not(.focus) .account-choice,
.account:not(.focus) button,
.account:not(.focus) input {
  display: none !important;
}

.account:not(.focus) .account-label {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;
  margin: 0;

  font-size: clamp(14px, 2.4vw, 28px);
  font-weight: 950;
  letter-spacing: 0.08em;
}
.account.focus .account-label,
.account.logged-in-moon .account-label {
  display: none;
}

.account-form {
  width: 50%;
  height: auto;
  gap: .35em;
  font-size: calc(var(--size) * .045);
}

.account-title {
  text-align: center;
  font-size: 1.8em;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgb(249, 249, 24);
  text-shadow:
    0 0 4px rgba(0,0,0,.8),
    0 0 12px rgba(0,0,0,.7),
    2px 2px 6px rgba(0,0,0,.8);
  margin-top: -25px;
  margin-bottom: 20px;
}

.account-form input,
.account-form button {
  width: 100%;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 700;
  min-height: 1.5em;
}

.account-form input {
  background: rgba(255,255,255,.92);

  padding: 0 2em;
  color: #111733;
  outline: none;
}

.account-form input::placeholder {
  color: #7f8298;
}

.account-form button {
  background: #0f1a49;
  color: white;
  cursor: pointer;
  font-size: 1.15em;
  font-weight: 950;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.account-form button:hover {
  background: rgba(92, 81, 81, 0.66);
}

.account-phase {
  width: 100%;  
}

.account-phase-start {
  display: grid;
  gap: .46em;
}

.account-phase-form {
  display: none;
  gap: .42em;
}

.account-choice {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: .62em .8em;
  font: inherit;
  font-weight: 950;
  color: #111733;
  background: rgba(255,255,255,.46);
  box-shadow:
    inset 0 1px 4px rgba(255,255,255,.55),
    0 4px 12px rgba(0,0,0,.08);
  cursor: pointer;
}

.account-choice:hover {
  background: rgba(92, 81, 81, 0.66);
}

.account-form .register-only,
.account:not(.register-mode) .register-only {
  display: none !important;
}

.account.register-mode .register-only {
  display: block !important;
}

.account .forgot-link,
.account .back-link {  
  background: transparent !important;
  color: #f7f2f3 !important;
   box-shadow:
    inset 0 1px 4px rgba(255,255,255,.55),
    0 4px 12px rgba(0,0,0,.08);
  
}

.account .forgot-link {
  font-size: 1.2em !important;
}
.account .back-link {
  font-size: 1.8em !important;  
}

.login-message {
  min-height: .15em;
  margin-top: 0em;
  font-size: 1.8em;
  font-weight: 600;
  color: #f16780;
  text-align: center;
}

.json-export,
.account .json-export {
  display: none !important;
  background: rgba(17,23,51,.14) !important;
  color: #111733 !important;
  font-size: .7em !important;
  min-height: 1.8em !important;
  box-shadow: none !important;
}

.account.focus .json-export {
  display: block;
}

.account.logged-in-moon {
  pointer-events: none !important;
  cursor: default !important;

  width: min(6vw, 6vh) !important;
  height: min(6vw, 6vh) !important;
}


@keyframes moonOrbit {
  0% {
    left: 72%;
    top: 18%;
    transform: translate(-50%, -50%) scale(1);  
  }

  2.08% {
    left: 71.6%;
    top: 17.5%;
    transform: translate(-50%, -50%) scale(0.8);
  }

  4% {
    left: 70%;
    top: 16%;
    transform: translate(-50%, -50%) scale(0.6);
  }
  
  8.33% {
    left: 66.5%;
    top: 15%;
    transform: translate(-50%, -50%) scale(0.01);
  }

  16.7% {
    left: 56%;
    top: 15.4%;
    transform: translate(-50%, -50%) scale(0.01);
  }

  25% {
    left: 46%;
    top: 16%;
    transform: translate(-50%, -50%) scale(0.01);
  }
  
  33.3% {
    left: 40%;
    top: 15.4%;
    transform: translate(-50%, -50%) scale(0.01);
  }

  41.7% {
    left: 32%;
    top: 15%;
    transform: translate(-50%, -50%) scale(0.01);
  }

  45.8% {
    left: 28%;
    top: 16%;
    transform: translate(-50%, -50%) scale(0.2);
  }

  47.9% {
    left: 25%;
    top: 16.5%;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    left: 24%;
    top: 18%;
    transform: translate(-50%, -50%) scale(1);
  }
  53% {
    left: 25%;
    top: 19%;
    transform: translate(-50%, -50%) scale(1.3);
  }
  
  55.16% {
    left: 28%;
    top: 20%;
    transform: translate(-50%, -50%) scale(1.5);
  }

  58.36% {
    left: 32%;
    top: 21%;
    transform: translate(-50%, -50%) scale(1.6);
  }
  66.7% {
    left: 40%;
    top: 22%;   
    transform: translate(-50%, -50%) scale(1.8);
  }

  75% {
    left: 48%;
    top: 23%;
    transform: translate(-50%, -50%) scale(1.85);
  }

  83.3% {
    left: 56%;
    top: 22%;
    transform: translate(-50%, -50%) scale(1.8);
  }

  91.7% {
    left: 63%;    
    top: 21%;
    transform: translate(-50%, -50%) scale(1.6);
  }

  95.8% {
    left: 68%;    
    top: 21.2%;
    transform: translate(-50%, -50%) scale(1.3);
  }
97.7% {
    left: 70%;
    top: 20.5%;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    left: 72%;    
    top: 18%;
    transform: translate(-50%, -50%) scale(1);
  }
}

.account.logged-in-moon {
  animation: moonOrbit 80s linear infinite !important;
}
.moon-shadow {
  position: absolute !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  background: rgb(63, 61, 61) !important;
  opacity: 0.7!important;
  z-index:10!important;
  pointer-events: none !important;

  animation: moonShadowOnEarth 80s linear infinite !important;
}

@keyframes moonShadowOnEarth {
  0% {
    left: 68%;
    top: 22%;
    transform: translate(-50%, -50%) scale(0.01);
  }

  25% {
    left: 50%;
    top: 18%;
    transform: translate(-50%, -50%) scale(0.01);
  }

  50% {
    left: 32%;
    top: 22%;
    transform: translate(-50%, -50%) scale(0.01);
  }

  65% {
    left: 40%;
    top: 24%;
    transform: translate(-50%, -50%) scale(0.8);
  }

  85% {
    left: 55%;
    top: 26%;
    transform: translate(-50%, -50%) scale(1);
  }
  
  100% {
    left: 68%;
    top: 22%;
    transform: translate(-50%, -50%) scale(0.01);
  }