@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,100&display=swap');


/* BOTÕES */
/*Configure the tab buttons*/
.sheet-character,
.sheet-config,
.sheet-journal {
    display: none;
}

/* show the selected tab */
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
.sheet-tabstoggle[value="configuration"] ~ div.sheet-config,
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal {
    display: block;
}

button[type="action"].tab-btn {
    background: #231f20;
    color: #fff;
    width: 200px;
    font-size: 1.250em;
    font-weight: bold;
}

button[type="action"].txt-btn::before {
    content: ' ';
}

button[type="action"].txt-btn {
    height: 22px;
    border-style: none;
    background-color: transparent;
    margin-left: 5px;
    font-weight: bold;
    padding: 2px 5px 4px 5px;
    
}

button[type="action"].txt-btn h3 {
    transition: 0.8s ease;
    text-align: left;
}

button[type="action"].txt-btn h3:hover {
    color: #6bd36b;
}




/* BOTÕES FIM */

/* ESTILOS GERAIS */


/* FIM ESTILOS GERAIS */

/* ESTRUTURA GRID */
.gridstructure {
    display: grid;
    width: 810px;
    grid-template-columns: 250px 250px 300px;
    grid-row-gap: 5px;
    grid-column-gap: 5px;
    grid-template-areas: 
    "header header header"
    "aspecto aspecto facanha"
    "atributo atributo ludico"
    "habilidade habilidade pool "
    "habilidade  habilidade recurso"
    "footer  footer footer";
    color: #231f20;
    font-family: 'Roboto', sans-serif;
    background: #fffafb;
}

.gridstructure textarea {
    resize: none;
}

.gridstructure span {
    font-size: 0.750em;
}

/* ESTILO GERAL */


/* FIM ESTRUTURA GRID */

/* HEADER */
.gridheader {
    grid-area: header;
    padding: 0px 10px;
    background: #231f20;
    color: #fff;
}

.header {
    display: grid;
    grid-template-columns: 400px 400px;
    grid-template-areas: 
    "nome logo"
    "descricao marco";
    margin: 0 auto;
    padding: 10px 0px;
}

.nome {
    grid-area: nome;
    display: flex;
}

.nome label {
    color: #fff;
}

.logo {
    grid-area: logo;
    margin-left: 70px;
}

.logo img {
    width: 300px;
}

.descricao {
    grid-area: descricao;
}

.descricao label {
    color: #fff;
}

.descricao textarea {
    height: 50px;
    width: 420px;
    font-size: 1.250em;
}

.marconarrativo {
    grid-area: marco;
    margin-left: 55px;
}

.marconarrativo label {
    color: #fff;
}

.marcodot {
    display: flex;
    justify-content: left;
}

input[type="checkbox"].marcodot {
    color: #7f66aa;
}

.marcodot label {
    text-align: center;
}

.marcodot label + label {
    margin-left: 5px;
}

/* FIM HEADER */

/* ASPECTOS */
.gridaspecto {
    background: #231f20;
    width: 100%;
    grid-area: aspecto;
    padding: 20px 0px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.gridaspecto h2 {
    text-align: center;
    color: #fff;
    width: 400px;
}

.gridaspecto span {
    color: #fff;
    text-align: center;
}

.aspectos {
    padding: 10px;
    margin: 0 auto;
}

.aspectos label {
    color: #fff;
    margin-bottom: 10px;
}

.aspectos label + label {
    margin-top: 10px;
}

.aspectos input {
    width: 400px;
    font-size: 1.250em;
}

/* FIM ASPECTOS */
/* ATRIUBTOS */
.gridatributo {
    width: 100%;
    grid-area: atributo;
    text-align: center;
    margin-bottom: 5px;
}

.gridatributo p {
    color: #231f20;
    font-size: 0.750em;
}

.atributos {
    display: flex;
    justify-content: space-around;

}

.atributos label {
    text-align:center;
    padding: 5px;
}

.atributos h3  {
    text-align: left;
}

.input-atributo {
    display: flex;
    justify-content: space-around;
    width: 200px;
}

.diceatributo input[type="radio"] {
        position: fixed;
        width: 0;
        opacity: 0;
  }

  .diceatributo label {
    color: #231f20;
    padding: 7px 7px;
    text-align: center;
    vertical-align: center;
    font-size: 2.50em;
    transition: 0.8s ease;
    cursor: pointer;
    
}


.diceatributo input + label {
    margin-left: 3px;
}

.diceatributo label:hover {
    color:#6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

.diceatributo input[type="radio"]:checked + label {
    background: #fff;
    color: #6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}
/* FIM ATRIBUTOS */

/* INICIO PONTOS */
.gridludico {
    grid-area: ludico;
}

.gridludico h3 {
    text-align: center;
}

.gridludico p {
    color: #231f20;
    font-size: 0.750em;
    text-align: center;
    margin-bottom: -2px;
}

/* PONTOS LÚDICOS */
.pontosludicos input::-webkit-outer-spin-button,
.pontosludicos input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.pontosludicos input {
    text-align: center;
    color: #231f20;
    font-weight: bold;
    font-size: 1.75em;
    vertical-align: center;
    width: 10px;
    height: 10px;
    border: solid 3px #231f20;
}

.pontosludicos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.pontosludicos div {
    padding: 0px 50px;
}

.pontosludicos label {
    text-align: center;
    margin-bottom: -1px;
}

/* FIM PONTOS LÚDICOS */

/* VIDA E ENERGIA */
.energiasaude h3 {
    margin-top: 5px;
}

.energiasaude p {
    margin-top: -8px;
}

.energia-vida input::-webkit-outer-spin-button,
.energia-vida input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.energia-vida input {
    text-align: center;
    color: #231f20;
    font-weight: bold;
    font-size: 1.250em;
    vertical-align: center;
    width: 10px;
    height: 10px;
    border: solid 3px #231f20;
}

.energia-vida {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    vertical-align: center;
}

.energia-vida h3 {
    margin-bottom: -5px;
    text-align: center;
}

.trauma h3 {
    margin-bottom: 2px;
}

.input-energiavida {
    display: flex;
    justify-content: space-between;
    vertical-align: center;
    margin-bottom: 20px;
}

.diceatributo input[type="radio"] {
    position: fixed;
    width: 0;
    opacity: 0;
}

.dicevidaenergia label {
color: #231f20;
padding: 2px 2px;
text-align: center;
vertical-align: center;
font-size: 1.250em;
transition: 0.8s ease;
cursor: pointer;

}


.dicevidaenergia input + label {
margin-left: 2px;
}

.dicevidaenergia label:hover {
color:#6bd36b;
box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

.dicevidaenergia input[type="radio"]:checked + label {
background: #fff;
color: #6bd36b;
box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

/* FIM VIDA E ENERGIA  */



/* FIM PONTOS */

/* INICIO HABILIDADES */
.gridhabilidades {
    width: 100%;
    grid-area: habilidade;
    text-align: center;
    background: #231f20;
    color: #fff;
}

.gridhabilidades h2 {
    color: #fff;
    margin-top: 10px;
}

.gridhabilidades p {
    color: #fff;
    font-size: 0.750em;
}

.habilidades {
    display: flex;
    justify-content: space-around;

}

.habilidades label {
    text-align:center;
    padding: 5px;
}

.habilidades h3 {
    text-align: left;
    color: #fff;
    margin: 5px;
    margin-left: -20px;
}

.input-habilidades {
    display: flex;
    justify-content: space-around;
    width: 180px;
}

.input-text {
    background: #231f20;
    color: #fff;
    border: none;
    width: 200px;
    font-weight: bold;
    text-transform: capitalize;
    cursor: pointer;
}

.dicehabilidades input[type="radio"] {
        position: fixed;
        width: 0;
        opacity: 0;
  }

  .dicehabilidades label {
    color: #fff;
    padding: 6px 6px;
    text-align: center;
    vertical-align: center;
    font-size: 2.250em;
    transition: 0.8s ease;
    
}


.dicehabilidades input + label {
    margin-left: 3px;
}

.dicehabilidades label:hover {
    color:#6bd36b;
    box-shadow:  inset 0 0 4px rgb(216, 216, 216);
}

.dicehabilidades input[type="radio"]:checked + label {
    background: #5e5457;
    color: #6bd36b;
    box-shadow:  inset 0 0 4px rgb(216, 216, 216);
}

/* FIM HABILIDADES */

/* INICIO FACANHA */

.gridfacanha {
    width: 100%;
    grid-area: facanha;
    text-align: center;
    background: #231f20;
    color: #fff;
}

.gridfacanha h2 {
    color: #fff;
}

.gridfacanha p {
    color: #fff;
    font-size: 0.750em;
    margin-bottom: 10px;
}

.facanha {
    display: flex;
    justify-content: space-around;
}


.facanha input {
    width: 150px;
    height: 20px;
    font-size: 1.250em;
}

.facanha h3 {
    text-align: left;
    color: #fff;
}

.input-facanha {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.dicefacanha input[type="radio"] {
        position: fixed;
        width: 0;
        opacity: 0;
  }

  .dicefacanha label {
    color: #fff;
    padding: 3px 3px;
    text-align: center;
    margin: auto;
    vertical-align: center;
    font-size: 1.50em;
    transition: 0.8s ease;
    cursor: pointer;    
}


.dicefacanha input + label {
    margin-left: 2px;
}

.dicefacanha label:hover {
    color:#6bd36b;
    box-shadow:  inset 0 0 4px rgb(216, 216, 216);
}

.dicefacanha input[type="radio"]:checked + label {
    background: #5e5457;
    color: #6bd36b;
    box-shadow:  inset 0 0 4px rgb(216, 216, 216);
}

/* FIM FACANHA */

/* INICIO RECURSOS */
.gridrecursos {
    width: 100%;
    grid-area: recurso;
    text-align: center;
    background: #231f20;
    color: #fff;
}

.gridrecursos h2 {
    color: #fff;
}

.gridrecursos p {
    color: #fff;
    font-size: 0.750em;
    margin-bottom: 10px;
}

.recursos {
    display: flex;
    justify-content: space-around;
}



.recursos input {
    width: 150px;
    height: 20px;
    font-size: 1.250em;
}

.recursos h3 {
    text-align: left;
    color: #fff;
}

.input-recursos {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.dicerecurso input[type="radio"] {
        position: fixed;
        width: 0;
        opacity: 0;
  }


  .dicerecurso label {
    color: #fff;
    padding: 3px 3px;
    text-align: center;
    margin: auto;
    vertical-align: center;
    font-size: 1.50em;
    transition: 0.8s ease;
    cursor: pointer;     
}


.dicerecurso input + label {
    margin-left: 2px;
}

.dicerecurso label:hover {
    color:#6bd36b;
    box-shadow:  inset 0 0 4px rgb(216, 216, 216);
}

.dicerecurso input[type="radio"]:checked + label {
    background: #5e5457;
    color: #6bd36b;
    box-shadow:  inset 0 0 4px rgb(216, 216, 216);
}

/* FIM RECURSOS */

/* DICE POOL */

.gridpool {
    width: 100%;
    grid-area: pool;
}

.gridpool h2{
    text-align: center;
}

.bg-dice {
    width: 300px;
}

.input-shape {
    display: flex;
    justify-content: space-between;
}

.dicepool input[type="radio"] {
        position: fixed;
        width: 0;
        opacity: 0;
  }

  .dicepool label {
    padding: 6px 4px;
    text-align: center;
    vertical-align: center;
    font-size: 2.250em;
    transition: 0.8s ease;
    cursor: pointer;
    
}

.dicepool label:hover {
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
    
}

.dicepool input + label {
    margin-left: 5px;
}

.charsheet button[type="roll"].blank-button::before {
    content: ' ';
}

.charsheet button[type="roll"].blank-button {
    color: #fff;
    background: #6bd36b;
    padding: 5px 15px;
    transition: 0.8s ease;
}

.charsheet button[type="roll"].blank-button:hover {
    background: #7f66aa;
    box-shadow:  inset 0 0 15px rgba(48, 48, 48, 0.8);
}

/* Cor seletora */

input[type="radio"]:checked + label {
    color: #6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

/* Caractere do Dado */

.zerodice {
    font-family: pictos;
    color: #231f20;
    transition: 0.8s ease;
}

.zerodice:hover {
    color: #6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

.diced4 {
    font-family: dicefontd4;
    color: #231f20;
    transition: 0.8s ease;
    font-weight: bold;
}

.diced4:hover {
    color: #6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

.diced6 {
    font-family: dicefontd6;
    color: #231f20;
    transition: 0.8s ease;
    
}

.diced6:hover {
    color: #6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

.diced8 {
    font-family: dicefontd8;
    color: #231f20;
    transition: 0.8s ease;
}

.diced8:hover {
    color: #6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

.diced10 {
    font-family: dicefontd10;
    color: #231f20;
    transition: 0.8s ease;
}

.diced10:hover {
    color: #6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

.diced12 {
    font-family: dicefontd12;
    color: #231f20;
    transition: 0.8s ease;
}

.diced12:hover {
    color: #6bd36b;
    box-shadow:  inset 0 0 7px rgb(95, 95, 95);
}

/* Rolar Botão */

.blank-button::before {
    content: "";
}


/* FIM DICE POOL*/