:root {
   --cor-fundo: #ffffff;
   --cor-fundo-2: #fffadf;
   --cor-texto: #111111; 
   --cor-borda: #7F7F7F;
   --cor-azul: #4096f5;
   --borda-normal: solid 2px var(--cor-borda);
   --borda-destaque: solid 2px var(--cor-azul);
   --raio-borda:15px;
   --altura-sumario: 8vh;
   --espaco-paginas: calc(4vh + 2px);
}

@media (prefers-color-scheme: dark) { 
   :root {
      --cor-fundo: #111111;
      --cor-texto: #fffadf;
      --cor-borda: #cecece;
   } 
}

@font-face {
   font-family: "Twemoji";
   src: url('./font/Twemoji.Mozilla.ttf');
   font-display: optional;
}

@font-face {
   font-family: "Cantarell";
   src: url('./font/Cantarell.otf');
   font-display: optional;
}

* {
   color: var(--cor-texto);
   font-family: Roboto,'Cantarell','Twemoji';
   font-size: 12px;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
  }
        
body {
   margin: 0;
   width:100vw;
   height: 100vh;
   background-color: var(--cor-fundo);
   display:flex;
   flex-direction: column;
}

.abas {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background-color: var(--cor-fundo);
   width: 100%;
   display:flex;
   flex-direction: row;
   overflow-y: hidden;
   overflow-x: scroll;
   gap: 20px;
   padding-inline: 20px;
}

.aba {
   margin-top:10px;
	margin-bottom:16px;
   text-decoration: none;
   background-color: var(--cor-fundo);
   border: var(--borda-normal);
   border-radius: var(--raio-borda);
   display:flex;
   align-items: center;
   padding: 10px;
   white-space: nowrap;
   font-size: 20px;
}

.aba:hover {
   cursor: pointer;
   border: var(--borda-destaque);
}

.paginas {
   margin-top: var(--espaco-paginas);
}

.pagina {
   display: flex;
   scroll-margin-top: 9vh;
   flex-direction: column;
   align-items: center;
   padding: 6px 6px 32px 6px;
   overflow-y: scroll;
   overflow-x: hidden;
   background-color: var(--cor-fundo);
   border: var(--borda-normal);
   border-radius: var(--raio-borda);
   margin-top: var(--espaco-paginas);
   margin-left: auto;
   margin-right: auto;
   margin-bottom: var(--espaco-paginas);
   width: 90%;
   max-width: 800px;
   min-height: 90vh;
   @media (max-width: 800px) {
      width: 100%;
      border: none;
      border-radius: 0px;
      border-block: var(--borda-normal);
   }
}

.d20 {
   padding: 6px;
   padding-bottom: 10vh;
   justify-content: center;
}

h1,h2 {
    font-size: 1.8rem;
    margin-block: 12px;
    text-align: center;
}

h3,h4 {
   font-weight: normal;
   font-size: 1.4rem;
   text-align: center;
   margin-block: 6px;
}

p {
    margin: 0px;
    font-weight: normal;
    font-size: 1.4rem;
    text-align: center;
}

hr {
  border: none;
}

.atributo {
    font-weight: bold;
    font-size: 16px;
}

.forca {
    color: rgba(192, 0, 0, 1);
}

.destreza {
    color: rgba(0,176, 80, 1);
}

.constituicao {
    color: rgba(112, 48, 160, 1);
}

.carisma {
    color: rgba(255, 200, 38, 1);
}

.percepcao {
    color: rgba(131, 60, 11, 1);
}

.intelecto {
    color: rgba(68, 113, 196, 1);
}

.tabela {
    width: 90%;
    border-collapse: collapse;
}

.tabela th,
.tabela td{
    border: solid 1px var(--cor-borda);
    padding: 4px;
    min-width: 20px;
    height: 28px;
    font-size: 16px;
}
.tabela th {
    font-weight: bold;
}
.atalho {
    font-weight: normal;
    font-size: 1.4rem;
    color: var(--cor-azul);
    text-decoration: none;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background-color: var(--cor-fundo);
}

::-webkit-scrollbar-thumb {
    background-color: var(--cor-borda);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--cor-texto);
}

@media print {
  body { margin: 0; }
  .abas { display: none; }
  .pagina { display: flex; page-break-after: always; }
}