<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>

  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:"Poppins",sans-serif;
    }

    body{
  min-height:100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;

  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;

  background-image: url("./pci.jpg");
  background-size: cover;

    
    }

    /* Dark overlay */
    body::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 0;
    }

    /* Grid effect */
    body::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(#1f1f1f 1px, transparent 1px),
        linear-gradient(90deg, #1f1f1f 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.2;
      z-index: 0;
    }

    /* Login Card */
    .login-card{
      width:380px;
      padding:35px 30px;
      background:rgba(255,255,255,0.06);
      backdrop-filter:blur(25px);
      border-radius:20px;
      border:1px solid rgba(255,255,255,0.2);
      box-shadow:0 25px 45px rgba(0,0,0,0.6);
      position:relative;
      z-index:2;
      animation: fadeIn 0.8s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px);} 
      to { opacity: 1; transform: translateY(0);} 
    }

    .login-card h2{
      font-size:24px;
      text-align:center;
      margin-bottom:25px;
      background: linear-gradient(90deg, #ffffff, #87ceeb);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .input-group{margin-bottom:14px;}

    .input-group label{
      font-size:12px;
      color:#bcd3ff;
      margin-bottom:4px;
      display:block;
    }

    .input-box{
      display:flex;
      align-items:center;
      background:rgba(255,255,255,.08);
      border-radius:8px;
      padding:10px 12px;
    }

    .input-box input{
      flex:1;
      background:transparent;
      border:none;
      outline:none;
      color:#fff;
      font-size:13px;
    }

    .input-box:focus-within{
      border:1px solid #2d8cff;
      box-shadow:0 0 8px rgba(45,140,255,0.4);
    }

    .login-btn{
      width:100%;
      padding:11px;
      border:none;
      border-radius:10px;
      background:linear-gradient(135deg,#2d8cff,#0066ff);
      color:#fff;
      font-size:14px;
      cursor:pointer;
      margin-top:10px;
    }

    .login-btn:hover{
      box-shadow:0 8px 20px rgba(0,102,255,.5);
    }

    .signup{
      text-align:center;
      font-size:12px;
      margin-top:14px;
    }

    .signup a{
      color:#9ec6ff;
      text-decoration:none;
    }

  </style>
</head>
<body>

  <div class="login-card">
    <h2>Login</h2>

    <div class="input-group">
      <label>Email</label>
      <div class="input-box">
        <input type="email" placeholder="Enter your email">
      </div>
    </div>

    <div class="input-group">
      <label>Password</label>
      <div class="input-box">
        <input type="password" placeholder="Enter your password">
      </div>
    </div>

    <button class="login-btn">Login</button>

    <div class="signup">
      Don't have an account? <a href="#">Sign up</a>
    </div>
  </div>

</body>
</html>