body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-family: system-ui;
  background: rgb(1, 37, 104);
  /*  background:url('/main/assets/bg.jpg') center center / cover no-repeat; */
}

@keyframes bgFade {
  from {opacity: 0; }
  to {opacity: 1; }
}
.login-box {
  width: 340px;
  padding: 24px;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  animation: bgFade 0.5s ease;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);

  box-shadow: 0 0 50px rgba(0, 0, 0, 0.671);
        opacity:0;
      animation:logoReveal .6s ease forwards;
      animation-delay:1.2s;
      transition:opacity .6s ease;
}

    @keyframes logoReveal{
      to{ opacity:1; }
    }
a {
  color:ghostwhite;
  text-decoration:none;
}
a:hover {
  color:#439df7;
}

input {
  width: 95% !important;
  padding: 10px;
  margin: 8px 0;
  border-radius: 6px;
  border: 1px solid #3699f5;
  /* background: rgba(255,255,255,0.10); */
  background: rgba(2, 13, 32, 1.0);
  box-shadow: inset 0 0 10px rgba(1, 153, 212, 0.6);
  /* color:#012447 !important; */
  color: ghostwhite !important;
  outline:none;
  transition: all 0.9s ease, transform 0.9s ease;
}
input-placeholder {
  color:#777;
}

input:hover {
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 20px rgba(244, 246, 247, 0.81);  
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border: 1px solid rgba(1, 152, 212, 0.301);
}


input:focus {
  box-shadow: inset 0 0 0;
  border: 1px solid rgba(1, 152, 212, 0.301);
  color:#559ce4 !important;
}
button {
  width: 95% !important;
  padding: 10px;
  margin-top: 10px;
  border: none;
  border-radius: 6px;
  background: #00b5fc;
  color: white;
  cursor: pointer;
  font-weight: 900;
  margin-bottom: 20px;
}

button:hover {
  box-shadow: 0 0 20px inset rgba(244, 246, 247, 0.81);
  text-shadow: 0 0 8px rgba(0,0,0,.75);
}
.error {
  color: red;
  margin-bottom: 10px;
}

.logo {
  width: 100%;
  opacity:.70;
  animation: flicker2 .0s linear alternate infinite;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: inset 0 0 20px rgba(1, 153, 212, 0.6);
  margin-bottom: 20px;
  background: rgba(0, 8, 44, 0.658) !important;
}

@keyframes flicker {
  100%{
    opacity: 1;
  }
  40%, 70%, 90% { 
    opacity: .7;
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9999;
}

.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.05);
  /* background3: rgba(20,20,30,0.65); */
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 20px rgba(0,0,0,.50);
  padding: 25px;
  width: 320px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
}

.close {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  font-size: 18px;
}

.quest {
  color:#ffffff;
}