.message-container {
    justify-content: center;
    align-items: center;
}

.message {
    display: inline-flex;
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin: auto 1rem;
    border-radius: var(--border-radius-small);
    color: var(--gray-dark);
    border: 1px solid var(--gray-dark);
    font-family: "Nunito", sans-serif;
    font-size: 0.975rem;
    font-weight: 500;
    line-height: 1.5;
    background-color: var(--gray-light);
}

.message > * {
    font-family: "Nunito", sans-serif;
}

.message::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.2rem;
    display: inline-block;
    min-width: 1.2rem;
    transition: transform 0.3s ease;
    transform: translateY(1px);
}

.message strong {
    font-weight: bold;
}

.message.info {
    color: #1a73e8;
    background-color: #e8f1fe;
    border-color: #1a73e8;
}
.message.info::before {
    content: "\f05a";
}

.message.success {
    color: #2e7d32;
    background-color: #e6f4ea;
    border-color: #2e7d32;
}
.message.success::before {
    content: "\f058";
}

.message.warn {
    color: #ed6c02;
    background-color: #fff8e1;
    border-color: #ed6c02;
}
.message.warn::before {
    content: "\f071";
}

.message.error {
    color: #d32f2f;
    background-color: #fdecea;
    border-color: #d32f2f;
}
.message.error::before {
    content: "\f06a";
}

@media (max-width: 600px) {
    .message {
        font-size: 0.92rem;
        padding: 0.65rem 1rem;
        gap: 0.6rem;
    }

    .message::before {
        font-size: 1.1rem;
    }
}