body {
    background-image: url("img/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'JetBrains Mono', monospace;
    background-color: #1e1e2d;
    color: #d1d1d1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.container {
    background-color: #2c2c4f;
    padding: 25px; /* Reduzido de 30px para 25px */
    border-radius: 12px; /* Reduzido de 15px para 12px */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7); /* Reduzindo o efeito de sombra */
    width: 85%; /* Reduzido para 85% */
    max-width: 400px; /* Diminuído de 450px para 400px */
    max-height: 820px; /* Diminuído de 750px para 700px */
    text-align: center;
    transition: transform 0.3s ease-in-out;
    box-sizing: border-box;
}

.container:hover {
    transform: scale(1.02);
}

h1, h2 {
    margin-bottom: 18px; /* Reduzido de 20px para 18px */
    color: #ffffff;
}

label {
    display: block;
    margin-bottom: 8px; /* Reduzido de 10px para 8px */
    text-align: left;
    font-weight: bold;
    color: #b0b0b0;
}

input {
    width: 100%;
    padding: 10px; /* Reduzido de 12px para 10px */
    margin-bottom: 18px; /* Reduzido de 20px para 18px */
    border-radius: 6px; /* Reduzido de 8px para 6px */
    border: 1px solid #4e4e4e;
    background-color: #3a3a4f;
    color: #ffffff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

input:focus {
    border-color: #00ff15;
}

button {
    font-family: 'JetBrains Mono', monospace;
    background-color: #4e4e4e;
    color: #ffffff;
    padding: 10px 18px; /* Reduzido o padding */
    border: none;
    border-radius: 6px; /* Reduzido de 8px para 6px */
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
    background-color: #00ff15;
    color: #080808;
    transform: translateY(-3px);
}

#datetime {
    margin-top: 18px; /* Reduzido de 20px para 18px */
    font-size: 13px; /* Reduzido de 14px para 13px */
    color: #9c9c9c;
}

/* Media query para ajustar layout em telas menores */
@media (max-width: 768px) {
    .container {
        padding: 18px; /* Reduzindo padding para telas menores */
    }

    h1, h2 {
        font-size: 1.4em; /* Ajustando o tamanho do texto */
    }
}