html, body {
    height: 100%; /* Zorg ervoor dat de hoogte van de pagina het volledige scherm vult */
    margin: 0; /* Verwijder de standaard marge */
    display: flex; /* Gebruik flexbox voor de uitlijning */
    justify-content: center; /* Horizontale uitlijning */
    align-items: center; /* Verticale uitlijning */
    background-color: #f7f7f7; /* Optioneel, voor een lichtere achtergrondkleur */
}

.container {
    max-width: 100%; /* Zorg ervoor dat de container niet te breed wordt */
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    width: 30rem; /* Card breedte */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 20px; /* Voeg padding toe voor een netter uitziende card */
}


.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 70%;
    transform: translateY(-50%);
    cursor: pointer;
}

.toggle-password img {
    width: 24px;
    height: 24px;
    opacity: 0.6;
}

.toggle-password img:hover {
    opacity: 1;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

.error-message {
    color: #000000;
    margin-top: 10px;
    animation: shake 0.3s ease-in-out; /* Snellere shake animatie */
    animation-iteration-count: 2S; /* Het schudden gebeurt twee keer */
}