*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto',sans-serif;
}
body{
    background-color: white;
    min-height: 100vh;
    width: 100%;
    
}


.container{
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 2%;
}

nav{
    display:flex;
     /* cor do fundo do no nav #e3f0ff */
    
    
    width: 100%;
    height: 100px;
}
nav .menu-icon{
    cursor: pointer;
    display: none;
}


.container a:hover{
    color: #f9464f;
    }
    nav{
        display: flex;
         /* cor do fundo do no nav #e3f0ff */
        background-color:  black;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 70px;
    }
    nav .menu-icon{
        cursor: pointer;
        display: none;
    }
    nav .logo a{
        font-size: 12px;
        font-weight: bold;
        /* cor da letra do logo */
        color: #faf9f9;
        text-decoration: none;
       
        
    }
    
    
    
    
    .container a:hover{
        color: #f9464f;
        }
    nav ul{
        display: flex;
        list-style: none;
        align-items: center;
        
    }
    nav ul li{
        padding: 0 15px;
        
        
    
    }
    nav ul li a{
    
        text-decoration: none;
        font-size: 17px;
        
        
        /* cor dos textos nav */
        
        
    }
    nav ul button a{
        align-items: left;
        /* cor do fundo do texto no button nav */
        background-color: none;
        /* cor das letras no button nav */
        color: white;
        font-weight: bold;
        font-size: 19px;
        
        text-decoration: none;
    }
    
    
    nav ul button{
        /* cor do fundo do button nav */
       background-color: rgb(0, 0, 0);
        border: none;
       text-decoration: none;
       color: white;
       font-size: 19px;
           
        /* comandos para letras button nav padding: 10px 20px;*/
        padding: 10px 15px;
        border-radius: 5px;
        
        
        letter-spacing: 1px;
        
        cursor: pointer;
    }


  /* Fake image, just for this example */
  /* Right-aligned link */
.navbar a.right {
    float: right;
  }
  
  /* Change color on hover */
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Active/current link */
  .navbar a.active {
    background-color: #666;
    color: white;
  }
  /* esse main separa footer da tela se mexer estraga tudo */
  main{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


  /* Column container */
  .column {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    -ms-flex: 65%; /* IE10 */
    flex: 65%;
    background-color: #f1f1f1;
    
  }
  
  /* Main column */
  .main {   
    -ms-flex: 35%; /* IE10 */
    flex: 35%;
    background-color: black;
   
    
    
  }
  
  

.main a:hover {
    color: red;
}

 
  /* Fake image, just for this example */
  .fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
  }
  
  /* Fake image, just for this example */



/* cor botao fundo pt-br 
.buttonEnglish a{
   
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    margin-left: 10px;
    cursor: pointer;
    color: #5654b3;
    text-decoration: none;
}*/
 /* cor dos textos botao lingua en-us 
.buttonlang a{  
    background-color: none;
    font-size: 17px;
    border: none;
    text-decoration: none;
    color: #5654b3;
    border-color: none;

    
    
    text-transform: uppercase;
    
    color: #5654b3;
}*/



/* teste dropdown menu */
.dropbtn {
    border-radius: 5px;
    /* cor buttom MAIS  */
    font-weight: bold;
    padding: 18px;
    color: white;
    font-size: 20px;
    border: none;
    cursor: pointer;
  }
  
  .dropdown {
    border-radius: 15px;
    
    position: relative;
    display: inline-block;
    border: none;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    min-width: 170px;
    
    z-index: 1;
  }
  
  .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border: none;
    cursor: pointer;
  }
  
  .dropdown-content a:hover {background-color: black}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  
    /* letras de listas com pontos positivos e negativos dos herois
.check-list li{
    text-align: left;
    line-height: 30px;
    font-weight: normal;
    margin-left: 70px;
    margin-right: 30px;
    color: Black;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;   

}     */
/* margim das letras exclusivo para ponto positivos e negativos */      
/* margim das letras aba mais 
.checklist-stats li{
    padding: 2%;
    margin-left: 0px;
    text-align: left;
    line-height: 19px;
    font-weight: normal;
    
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;   
}   */

li{
    padding: 0.7%;
    /* margim das letras li gpt */
    margin-left: 70px;
    text-align: left;
    /* distancia das letras li gpt */
    line-height: 25px;
    font-weight: normal;
    color: Black;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;   

}

  /* numeros 1º 2º 3º */
.check-list ol{
    text-align: left;
    line-height: 30px;
    font-weight: normal;
    margin-left: 70px;
    margin-right: 30px;
    color: Black;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.check-list a{
    color: red;
}
.check-list img{
    width: 25px;
    height: 20px;
}
p {
    text-align: left;
    text-indent: 30px;
    margin: 5px;
    margin-top: 10px;
    margin-left: 1px;
    margin-right: 30px;
    line-height: 2;
    padding: 0,1%;
    color: Black;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
}


h1 {
    color: #5105cb;
    padding: 0,2%;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 0px;
}
h2 {
    margin-left: 30px;
    margin-top: 25px;
    
    color: #5105cb;
    font-size: 30px;
    
    padding: 0,2%;
    text-align: left;
}
h3 {
    margin-left: 30px;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #e20c17;
    font-size: 28px;
    padding: 0,2%;
    text-align: left;
    }
h4 {
        color: #000000;
        margin-left: 30px;
        font-size: 22px;
        padding: 0,2%;
        text-align: left;
}
h5 {
        color: #000000;
        font-size: 18px;
        margin-top: 10px;
        margin-left: 30px;
        padding: 0,2%;
        text-align: left;

}
    /* h6 Fonte da data de atualização */
h6 {
    color: #18a84d;
    margin-top: 10px;
    font-size: 20px;
    text-align: left;
}
/* form para pesquisa no site */
form {
    text-align: right;
}

/* letras texto de caixa na seção */
section p{
    margin-left: 30px;
    margin-right: 70px;
    font-size: 22px;
    color: black;
    padding: 0,1%;
    text-align: left;
        font-family: Arial, Helvetica, sans-serif;
}


.text-bx p{
    margin: center;
       
    }

.text-bx{
    width: 100%;
    
}
/* texto do título */
.text-bx h1{
    font-size: 3rem;
    text-transform: uppercase;
    margin-bottom: 0px;
    
}

/* text title do título novo */
.text-title h1{
    font-size: 3rem;
    text-transform: uppercase;
    margin-left: 30px;
    margin-bottom: 0px;
    
    text-transform: uppercase;
}
.text-title h1 b{
    color: #e20c17;
    
}

.text-title h1 b::before {
    content: "\a";
    font-size: 0;
    display: block;
    line-height: 0;
}

                             

.text-bx li{
    font-size: 20px;
    list-style-type: none;
    text-align: left;
}

.text-bx h1 b{
    color: #f1676d;
}
.text-bx p{
    color: #372c62;
        
    margin-top: 10px;
}
.text-bx .input-bx{
    margin: 2px 0;
    display: flex;
}
.text-bx .input-bx input{
    width: 60%;
    display: block;
    height: 50px;
    padding: 10px;
    border: none;
    outline: none;
    color: #8997b9;
    font-size: 20px;
    text-align: left;
}
.text-bx .input-bx input::placeholder{
    color: #8997b9;
}
.text-bx .input-bx button{
    outline: none;
    border: none;
    padding: 10px 20px;
    background-color: #5654b3;
    color: white;
    cursor: pointer;
    font-size: 15px;
}

.text-ale{
    margin: 50px;
}

.text-ale h1 b::before{
        content: "\a";
        font-size: 0;
        display: block;
        line-height: 0;
    
}
/* texto para ads */

    

.text-ads li{
    list-style-type: none;
    font-size: 18px;
    margin-left: 165px;
    color:#242424fd

}
.autor ul{
    list-style: none;
    margin-top: 0px;
    
    
}
.autor ul li{
    
    margin: 30px; 
    margin-top: 0px;
    font-size: 14px;
}

.img-banner img{
       
    width: 100%;
    height: 400px;    
}
.img-banner-index img{
       
    width: 100%;
    height: auto;
}
.img-ale img{
       margin: 30px;
    width: 2%;
    height: auto;
}


    

/* imagem do menu da página home index */
.img-menu{
    height: 200px;
    width: 270px;
    
    align-items: center;
    text-align: center;
    float: left;
    image-orientation: left;
    padding: 1% 2%;
}
.img-menu a :hover{
    color: #f9464f;
}
.img-menu a{
    padding: 0.1%;
    float: center;
    
    image-orientation: flex;
    margin-top: 1px;
    text-decoration: none;
    font-size: 18px;
}
.img-menu a:hover{
    color: #f9464f;
    }

.img-menu img{
        width: 100%;
        border: 4px solid #5654b3;
}
.logo img{
    width: 50%;
    height: auto;
}
/* imagem do embed index */
.img-embed{
    width: 300px;
    height: 180px;
   
    
    margin-bottom: 120px;
    align-items: center;
    text-align: center;
    float: left;
    image-orientation: left;
    padding: 1% 2%;
}
.img-embed a :hover{
    color: #f9464f;
}
.img-embed a{
    padding: 0.1%;
    /* float e text align para texto a esquerda */
    float: left;
    text-align: left;
    color: black;
    image-orientation: flex;
    margin-top: 1px;
    text-decoration: none;
    font-size: 14px;
}
.img-embed a:hover{
    color: #f9464f;
    }

.img-embed img{
        width: 100%;
        height: 100%;
        border: 4px solid #5654b3;
}
        
        /* guide imagem do logo do guia de Heróis */
.img-logoguide{
    max-width: 100%;
    height: auto;
    margin: 80px;
    text-align: center;
    
    margin-inline: center; 
    float: center;
    image-orientation: center;        
}

    /*imagens de sugestões no rodapé */
.img-sugestion{
    width: 180px;
    height:auto;       
    align-items: center;
    text-align: center;
    float: left;
    image-orientation: left;
    padding: 2% 3%;
    margin-top: 10px;
}
.img-sugestion a{  
    float: center;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgb(255, 255, 255);
    
}
.img-sugestion img{
    width: 80%;
}
.img-sugestion a:hover {
    color: red;
}

/*imagens de mais old180 e auto visitados */

/* imagem do embed index */
.img-visited{
    width: 300px;
    height: 180px;
   
    
    margin-bottom: 70px;
    align-items: center;
    text-align: center;
    float: left;
    image-orientation: left;
    padding: 1% 2%;
}
.img-visited a :hover{
    color: #f9464f;
}
.img-visited a{
    padding: 0.1%;
    /* float e text align para texto a esquerda */
    float: left;
    text-align: left;
    color: white;
    image-orientation: flex;
    margin-top: 1px;
    text-decoration: none;
    font-size: 14px;
}
.img-visited a:hover{
    color: #f9464f;
    }

.img-visited img{
        width: 100%;
        height: 100%;
        border: 4px solid #5654b3;
}
        


    /* imagens do menu guia de heróis */    
.img-menuguide{
    height: 210px;       
    width: 190px;
   
    align-items: center;
    text-align: center;
    float: left;
    image-orientation: left;
    padding: 2% 3%;
    
}
.img-menuguide a{
    float: center;
    text-decoration: none;
    border: 1px solid rgb(255, 255, 255);
    
}
.img-menuguide img{
    width: 100%;
}

.img-menuguide a:hover{
    color: red;
    }

     /* imagens do menu guia de heróis */    
.img-home{
    width: 100%;
    
    
    
   margin-bottom: 80px;
    align-items: center;
    text-align: center;
    float: left;
    image-orientation: left;
    padding: 2% 3%;
    
}
.img-home a{
    float: center;
    text-decoration: none;
   
    
}

.img-home a:hover{
    color: red;
    }
.img-home img{
    border: 4px solid #5654b3;
    width: 400px;
    height: 200px;       
    
}



/*imagens de mais visitados */
.img-new{
    width: 180px;
    height:auto;       
    align-items: center;
    text-align: center;
    float: left;
    image-orientation: left;
    padding: 2% 3%;
    margin-top: 10px;
}
.img-new a{  
    float: center;
    text-align: center;
    text-decoration: none;
    
    
}
.img-new img{
    width: 80%;
}
.img-new a:hover {
    color: red;
}


    /* imagem do herói no nível máximo*/
   

.img-max img{
    width: 40%;
    margin-left: 30px;
    margin-bottom: 0px;
    border: 5px solid #5654b3;
}
.img-max a{
    
    margin-left: 30px;
    }

.img-artifact img{
    width: 20%;
    border: 7px solid #5654b3;
    text-align: center;
    margin-left: 30px;
    align-items: center;
    
}
.img-artifact a{
    
    margin-left: 30px;
    
}
.img-counters img{
    width: 40%;
}
figcaption {
    margin-left: 30px;
    color: black;
    font-style: italic;
    padding: 0px;
    text-align: left;
  }

.table-combos th{
    color: black;
    
}



.table-combos th, td {
    border: 1px solid black;
    padding: 5px;
  }

.table-combos table{
    margin: 31px;
    margin-top: 3px;
    font-size: 20px;
    
    border: 1px solid rgb(0, 7, 11);
    text-align: center;
}
/* Estilo para o cabeçalho da tabela modelo novo 2024 */
table {
    margin: 30px;
    width: 70%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    font-family: Arial, sans-serif;
  }
  
  /* Estilo para o cabeçalho da tabela */
  th {
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  /* Estilo para as células da tabela */
  td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  



   





    /* fontes para tabelas de habilidades */


  
.skillgray blockquote{
    padding: 1%;
    font-size: 20px;
    background-color: #eeeeee;
    border: 1px solid rgb(0, 7, 11);
    text-align: left;
    margin-left: 31px;
    margin-right: 62px;
}

.skillgreen blockquote{
    padding: 1%;
    font-size: 20px;
    background-color: #cfffe8;
    border: 1px solid rgb(0, 7, 11);
    text-align: left;
    margin-left: 31px;
    margin-right: 62px;
}
.skillblue blockquote{
    padding: 1%;
    font-size: 20px;
    background-color: #d7d3fe;
    border: 1px solid rgb(0, 7, 11);
    text-align: left;
    margin-left: 31px;
    margin-right: 62px;
}

.skillviolet blockquote{
    padding: 1%;
    font-size: 20px;
    background-color: #ffbaf2;
    border: 1px solid rgb(0, 7, 11);
    text-align: left;
    margin-left: 31px;
    margin-right: 62px;
}
.Lucca blockquote{
    padding: 1%;
    font-size: 20px;
    background-color: #f9fbfc;
    border: 1px solid rgb(0, 7, 11);
    text-align: left;
    margin-left: 31px;
    margin-right: 62px;
}
  
  



pre{
    text-align: left;
}

.medias-socias{
    margin-top: 30px;
}
.medias-socias a{
    text-decoration: none;
}

.medias-socias i{
    font-size: 23px;
    margin: 0 3px;
    color: white;
    background-color: #372c62;
    padding: 7px;
    border-radius: 5px;
}


.img-bx{
    width: 30%;
}
.img-bx img{
    width: 100%;
}

iframe{    
        
    width: auto;    
    height: auto;
    margin-left: 30px;
    margin: center;
    margin-top: 16px;
            
     
}





@media (max-width:540px) {
    nav .menu-icon{
        display: block;
    }
    nav .logo{
        display: block; 
    }
    nav ul{
        position: fixed;
        width: 65%;
        height: 100%;
        top: 0px;
        left: 0px;
        transform: translateX(-100%);
        display: flex;
        align-items: left;
        flex-direction: column;
        justify-content: left;
        transition: 0.3s ease-in;
        background-color: black;
    }

    
    
    
    nav ul.active{
        transform: translateX(0);
    }
    nav ul li{
        padding: 2px;
        margin: left;
    }
    nav ul li a{
        text-align: left;
        font-size: 16px;
        margin-left: 5px;
         color: white;
        
        
    }
    nav ul button{
      text-align: justify;
        font-size: 17px;     
    }
    nav ul button a{
        margin: 5px;
        font-size: 17px;
          
     }
    
    .text-bx,
    .img-bx{
        width: 100%;
        text-align: center;
    }
    .text-bx{
        margin-bottom: 40px;
    }
    .text-bx .input-bx{
        justify-content: center;
    }

    .text-title h1{
        font-size: 25px;
        text-transform: uppercase;
        margin-left: 5px;
        
    }
    


    .text-ale{
        margin: 10px;
    }

    .text-ads p{
        font-size: 16px;
        margin-left: 5px;
        color:#222223fd
       
    }

    .text-ads{
        
        margin-left: 10px;

    }
    .text-ads li{
            list-style-type: none;
            font-size: 19px;
            margin-left: 15px;
            color:#1a1b1bfd
    }
    
    
    .autor ul li{
        margin: 5px; 
        font-size: 14px;
    }
    .autor li b::before {
        content: "\a";
        font-size: 0;
        display: block;
        line-height: 0;
    }
    
    
    .img-banner img{
       
        width: 100%; 
        height: auto;
       
    }
    .img-banner-index img{
       
        width: 100%; 
        height: auto;
      
    }

    
    /* imagem do logo para mobile*/
    .img-logoguide img{
        width: 110%;  
    }  
    .logo img{
        width: 50%;
        height: auto;
    }
        

    .img-menu img{
        width: 85%;
          
    }
    
    .img-max{
        margin-inline: center; 
        float: center;
        image-orientation: center;    
       
    }
    
    .img-max img{
        width: 98%;
        margin: 5px;
        
    }
    .img-max a{
        
        margin: 5px;
        
    }
    .img-artifact img{
        width: 60%;
        
       
        
    }

    
    .img-sugestion{
        width: 40%;
        
    }
    

    

    .img-new img{
        width: 70%;
          
      }
    
      
    

    .img-counters img{
        width: 70%;
    } 
    figcaption {
        margin-left: 5px; 
    }

       
    .img-menuguide{
        Width: 32%;
        height: 160px;       
    }
    
    .img-home img{  
        width: 98%;
        height: auto;
       
           
    }
    .img-home{  
        margin-bottom: 110px;       
    }
    .img-visited{
        width: 100%;
        margin-bottom: 100px; 
       
    }
    .img-embed{
        width: 100%;
        margin-bottom: 103px; 
        
       
    }
    
    
    
    

    

   
    
    
   
    section p{
        
        margin-left: 10px;
        margin-right: 5px;
        color: black;
        padding: 0,2%;
        text-align: left;
    }
    section ul li a{
        
        margin-left: 10px;
        margin-right: 5px;
        color: black;
        padding: 0,2%;
        text-align: left;
    }
    h1 {
        color: #5105cb;
        margin-left: 10px;
        padding: 0,2%;
        text-align: left;
    }
    h2 {
        margin-left: 10px;
        font-size: 24px;
        color: #5105cb;
        padding: 0,2%;
        text-align: left;
    }
    h3 {
        margin-left: 10px;
        font-size: 23px;
        font-size: 22px;
        color: #e20c17;
        padding: 0,2%;
        text-align: left;
    }
    h4 {
       
        margin-left: 10px;
       }
    h5 {
        color: #18a84d;
        padding: 0,2%;
        text-align: left;
        margin-left: 15px;
    }
    section p{
        margin-left: 15px;
        margin-right: 15px;
        color: black;
        padding: 0,2%;
        text-align: left;
        
        font-family: Arial, Helvetica, sans-serif;    
    }
    
    .check-list li{        
        margin-left: 40px;
        
        
    }
    .check-list ol{
        margin-left: 20px;
    }

    .checklist-stats li{
         line-height: 22px;
    }
    
    
    .skillgray blockquote{  
       
        margin-left: 10px;
        margin-right: 10px;
    }
    .skillgreen blockquote{            
            margin-left: 10px;
            margin-right: 10px;
    }
        
    .skillblue blockquote{            
            margin-left: 10px;
            margin-right: 10px;
    }
    .skillviolet blockquote{            
        margin-left: 10px;
        margin-right: 10px;
    }
    .Lucca blockquote{
        
        margin-left: 10px;
        margin-right: 10px;
    }

    .table-combos table{
        width: auto;
        margin-left: 10px;          
    }
    table {
        width: auto;
        margin-left: 10px;  
    }

    .table-combos table{
       
        margin-top: 5px;

        
    }
    table {
    margin: 10px;
    width: 95%;
    }
   
    .table-combos th,td{
        font-size: 15px;
    }

    .container{
        width: auto;
    
    }

    iframe{    
        width: 100%; 
        height: auto;
        margin-left: 0px;
           
    }
    
    .main {   
        -ms-flex:100%; /* IE10 */
        flex: 100%;
        background-color: black;
    }
    main{
        flex-direction: column;
    }
    
    
    .footer a img{
            width: 10%;
            
    }

    

    .iconeyt {
            color: #e20b0b;    
            margin-left: 3px;
            font-size: 18px;
            list-style: none;    
}
    

        

}
    

/* width mesmo tamanho do nav */        
/* width mesmo tamanho do nav */        
.footer{
    max-width: 1000px;
    background-color: #f9f9f9;
    padding:3px 0px;
    justify-content: space-between;
    text-align: center;
}

        
.footer .row{
    width:100%;
    margin:1% 0%;
    padding: 0,1% 0%;
    color:rgb(4, 2, 25);
    
    }
    
    .footer .row a{
    text-decoration:none;
    font-size: 16px;
    color: black;
    transition:0.5s;
    }
    
    .footer .row a:hover{
    color: red;
    }
    .footer image:hover{
    color: red;
    }
    
    .footer .row ul{
    width:100%;
    
    }
    
    .footer .row ul li{
    display:inline-block;
    margin:0px 5px;
    font-size: 12px;
    }
    
    .footer .row a i{
    font-size: 2em;
    margin:0% 1%;
    }
    .footer p{
      
        text-align: center;
    }
    .footer img{
        width: auto;
        height: 30px;
        margin: 1% 2%;
        padding: 0,9% 1%;
        border-radius: 100%;
        
    }
    
    .footer .row ul li{
        display:inline-table;
        margin:5px 20px;
        text-align:center;
        }
    .footer .row a i{
        margin:0% 3%;
        }
    
    
        
    
    
        
    
    
    
        
    
    

    
    
        
    
    

    

/** CSS cokies 2024 **/
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #c9bdba;
    padding: 10px 20px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 999;
}

.button-container {
    margin-top: 10px;
}

.btn {
    padding: 8px 20px;
    margin: 0 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.accept-btn {
    background-color: #4caf50;
    color: white;
}

.reject-btn {
    background-color: #f44336;
    color: white;
}

.privacy-link {
    color: #171717;
    text-decoration: none;
}

.privacy-link:hover {
    text-decoration: underline;
}



@media screen and (max-width: 600px) {
    .box-cookies {
        flex-direction: column;
        border-left: none;
    }
}