html {
    background-image: url(/matrixgreyscale.gif);
   
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: clamp(11px, 4vw, 18px);
    margin: clamp(10px, 3%, 50px);
}

.container {
    text-align: center;
    font-family: Times New Roman, serif;
    font-size: 125px;
    color: white;
}

/* Adjust the margin of the h1 to bring it closer to the input and button */
.container h1 {
    margin: 0 0 -50px 0; /* Top, Right, Bottom, Left */
    font-size: 235px; /* Ensure the font size is consistent */
}

input[type="password"] {
    padding: 8px;
    margin-top: 10px; /* Reduced margin-top */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 238px;
    font-size: 16px; /* Adjust font size for better readability */
}

button {
    padding: 6px 20px;
    margin-top: 10px; /* Reduced margin-top */
    font-size: 16px; /* Adjust font size for better readability */
    cursor: pointer; /* Add pointer cursor for better UX */
}

button:hover {
    background-color: #ffffff;
}

.hidden {
    display: none;
}

#errorMessage {
    color: red;
    margin-top: 10px;
    font-size: 16px; /* Adjust font size for better readability */
}