: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;
}

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

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

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

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

.abas {
    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;
    border: var(--borda-normal);
    border-radius: var(--raio-borda);
    display:flex;
    align-items: center;
    padding: 10px;
    white-space: nowrap;
    font-size: 20px;
}

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

.pagina {
    border: none;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 800px;
    height: 90%;
    overflow: auto;
    @media (max-width: 800px) {
        width: 100%;
    }
}

.folha {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 6px;
   overflow-y: scroll;
   overflow-x: hidden;
   box-sizing: border-box;
}

::-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);
}