h1.titulo {
    font-weight: bold;
    font-size: 75px;
    text-align: center;
}

h2.subtitulo {
    font-weight: bold;

}

.azul-marinho {
    color: #093d63;
}

.verde-agua {
    color: #a7cd39;
}

.branco-claro {
    color: #e9ecef
}

div.bubble {
    position: relative;
    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    display:flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 5px;

    background-color: #96e8ff;
    padding: 1em 1em;

    border-radius: 1rem;
    box-shadow:	0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
    margin-left: 2em;
    margin-right: 2em;
    margin-top: -1em;
}

p.bubble {
    order: 1;
    flex-grow: 2;
    font-size: 1em;
    margin-bottom: 0px;
}

input.bubble {
    order: 2;
    border-radius: 0.5rem;
    flex-grow: 1;
    font-size: 1em;
    min-width: 0%;
}

button.bubble {
    order: 3;
    flex-basis: content;

    font-size: 1em;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.bubble::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 1.5em;
    border: .75rem solid transparent;
    border-top: none;

    border-bottom-color: #96e8ff;
	filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));

}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
}