:root{
    --left-space: 7px;
    --right-space: 7px;
    --gap: 3rem;
}
* {
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    font-family: "Snell Roundhand", cursive;
    font-size: 2rem;
    --text-black: black;
    --text-white: white;
    --background-color-section: rgba(255, 255, 255, 0.8);
    --background-color-menu: rgba(255, 255, 255, 0.8);
    --background-color-menumenor: rgba(255, 255, 255, 0.9);
    --text-povodomar: rgba(0, 0, 128);
    --background-color-ninja: rgba(255, 255, 255, 0.8);
    --background-color-bencao: rgba(255, 255, 255, 0.9);
}
.dark{
    --text-black: rgb(212, 208, 208);
    --text-white: rgb(0, 0, 0);
    --background-color-section: rgba(2, 23, 37, 0.9);
    --background-color-menu: rgba(2, 23, 37, 0.8);
    --background-color-menumenor: rgba(2, 23, 37, 0.98);
    --text-povodomar: rgb(35, 193, 218);
    --background-color-ninja: rgba(31, 34, 36, 0.98);
    --background-color-bencao: rgba(2, 23, 37, 0.97);

}
h1, h2, h3, h4, h5, h6{ 
    font-family: "Snell Roundhand", cursive;
}
img{
    margin-bottom: -10px;
}
h1{
    font-size: 6rem;
    text-transform: uppercase;
}
h2{
    font-size: 4rem;
}
h3{
    font-size: 3.5rem;
    text-align: center;
    padding-bottom: 1rem;
}
h4{
    font-size: 2.5rem;
}
a{
    text-decoration: none;
}
li{
    list-style-type: none;
}
table, th, td{
    border: 1px solid !important;
    border-color: black !important;
}
div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom: none !important;
}
.footer{
    font-size: 10px;
    color: white;
    text-align: right;
    padding-right: 3px;
}
.padding-geral{
    padding-top: 14px;
}
.section{
    margin-right: 6rem;
    margin-left: 6rem;
    background-color: var(--background-color-section)
}
.bodymain{
    color: var(--text-black);
    background-image: url(/assetes/img/Old\ Tavern\,\ Clayton\ Peterson.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
}
#toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px; /* Padding para garantir que o botão tenha um pouco de espaço */
    padding-top: 15px;
    width: 36px; /* Defina um tamanho fixo para o botão */
    height: 36px; /* Defina o mesmo tamanho para altura */
    display: block; /* Flexbox para centralizar o ícone */
    align-items: center; /* Centraliza o ícone verticalmente */
    justify-content: center; /* Centraliza o ícone horizontalmente */
}
#toggle svg {
    width: 5vm; /* define a largura */
    height: 5vm; /* Define a altura */
    fill: currentColor; /* Permite mudar a cor usando o currentColor */
    color: var(--text-black); /* Cor do ícone no modo claro */
}

/* Outras configurações */
.racas-spacing{
    height: 7rem;
}
.class-spacing{
    height: 8rem;
}
.imagem-intro{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    min-height: 30rem;
}
.titlelogo{
    height: 100%;
    width: 100%;
    max-height: 50rem;
    min-height: 30rem;
    display: block;   
}
.logo{
    max-width: 4.5rem;
    padding-top: 13px;
    padding-bottom: 13px;
}
.lista-index{
    padding-left: 3rem;
}
.lista-regras{
    padding: 3rem;

}
.padding-lista-regras{
    padding: 0.5rem;
    padding-left: 2rem;
}
.menu{
    z-index: 1;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    background-color: var(--background-color-menu);
}
.menu-spacing{
    height: 7rem;
}
.menu-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 7rem;
    padding-left: 7rem;
}
.menu ul{
    list-style: none;
    display: flex;
}
.links-menu{
    display: block;
    padding: 1rem;
    position: relative;
    font-size: 1.5rem;
    font-family: "Snell Roundhand", cursive;
    color: var(--text-black);
}
.close-menu{
    display: none;
}
/*Dropmenu*/
/* Navbar container */
.navbar {
    overflow: hidden;
    background-color: #333;
}
/* Links inside the navbar */
.navbar a {
    float: left;
    font-size: 16px;
    color: var(--text-white);
    text-align: center;
}
/* The dropdown container */
.dropdown {
    float: righ;
    overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
    display: block;
    padding: 1rem;
    text-decoration: none;
    position: relative;
    font-size: 1.5rem;
    font-family: "Snell Roundhand", cursive;
    color: var(--text-black);
}
/* Add a light black background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
}
a:hover{
    background-color: rgba(0,0,0,0.2);
}
/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    overflow-y: auto;
    height: auto;
    max-height: 45rem;
    max-width: 15rem;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 1.5rem;
    font-family: "Snell Roundhand", cursive;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
/*DROP MENU - fim*/

.main-content{
    max-width: 130rem;
    margin: 0 auto;
    padding: var(--gap);
    padding-top: 5rem;
}
.second-content{
    max-width: 130rem;
    margin: 0 auto;
    padding: var(--gap);
    padding-top: 0;
    text-align:justify;
    overflow: hidden;
}

/* Anões */
.body-anoes{
    background-image: url("/assetes/img/dwavens-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
}
.section-anoes{
    background-color: rgba(199, 204, 206, 0.6);
}
.imagem-racas-anoes{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 50rem;
    float: right;
    padding-bottom: 8px;
    padding-left: var(--left-space);
    border-radius: 10px;
}
/* Anões cinzentos */
.body-anoes-cinzentos{
    background-image: url("/assetes/img/anoes-cinzentos-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
}
.section-anoes-cinzentos{
    background-color: rgba(82, 84, 104, 0.9);
}
.imagem-racas-anoes-cinzentos{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: right;
    padding-bottom: 8px;
    padding-left: var(--left-space);
}
/* Dragonkins */
.body-dragonkins{
    background-image: url("/assetes/img/dragonkins-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    background-attachment: fixed;
}
.imagem-racas-dragonkins{
    max-height: 80rem;
    padding-bottom: 8px;
    padding-right: var(--right-space);
    float: left;
}
.section-dragonkins{
    background-color: var(--background-color-section);
    color: var(--text-black);
}
/* Alto Elfos */
.sectionelfos{
    min-height: 100vh;
    margin-right: 6rem;
    margin-left: 6rem;
}
.bodyelfos-alto{
    background-image: url("/assetes/img/high-elves-background.jpg");
    background-repeat: no-repeat; 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-racas-alto-elfo{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 50rem;
    float: left;
    padding-bottom: 8px;
    padding-right: var(--right-space);
    border-radius: 10px;
}
/* Elfos da floresta */
.bodyelfos-floresta{
    background-image: url("/assetes/img/wood-elves-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;  
}
.imagem-racas-elfos-floresta{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 50rem;
    float: right;
    padding-bottom: 0.8rem;
    padding-left: var(--left-space);
}
/* Elfos Negros */
.bodyelfos-negros{
    background-image: url("/assetes/img/dark-elfs-background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-racas-elfos-negros{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 50rem;
    float: left;
    padding-bottom: 8px;
    padding-right: var(--right-space);
    border-radius: 10px;
}
/* Elfos das neves */
.bodyelfos-neves{
    background-image: url("/assetes/img/snowelfs.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-racas-elfos-neves{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 50rem;
    float: right;
    padding-bottom: 8px;
    padding-left: var(--left-space);
    border-radius: 10px;
}
/* Homems Passaros */
.bodyhomenspassaros{
    background-image: url("/assetes/img/montanha.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-racas-homenspassaros{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 50rem;
    float: left;
    padding-bottom: 4rem;
    padding-right: var(--right-space);
}
.section-homempassaros{
    background-color: var(--background-color-section);
    color: var(--text-black);
}
/* Humanos */
.bodyhumanos{
    background-image: url("/assetes/img/humanos-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-racas-humano{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 50rem;
    float: right;
    padding-bottom: 8px;
    padding-left: var(--left-space);
}
/* Orcs */
.bodyorcs{
    background-image: url("/assetes/img/orcs-background-imagem.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-racas-orcs{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 50rem;
    float: right;
    padding-bottom: 8px;
    padding-right: var(--right-space);
}
.section-racas-orcs{
    color: rgb(34, 139, 34)
}
/* Povo do Mar */
.bodypovodomar{
    background-image: url("/assetes/img/povodomar-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-racas-povodomar{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 40rem;
    float: left;
    padding-bottom: 8px;
    padding-right: var(--right-space);
}
.section-racas-povodomar{
    color: var(--text-povodomar);
}
/* Atirador */
.bodyatirador{
    background-image: url("/assetes/img/atirador-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classe-atirador{
    height: 100%;
    width: 100%;
    max-height: 70rem;
    max-width: 40rem;
    float: left;
    padding-bottom: 8px;
    padding-right: var(--right-space);
    border-radius: 10px;
}
.section-class-atirador{
    background-color: rgba(85, 107, 47, 0.94);
}
/* Barbaro */
.bodybarbaro{
    background-image: url("/assetes/img/barbaro-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
}
.imagem-classe-barbaro{
    height: 100%;
    width: 100%;
    max-height: 80rem;
    max-width: 50rem;
    float: right;
    padding-bottom: 8px;
    padding-left: var(--left-space);
}
.section-barbaro{
    background-color: rgb(210, 180, 140, 0.88);
    color: rgba(128, 0, 0);
    text-shadow: 0px 5px 20px #300303;
}
/* DK */
.bodycavaleirodassombras{
    background-image: url("/assetes/img/cavaleiro-das-sombras-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-cavaleirodassombras{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: left;
    padding-bottom: 1rem;
    padding-right: var(--right-space);
}
.section-cavaleirodassombras{
    background-color: rgba(0, 0, 0, 0.5);
    color: rgb(179, 179, 179);
}
/* Clerigo */
.bodyclerigo{
    background-image: url("/assetes/img/clerigo-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-clerigo{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: right;
    padding-bottom: 1rem;
    padding-left: var(--left-space);
}
.section-clerigo{
    background-color: rgba(252, 252, 204, 0.8);
}
/* Druida */
.bodydruida{
    background-image: url("/assetes/img/druida-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-druida{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: left;
    padding-bottom: 1rem;
    padding-right: var(--right-space);
}
.section-druida{
    background-color: rgba(199, 245, 188, 0.87);
}
/* Duelista */
.bodyduelista{
    background-image: url("/assetes/img/duelista-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-duelista{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: left;
    padding-bottom: 1rem;
    padding-right: var(--right-space);
}
.section-duelista{
    background-color: rgba(192, 192, 192, 0.95);
}
/* Esperitualista */
.bodyespiritualista{
    background-image: url("/assetes/img/samurai-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-espiritualista{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 60rem;
    float: right;
    padding-bottom: 1rem;
    padding-left: var(--left-space);
}
.section-espiritualista{
    background-color: rgba(173, 216, 230, 0.95);
}
/* Guardião */
.bodyguardiao{
    background-image: url("/assetes/img/guardião-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-guardiao{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: right;
    padding-bottom: 1rem;
    padding-left: var(--left-space);
}
.section-guardião{
    background-color: rgba(192, 192, 192, 0.9);
}
/* Guerreiro */
.bodyguerreiro{
    background-image: url("/assetes/img/guerreiro-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-guerreiro{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: right;
    padding-bottom: 1rem;
    padding-left: var(--left-space);
    border-radius: 10px;
}
.section-guerreiro{
    background-color: rgba(218, 165, 32, 0.9);
}
/* Ladino */
.bodyladino{
    background-image: url("/assetes/img/ladino-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-ladino{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: right;
    padding-bottom: 1rem;
    padding-left: var(--left-space);
}
.section-ladino{
    background-color: rgba(105, 105, 105, 0.95);
}
/* Mago */
.bodymago{
    background-image: url("/assetes/img/mago-background-imagem.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-mago{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: right;
    padding-left: var(--left-space);
}
.section-mago{
    background: linear-gradient(to right, rgba(255, 69, 0, 0.9), rgba(255, 165, 0, 0.9), rgba(205, 133, 63, 0.9), rgba(30, 144, 255, 0.9), rgba(173, 216, 230, 0.9), rgba(255, 255, 224, 0.9), rgba(192, 192, 192, 0.9), rgba(0, 0, 0, 0.5), rgba(255, 255, 102, 0.9), rgba(34, 139, 34, 0.9));
    color: black;
}
/* Mestre das runas */
.bodymestredasrunas{
    background-image: url("/assetes/img/mestre-das-runas-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-mestredasrunas{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: left;
    padding-bottom: 1rem;
    padding-right: var(--right-space);
}
.section-classe-mestredasrunas{
    background-color: rgba(200, 220, 255, 0.9);
}
/* Monge */
.bodymonge{
    background-image: url("/assetes/img/monge-background-imagem.jfif");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.imagem-classes-monge{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: right;
    padding-bottom: 1rem;
    padding-left: var(--left-space);
}
.section-classe-monge{
    background-color: rgba(112, 228, 162, 0.9);
}
/* Necromante */
.bodynecromante{
    background-image: url("/assetes/img/necromante-background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.imagem-classes-necromante{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: left;
    padding-bottom: 1rem;
    padding-right: var(--right-space);
}
.section-necromante{
    background-color: rgba(255, 255, 255, 0.2);
    color: rgb(225, 245, 252); 
}
/* Ninja */
.bodyninja{
    background-image: url("/assetes/img/ninja-background-imagem.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.imagem-classes-ninja{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: right;
    padding-bottom: 1rem;
    padding-left: var(--right-space);
}
.section-ninja{
    background-color: var(--background-color-ninja);
    color: var(--text-black);
}
/* Paladino */
.bodypaladino{
    background-color: var(--text-white);
    background-image: url("/assetes/img/paladino-background1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-paladino{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 50rem;
    float: left;
    padding-bottom: 1rem;
    padding-right: var(--right-space);
}
.section-paladino{
    background-color: rgba(252, 252, 204, 0.89);
}
/* Samurai */
.bodysamurai{
    background-image: url("/assetes/img/samurai-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-samurai{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 40rem;
    float: left;
    padding-bottom: 1rem;
    padding-right: var(--right-space);
}
.section-samurai{
    background-color: var(--background-color-menumenor);
    color: var(--text-black);
}
/* Sinergista */
.bodysinergista{
    background-image: url("/assetes/img/sinergista-background-image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.imagem-classes-sinergista{
    height: 100%;
    max-height: 80rem;
    width: 100%;
    max-width: 40rem;
    float: left;
    padding-bottom: 1rem;
    padding-right: var(--right-space);
}
.section-classe-sinergista{
    background-color: rgba(220, 220, 255, 0.9);
}
/* Escola de magias */
.body-magia-agua{
    background-image: url("/assetes/img/magia-agua-background-image\ \(1\).jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.section-magia-agua{
    background-color: rgba(187, 222, 255, 0.8);
}
.body-magia-ar{
    background-image: url("/assetes/img/magia-ar-background-imagem.jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.section-magia-ar{
    background-color: rgba(255, 255, 255, 0.8);
}
.body-magia-criacao{
    background-image: url("/assetes/img/magia-da-criação-background-imagem.jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.section-magia-criacao{
    background-color: RGBA(192, 192, 192, 0.8);
}
.body-magia-encantamento{
    background-image: url("/assetes/img/magia-encantamento-background-imagem.jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.section-magia-encantamentos{
    background-color: RGBA(70, 130, 180, 0.8);
}
.body-magia-fogo{
    background-image: url("/assetes/img/magia-fogo-background-image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.section-magia-fogo{
    background-color: rgba(206, 86, 86, 0.9);
}
.body-magia-gelo{
    background-image: url("/assetes/img/magia-gelo-background-image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.section-magia-gelo{
    background-color: rgb(135, 206, 250, 0.9);
}
.body-magia-luz{
    background-image: url("/assetes/img/magia-luz-background-imagem.jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
}
.section-magia-luz{
    background-color: rgb(250, 250, 210, 0.8);
}
.body-magia-metal{
    background-image: url("/assetes/img/magia-metal-background-imagem.jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.section-magia-metal{
    background-color: rgb(188, 198, 204, 0.8);
}
.body-magia-natureza{
    background-image: url("/assetes/img/magia-natureza-background-imagem\ \(1\).jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.section-magia-natureza{
    background-color: rgb(34, 139, 34, 0.8);
    color: var(--text-white);
}
.body-magia-terra{
    background-image: url("/assetes/img/magia-terra-background-imagem.jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.section-magia-terra{
    background-color: rgb(155, 118, 83, 0.8);
    color: rgb(56, 29, 4);
}
.body-magia-trevas{
    background-image: url("/assetes/img/magia-trevas-background-imagem.jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.section-magia-trevas{
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}
.body-magia-trovao{
    background-image: url("/assetes/img/magia-raio-background-imagem\ \(1\).jfif");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.section-magia-trovao{
    background-color: rgb(118, 92, 150, 0.9);
    color: var(--text-white);
}
/* Escola de magias - fim */

/* Materiais */
.body-material-tecido{
    background-image: url("/assetes/img/tecido-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.section-material-tecido{
    background-color: var(--background-color-section);
    color: var(--text-black);
}
.tabela-tecido-alinhamento{
    width: 100%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    word-wrap:break-word;
    background-color: var(--background-color-section);
}
.body-material-metal{
    background-image: url("/assetes/img/metal-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.section-material-metal{
    background-color: var(--background-color-section);
    color: var(--text-black);
}
.tabela-metal-alinhamento{
    width: 100%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    word-wrap:break-word;
    background-color: var(--background-color-section);
    color: black;
}
.body-material-couro{
    background-image: url("/assetes/img/couro-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
}
.section-material-couro{
    background-color: var(--background-color-section);
    color: var(--text-black);
}
/* .tabela-couro-alinhamento{
    width: 100%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    word-wrap:break-word;
    color: black;
} */
.body-material-madeira{
    background-image: url("/assetes/img/madeira-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.section-material-madeira{
    background-color: rgba(255, 255, 255, 0.85); 
}
.tabela-madeira-alinhamento{
    width: 100%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    word-wrap:break-word;
    background-color: var(--background-color-section);
}
/* Materiais - fim*/
/* Equipamentos */
.body-equipamentos-armas_magicas{
    background-image: url("/assetes/img/armas_magicas-background-imagem.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.section-equipamentos-armas_magicas{
    color: var(--text-black);
    background-color: var(--background-color-section); 
}
.body-equipamentos-flechas{
    background-image: url("/assetes/img/madeira-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.section-equipamentos-flechas{
    color: var(--text-black);
    background-color: var(--background-color-section); 
}
.body-equipamentos-pedras_de_mana{
    background-image: url("/assetes/img/pedras_de_mana-background-imagem.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.section-equipamentos-pedras_de_mana{
    color: var(--text-black);
    background-color: var(--background-color-section); 
}
.body-equipamentos-pocoes{
    background-image: url("/assetes/img/pocoes-background-imagem.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.body-equipamentos-pocoes h4{
    font-size: 2.5rem;
    padding-top: 1.5rem;
    font-style: italic;
}
.section-equipamentos-pocoes{
    color: var(--text-black);
    background-color: var(--background-color-section); 
}
.tabela-responsivo{
    overflow-x: auto;
}
.tabela-armas_magicas-alinhamento{
    width: 50%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    overflow:auto;
    word-wrap:break-word;
    background-color: var(--background-color-section);
}
.tabela-flechas-alinhamento{
    width: 80%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    overflow:auto;
    word-wrap:break-word;
    background-color: var(--background-color-section);
}
.tabela-pedras_de_mana-alinhamento{
    width: 70%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    overflow:auto;
    word-wrap:break-word;
    background-color: var(--background-color-section);
}
.tabela-pocoes-alinhamento{
    width: 100%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    overflow:auto;
    word-wrap:break-word;
    background-color: var(--background-color-section);
}
.tabela-armas_magicas-alinhamento{
    width: 80%;
    margin: auto;
    table-layout: fixed;
    text-align:center;
    overflow:auto;
    word-wrap:break-word;
    background-color: var(--background-color-section);
}
/* Equipamentos - fim*/
.bodybencao{
    background-image: url("/assetes/img/bencao-background.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.section-bencao{
    background-color: var(--background-color-bencao);
    color: var(--text-black);
}
.bodyregras{
    background-image: url("/assetes/img/regras-background.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.section-regras{
    background-color: var(--background-color-bencao);
    color: var(--text-black);
}
.intro-content{
    position: relative;
    top: -6rem;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: var(--gap);
    min-height: 100vh;
}
.intro-text-content{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    text-align:justify;
}
.intro-text-content h2{
    margin-bottom: 2rem;
    text-align: center;
}
.texto{
    text-align: center;
    font-size: 5rem;
    padding-bottom: 3rem;
}
figure {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
figure img {
    display: block;
    max-width: 100%;
    height: auto;
}
.imagem-galeria{
    height: 100%;
    width: 100%;
    max-height: 30rem;
    max-width: 30rem;
    overflow: hidden;
}
.text-image-galeria{
    color: var(--text-black);
    text-align: center;
    padding-top: 1rem;
    font-size: 2.5rem;
}
.grid-one-content{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}
.grid-padding{
    padding-bottom: 1rem;
}
.grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 0.5rem;
    counter-reset: grid-counter;
}
.grid_2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0.5rem;
    counter-reset: grid-counter;
}
.grid-escolas{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    counter-reset: grid-counter;
}
.Skills-Classes{
    margin-top: 1rem;
}
.skills-escolas{
    margin-top: 1rem;
    margin-left: 3rem;
}
/* MEDIA */
@media (min-width: 1420px){
    h1{
        font-size: 10rem;
    }
    h2{
        font-size: 7rem;
    }
    h3{
        font-size: 4.5rem;
    }
    h4{
        font-size: 3.5rem;
    }
    a{
        font-size: 3rem;
    }
    p{
        font-size: 2rem;
    }
    .links-menu{
        font-size: 2.5rem;
    }
    .dropdown .dropbtn {
        font-size: 2.5rem;
    }
    .dropdown-content a {
        font-size: 2rem;
    }
    .dropdown-content {
        max-height: 45rem;
        max-width: 20rem;
    }
    .main-content{
        max-width: 160rem;
    }
    .second-content{
        max-width: 160rem;
    }
    .logo{
        max-width: 5.1rem;
    }
}
@media (min-width: 745px) and (max-width: 927px){
    .intro-content{
        grid-template-columns: 1fr;
        padding-top: 8rem;
    }
    .links-menu{
        font-size: 2rem;
    }
    /*Dropmenu*/
    .dropdown .dropbtn {
        font-size: 2rem;
    }
    .dropdown-content a {
        font-size: 1.5rem;
    }
    .dropdown-content {
        max-height: 35rem;
    }
    /*DROP MENU*/
    .second-content{
        padding: 5rem;
    }
    .section{
        margin-right: 4rem;
        margin-left: 4rem;
    }
    .grid{
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-escolas{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 621px) and (max-width: 744px){
    .intro-content{
        grid-template-columns: 1fr;
        padding-top: 8rem;
    }
    /*Menu celular*/
    .menu{
        bottom: 0;
        text-align: center;
    }
    .menu-content, .menu-content ul{
        flex-direction: column;
        justify-content:flex-start;
    }
    .menu-content{
        height: 100vh;
    }
    .menu{
        display: none;
    }
    .second-content{
        padding: 2rem;
    }
    .section{
        margin-right: 3rem;
        margin-left: 3rem;
    }
    .close-menu-label::after{
        content: '≡';
        position: fixed;
        z-index: 2;
        top: 1rem;
        right: 2rem;
        background-color: var(--text-white);
        color: black;
        font-size: 3rem;
        line-height: 3rem;
        width: 3rem;
        height: 3rem;
        text-align: center;
        cursor: pointer;
    }
    .dropdown .dropbtn {
        border: none;
        outline: none;
        color: var(--text-black);
        padding: 11px;
        font-size: 2rem;
        font-family: "Snell Roundhand", cursive;
    }
    .links-menu{
        font-size: 2rem;
    }
    .close-menu:checked~.menu{
        display: block;
    }
    .close-menu:checked~.close-menu-label::after{
        content: '×';
    }
    .menu-spacing{
        display: none;
    }
    /*Menu celular*/
    .grid-escolas{
        grid-template-columns: repeat(2, 1fr);
    }
    .grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .imagem-classes-paladino{
        float: none;
        padding-right: 0;
        max-width: 100%;
    }
}
@media (max-width: 620px){
    #toggle {
        display: inline-flex; /* Flexbox para centralizar o ícone */
      }
    .text-image-galeria{
        padding-top: 0.8rem;
    }
    .lista-index{
        padding-left: 1.8rem;
    }
    .intro-content{
        grid-template-columns: 1fr;
        padding: 1rem;
        padding-top: 8rem;
    }
    /*Menu celular*/
    .menu{
        bottom: 0;
        text-align: center;
        display: none;
        background-color: var(--background-color-menumenor);
    }
    .menu-content, .menu-content ul{
        flex-direction: column;
        justify-content:flex-start;
    }
    .menu-content{
        height: 100vh;
    }
    .second-content{
        padding: 1rem;
    }
    .section{
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }
    .sectionelfos{
        margin-right: 0.5rem;
        margin-left: 0.5rem; 
    }
    .section-mago{
        background: linear-gradient(to right, rgba(255, 69, 0,), rgba(255, 165, 0,), rgba(205, 133, 63,), rgba(30, 144, 255,), rgba(173, 216, 230,), rgba(255, 255, 224,), rgba(192, 192, 192,), rgba(138, 138, 138, 0.5), rgba(255, 255, 102,), rgba(34, 139, 34,));
        color:rgb(0, 0, 0);
    }
    .imagem-classes-mago{
        padding-bottom: 1rem;
    }
    .section-necromante{
        background-color: rgba(225, 245, 252, 0.7);
        color: black;
    }
    .section-cavaleirodassombras{
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
    }
    .class-spacing{
        height: 0rem;
    }
    .menu-spacing{
        height: 0;
    }
    .close-menu-label::after{
        content: '≡';
        position: fixed;
        z-index: 2;
        top: 1rem;
        right: 2rem;
        background-color: transparent;
        color: var(--text-black);
        font-size: 3rem;
        line-height: 3rem;
        width: 3rem;
        height: 3rem;
        text-align: center;
        cursor: pointer;
    }
    .dropdown .dropbtn {
        border: none;
        outline: none;
        color: var(--text-black);
        padding: 11px;
        font-size: 2rem;
        font-family: "Snell Roundhand", cursive;
    }
    .links-menu{
        font-size: 2rem;
    }
    .close-menu:checked~.menu{
        display: block;
    }
    .close-menu:checked~.close-menu-label::after{
        content: '×';
    }
    /*Menu celular*/
    .imagem-galeria{
        width: 100%;
        height: 100%;
        max-height: 20rem;
        min-height: 30rem;
    }
    .main-content{
        padding: 1rem;
        padding-top: 10rem;
    }
    .grid-escolas{
        grid-template-columns: repeat(1, 1fr);
    }
    .grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .grid_2{
        grid-template-columns: repeat(1, 1fr);
    }
    .body-magia-agua{
        background-image: url("/assetes/img/magia-agua-background-image\ \(2\).jpg");
    }
    .body-magia-gelo{
        background-position: center;
    }
    .body-magia-trovao{
        background-position: center;
    }
    .tabela-armas_magicas-alinhamento{
        width: 90%;
    }
    .tabela-metal-alinhamento{
        table-layout: auto;
    }
    .tabela-pedras_de_mana-alinhamento{
        width: 95%;
    }
    .tabela-pocoes-alinhamento{
        table-layout: auto;
    }
    .tabela-flechas-alinhamento{
        width: 100%;
    }
}