body {
           background-image: url("wp6987774.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            font-family: sans-serif;
            text-align: center;
            background-position: center;
            background-attachment: fixed;
            align-items: center;
            justify-content: center;
             min-height: 100vh;
          
        }
        button {
  
         background: linear-gradient(90deg, #2196F3, #1976D2);
         cursor: pointer;
         width: 50%;
         font-size:20px;
         border-radius: 5px;
         color: white;
         transition: 0.3s ease;
}
       button:hover {
         transform: translateY(-2px); /* para gumalaw yung text*/
         background: linear-gradient(90deg, #45a049, #4CAF50);  /* para palipat lipat ng color */
    }

        form {
            width: 300px;
            margin: 20px auto;
            text-align: left;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            cursor: pointer;
        }
        .message {
            margin-top: 10px;
            color: red;
        }
        #logoutBtn {
            display: none;
            margin-top: 20px;
            background-color: red;
        }
       h1 {
             font-family: 'Raleway', sans-serif;
             color: white;
             text-shadow: 0 3px 6px rgba(0,0,0,0.5);
             font-weight: 700;
             letter-spacing: 2px;
       }
       
        h2 {
            font-family: sans-serif;
            color: white;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
        }
        #loginForm, #registerForm {
             width: 320px;
             margin: 20px auto;
             background: rgba(0, 0, 0, 0.6);
             padding: 40px;
             border-radius: 12px;
             box-shadow: 0 4px 15px rgba(0,0,0,0.4);
            color: white;
        }
        #loginForm h2,
        #registerForm h2 {
            text-align: center;
             margin-bottom: 20px;
}
#loginForm label,
#registerForm label {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}