* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;

    color: #16445c;

    background:
        linear-gradient(
            #55d8ff 0%,
            #bdf6ff 45%,
            #63d783 46%,
            #218b45 100%
        );

    background-attachment: fixed;
}


/* CABEÇALHO */

header {
    text-align: center;

    padding: 35px 20px;

    background:
        linear-gradient(
            #ffffff,
            #d9faff,
            #62d9ff
        );

    border-bottom: 4px solid #168ab5;

    box-shadow:
        0 5px 15px #277d9e,
        inset 0 3px 8px white;
}

header h1 {
    margin: 0;

    font-size: 48px;

    color: #087ab4;

    text-shadow:
        2px 2px white,
        0 0 10px white;
}

header p {
    color: #286e88;
}


/* MENU */

nav {
    text-align: center;

    padding: 12px;

    background:
        linear-gradient(
            #8deaff,
            #25a5d4
        );

    border-bottom: 3px solid #0876a5;
}

nav button,
.botao {

    margin: 4px;

    padding: 10px 20px;

    border-radius: 20px;

    border: 2px solid white;

    color: white;

    font-weight: bold;

    background:
        linear-gradient(
            #9df2ff,
            #148fc2
        );

    box-shadow:
        inset 0 2px 5px white,
        0 2px 5px #287b99;

    cursor: pointer;
}

nav button:hover,
.botao:hover {

    background:
        linear-gradient(
            white,
            #55d5ff
        );

    color: #087ab4;
}


/* PÁGINAS */

.pagina {

    width: 95%;

    max-width: 1000px;

    margin: 30px auto;
}

.escondido {
    display: none;
}


/* CAIXAS */

.caixa {

    margin-bottom: 25px;

    padding: 25px;

    background: rgba(255,255,255,0.9);

    border: 3px solid white;

    border-radius: 18px;

    box-shadow:
        0 5px 15px rgba(0,70,100,0.4),
        inset 0 2px 8px white;
}

.caixa h2 {

    margin-top: 0;

    color: #087ab4;

    border-bottom: 2px solid #8bdff0;

    padding-bottom: 10px;
}


/* STATUS */

.info {

    display: inline-block;

    margin-top: 15px;

    padding: 10px 18px;

    border-radius: 20px;

    color: white;

    background:
        linear-gradient(
            #75ee91,
            #17a43d
        );

    border: 2px solid white;

    box-shadow:
        inset 0 2px 5px white;
}


/* CHAT */

.mensagens {

    height: 350px;

    overflow-y: auto;

    padding: 15px;

    background:
        linear-gradient(
            #f8ffff,
            #c9f3ff
        );

    border: 2px solid #7bd8ec;

    border-radius: 12px;
}

.mensagem {

    padding: 10px 15px;

    margin-bottom: 12px;

    background: white;

    border: 2px solid #a4dfeb;

    border-radius: 14px;

    box-shadow: 0 2px 5px #acd1d8;
}

.mensagem strong {

    color: #087db5;
}

.mensagem small {

    margin-left: 8px;

    color: #777;
}

.mensagem p {

    margin-bottom: 0;

    color: #333;
}


/* CAMPO DE MENSAGEM */

.entrada {

    display: flex;

    gap: 10px;

    margin-top: 15px;
}

input {

    flex: 1;

    padding: 12px;

    border-radius: 10px;

    border: 2px solid #83d5e8;

    font-size: 16px;

    outline: none;
}

input:focus {

    border-color: #168fc0;

    box-shadow: 0 0 8px #8ee8ff;
}

.entrada button {

    padding: 10px 25px;

    border: 2px solid white;

    border-radius: 12px;

    color: white;

    font-weight: bold;

    background:
        linear-gradient(
            #70ddff,
            #1687b8
        );

    cursor: pointer;
}


/* FÓRUM */

.topico {

    margin-top: 15px;

    padding: 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            white,
            #d8f8ff
        );

    border: 2px solid #8ddbea;

    box-shadow:
        inset 0 2px 5px white,
        0 2px 5px #a9d0d8;
}

.topico h3 {

    margin-top: 0;

    color: #087db5;
}

.topico button {

    padding: 7px 14px;

    border: 0;

    border-radius: 10px;

    color: white;

    background: #1597c6;

    cursor: pointer;
}

.resposta {

    margin-top: 12px;

    margin-left: 25px;

    padding: 12px;

    background: #eefcff;

    border-left: 4px solid #27acd3;

    border-radius: 8px;
}

.vazio {

    padding: 30px;

    text-align: center;

    color: #52859a;
}


/* RODAPÉ */

footer {

    margin-top: 50px;

    padding: 25px;

    text-align: center;

    color: white;

    background:
        linear-gradient(
            #40bce2,
            #0876a9
        );

    border-top: 4px solid white;

    text-shadow: 1px 1px #17627d;
}