#messages {
    display: flex;
    flex-direction: column;
}

#clear_all_messages_button {
    align-self: end;
    margin-bottom: 20px;
}

.message {
    border-radius: 10px;
    padding: 10px 40px 10px 40px;
    /* needed for button position: absolute */
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    word-wrap: break-word;
}

.message h3 {
    margin: 0;
}

.message.debug {
    color: #856404;
    background-color: #fff3cd;
}

.message.success {
    color: #155724;
    background-color: #d4edda;
}

.message.info {
    color: #0c5460;
    background-color: #d1ecf1;
}

.message.warning {
    color: #856404;
    background-color: #fff3cd;
}

.message.error {
    color: #721c24;
    background-color: #f8d7da;
}

.message button {
    position: absolute;
    top: 0;
    right: 0;
    background-color: inherit;
    color: inherit;
    font-size: 2rem;
    border: none;
}