body {
    background-color: rgb(36, 36, 43);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    text-align: center;
}

div.info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 7px;
}

div.info2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 7px;
}

div.bioma {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 7px;
}

p {
    text-align: center;
    background-color: rgb(253, 178, 15);
    color: black;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 900;
}

input {
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 15px;
    margin-left: 10px;
    height: 25px;
}

select {
    border-radius: 5px;
    border: none;
    font-size: 15px;
    outline: none;
    height: 30px;
    margin-left: 10px;
}

textarea {
    outline: none;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    resize: none;
    margin-left: 10px;
}

/* #region INPUTS PERSONAGEM //////////////////////////////////////////////////////////////////////////////////////////// */
input.nome, .raca {
    margin-right: 20px;
}

input.nome {
    width: 523px;
}

input.idade {
    width: 150px;
    text-align: center;
}

input.raca {
    width: 300px;
}

input.classe {
    width: 300px;
}

input.trabalho {
    width: 250px;
}

select.social {
    margin-right: 20px;
    width: 200px;
}

textarea.historia {
    height: 100px;
    width: 755px;
}

textarea.armas {
    height: 70px;
    width: 693px;
}

textarea.aparencia {
    height: 90px;
    width: 699px;
}

textarea.habilidades {
    height: 90px;
    width: 723px;
}
/* #endregion */

/* #region INPUTS CENÁRIOS ////////////////////////////////////////////////////////////////////////////////////////////// */
input.local {
    margin-right: 20px;
    width: 462px;
}

select.horario {
    width: 200px;
}

select.regiao {
    margin-right: 20px;
    width: 200px;
}

select.civilizacao {
    width: 200px;
}

input.clima {
    width: 779px;
}

input.vegetacao {
    width: 729px;
}

input.fauna {
    width: 775px;
}

input.terreno {
    width: 758px;
}

textarea.composicao {
    height: 100px;
    width: 712px;
}

textarea.estruturas {
    height: 100px;
    width: 729px;
}
/* #endregion */

/* #region INPUTS CRIATURAS ///////////////////////////////////////////////////////////////////////////////////////////// */
input.nomecriatura {
    margin-right: 20px;
    width: 477px;
}

select.movimentacao, .inteligencia, .perigo, .domesticavel {
    margin-right: 20px;
}

select.idadecriatura {
    width: 200px;
}

select.movimentacao {
    width: 123px;
}

select.inteligencia {
    width: 133px;
}

select.origem {
    width: 160px;
}

select.perigo {
    width: 200px;
}

select.alimentacao {
    width: 160px;
}

select.domesticavel {
    width: 163px;
}

select.grupo {
    width: 163px;
}

input.habitat {
    width: 762px;
}

textarea.habitos {
    height: 100px;
    width: 674px;
}

textarea.aparenciacriatura {
    height: 100px;
    width: 733px;
}

textarea.habilidadescriatura {
    height: 100px;
    width: 725px;
}

input.uso {
    width: 797px;
}
/* #endregion */

/* #region INPUTS PROPS ///////////////////////////////////////////////////////////////////////////////////////////////// */
input.nomeprop {
    margin-right: 20px;
    width: 454px;
}

textarea.funcao {
    height: 50px;
    width: 763px;
}

textarea.descricao {
    height: 90px;
    width: 736px;
}

textarea.habilidadeprop {
    height: 90px;
    width: 719px;
}
/* #endregion */

/* #region Botões salvar //////////////////////////////////////////////////////////////////////////////////////////////// */
div.save {
    display: flex;
    justify-content: center;
}

button.saveprint {
    margin: 10px;
    color: rgb(0, 0, 0);
    border: 2px solid;
    outline: none;
    border-color: #000000;
    background-color: rgb(30, 190, 30);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 900;
    transition: all ease 0.1s;
    box-shadow: 0px 5px 0px 0px #046d33;
}

button.saveprint:hover {
    transform: translateY(-5px);
    background-color: rgb(13, 224, 101);
    box-shadow: 0px 10px 0px 0px #036454;
}

button.saveprint:active {
    transform: translateY(5px);
    box-shadow: 0px 0px 0px 0px #ffffff;
}

.back {
    display: flex;
    justify-content: center;
}
/* #endregion */

/* #region Botão voltar ///////////////////////////////////////////////////////////////////////////////////////////////// */
button.buttonback {
    margin: 10px;
    color: rgb(0, 0, 0);
    border: 2px solid;
    outline: none;
    border-color: #000000;
    background-color: rgb(255, 121, 44);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 900;
    transition: all ease 0.1s;
    box-shadow: 0px 5px 0px 0px #8f4603;
}

button.buttonback:hover {
    transform: translateY(-5px);
    background-color: rgb(255, 69, 44);
    box-shadow: 0px 10px 0px 0px #640e03;
}

button.buttonback:active {
    transform: translateY(5px);
    box-shadow: 0px 0px 0px 0px #b65858;
}
/* #endregion */