/*  CORPO */
body{
    background-image: linear-gradient(to bottom,  #ccc, rgb(165, 190, 255));
    min-height: 100vh;
}

/* CABECALHO */

.cabecalho{
    width: 100%;
    height: 6em;
    background-image: linear-gradient(to bottom,  rgb(0, 29, 109), rgb(0, 50, 180));
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #ccc;
}

.cabecalho-logo img{
    height: 100%;
}

.cabecalho-frase{
    display: flex;
    align-items: center;
}

/* TITULO */
.titulo{
    width: 100%;
    padding: 0.5em;
    text-align: center;
}

.titulo h1{
    color: rgb(0, 50, 180);
    font-weight: bold;
}

.painel{
    background-color: #eee;
    width: 60%;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 10px;
}

/*  FORMULARIO */

.container-form{
    width: 100%;
    margin-top: 3em;
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
}

.container-form form{
    background-color: #eee;
    width: 70%;
    padding: 10px;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 10px;
}

.voltar,
.nome,
.tp_rel,
.relato{
    margin-top: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.enviar{
    margin-top: 1em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly; 
}

.btn-voltar,
.label-nome,
.input-nome,
.label-tp_rel,
.input-tp_rel,
.label-relato,
.text-relato{
    width: 80%;
}

.input-nome input,
.input-tp_rel select,
.tp_rel input,
.relato textarea{
    width: 100%;
}

.label-nome label,
.label-tp_rel label,
.label-relato label{
    font-weight: bold;
}

.btn-form{
    width: 100px;
    height: 50px;
    text-decoration: none;
    color: #eee;
    background: rgb(0, 50, 180);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    border-radius: 10px;
    font-size: 1.3em;
    font-weight: bold;
}

.btn-form:hover{
    background-color: rgb(0, 29, 109);
    color: #fff;
    font-size: 1.6em;
    transition: .3s;
}

/* ERRO / CONFIRMACAO */
.erro,
.confirmacao{
    display: flex;
    justify-content: center;
}
.erro-frase,
.confirmacao-frase,
.btn-inicio{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}