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

    body{
      height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
    }


    
    .login-container{
      width:350px;
      background:white;
      padding:40px;
      border-radius:15px;
      box-shadow:0 10px 25px rgba(0,0,0,0.2);
      text-align:center;
    }

    .login-container h1{
      margin-bottom:25px;
      color:#333;
    }

    .input-box {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 350px;
    margin: 15px auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
}

.input-box i {
    margin-right: 10px;
    color: #666;
    font-size: 18px;
  }

.input-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    background: transparent;
    }

    .btn{
      width:100%;
      padding:12px;
      border:none;
      border-radius:8px;
      font-size:16px;
      cursor:pointer;
      margin-top:10px;
      transition:0.3s;
    }

    .login-btn{
      background:#2a5298;
      color:white;
    }

    .login-btn:hover{
      background:#1e3c72;
    }

    .create-btn{
      background:#28a745;
      color:white;
    }

    .create-btn:hover{
      background:#218838;
    }

    .admin-btn{
      background:#dc3545;
      color:white;
    }

    .admin-btn:hover{
      background:#b52a37;
    }

    .divider{
      margin:20px 0;
      color:#777;
    }