*{
  box-sizing:border-box;
  font-family:Arial, sans-serif;
  margin:0;
  padding:0;
}

body{
  background:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  overflow:hidden;
}

/* Sparkle Animation */

.sparkle{
  position:absolute;
  width:6px;
  height:6px;
  background:white;
  border-radius:50%;
  pointer-events:none;
  opacity:0.8;
  animation:sparkleAnim 1.2s linear infinite;
}

@keyframes sparkleAnim{
  0%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-10px) scale(1.5);}
  100%{transform:translateY(0) scale(1);}
}

/* App container */

.app{
  max-width:390px;
  width:100%;
  background:#f6f7f9;
  padding:40px 30px;
  text-align:center;
  position:relative;
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* Logo */

.logo{
  width:230px;
  margin-bottom:25px;
  opacity:0;
  transform:scale(0.8);
  animation:fadeScale 1s forwards;
}

@keyframes fadeScale{
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* Description */

.app p{
  font-size:15px;
  color:#444;
  margin-bottom:35px;
  line-height:1.6;
  max-width:260px;
}

/* Buttons */

.btn{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  font-size:16px;
  cursor:pointer;
  margin-bottom:15px;
  transition:all 0.3s ease;
}

/* Login button */

.login{
  background:#0d5c2f;
  color:#fff;
}

.login:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #0d5c2f;
}

/* Signup button */

.signup{
  background:#f1c232;
  color:#000;
  font-weight:bold;
}

.signup:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #f1c232;
}

/* Animations */

.btn{
  opacity:0;
  transform:translateY(20px);
  animation:fadeUp 0.8s forwards;
}

.btn.login{animation-delay:0.6s;}
.btn.signup{animation-delay:0.8s;}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}