body {
   margin: 0;
   padding: 0;
   font-family: "Nunito", sans-serif;
   height: 100vh;
   /* background: url('background.jpg') no-repeat center center fixed; */
   background: linear-gradient(-45deg, #0052d4, #4364f7, #6fb1fc,rgb(192, 233, 255));
   background-size: 300% 300%;
   animation: gradientBG 6s ease-in-out infinite;
   display: flex;
   justify-content: center;
   align-items: center;
}

.login-box {
   width: 400px;
   background: rgba(0, 0, 0, 0.2); /* Transparent background */
   box-shadow: 5px 20px 50px #000;
   border-radius: 12px;
   color: white;
   padding: 30px 20px;
   backdrop-filter: blur(10px); /* Adds a glass-like blur effect */
}

.login-header {
   font-size: 22px;
   font-weight: bold;
   text-align: center;
   margin-bottom: 20px;
}

.login-content {
   padding: 0 20px;
}

.input-container {
   margin-bottom: 20px;
}

.input-label {
   font-size: 14px;
   margin-bottom: 5px;
   display: block;
}

.box {
   width: 100%;
   padding: 10px;
   margin: 8px 0;
   border: none;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.1);
   color: white;
   box-sizing: border-box;
   font-size: 14px;
}

.box::placeholder {
   color: rgba(255, 255, 255, 0.5);
}

.loginButton {
   width: 100%;
   padding: 10px;
   font-size: 16px;
   background-color: #ff5722;
   border: none;
   border-radius: 6px;
   color: white;
   cursor: pointer;
   font-weight: bold;
   transition:  all .3s ease; 
}

.loginButton:hover {
   transform:  translateY(-3px);
}

.forgot-password-container a {
   color: #ff5722;
   text-decoration: none;
   font-size: 14px;
}

.forgot-password-container a:hover {
   text-decoration: underline;
}

.error-message {
   font-size: 14px;
   color: #ff0000;
   text-align: center;
   margin-bottom: 10px;
   font-weight: bold;
}

@keyframes gradientBG {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}