body {
    color: #12130F;
    background: #b6bbb2;
    font-family: monospace;
    margin: 0; padding: 0;
}

p {
    font-size: 15px;
}

.content {
    max-width: 50vw;
    margin: 0.5rem auto;

    border-style: solid;
    border-radius: 0.25rem;
    border-width: 2px;
    border-color: #12130F;

    overflow: hidden;
}

.upper , .downer {
    margin: 0rem;
    padding-block: 0.25rem; /* top & bottom */
    padding-inline: 1.25rem;   /* left & right */

  }

.upper {
    background-color: rgb(43, 158, 179);
    text-align: center;
}

.downer {
    background-color: rgb(219, 213, 181);
    padding-block: 1rem; /* top & bottom */
    padding-inline: 4.25rem;   /* left & right */
}

.warning .header {
    border-style: dotted;
    border-radius: 0.25rem;
    border-width: 2px;
    border-color: #12130F;
    background-color: #D7263D;

    text-align: center;
    color: rgb(219, 213, 181);

    border-radius: 1rem;
    padding-block: 1rem;
    padding-inline: 3rem;

    margin-inline: 5rem;
    margin-bottom: 2.5rem;
}

.header {
    font-size: 18px;
}

.small {
    font-size: 13px;
}

.line-divider {
    border: none;
    height: 2px;
    background-color: #12130F;
    margin: 0; /* this removes the default spacing */
}

@media (max-width: 75rem) {
    .content {
        max-width: 75vw;
    }    

    .warning .header {
        margin-inline: 2rem;
    }
}

@media (max-width: 45rem) {
    .content {
        max-width: 95vw;
    }    

    .downer {
        padding-inline: 2.25rem;   /* left & right */
    }

    .warning .header {
        font-size: 15px;
    }
}