/* Reset e base */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background: #f4f4f4;
        padding: 0;
    }

/* Header */
    header {
        background: #FFD700;
        color: white;
        padding: 0;
        position: relative;
    }

    header h1 {
        margin-bottom: 10px;
    }

  

/* Conteúdo principal */
    main {
        max-width: 1000px;
        margin: 30px auto;
    }

    section {
        margin-top: 40px;
    }
 
/* elementos */
.h2-jp-branco {
    font-family: "Satisfy", cursive;
    font-size: 16px;
    color: #FFF;
}

.h2-jp {
    font-family: "Satisfy", cursive;
    font-size: 16px;
    color: #185477;

}
.h-titulo {
    font-size: 15px;
}

  .textoTituloQuiz {
        color: #2274A5;
        font-family: "Rubik Dirt", Arial, Helvetica, sans-serif;
        font-size: 36px;        
        font-weight: 100;
  
    }

/* INÍCIO Seção do jogo */
    #secao-jogo {
        margin-top: 40px;
        text-align: center;
    }

    .jogo-container {
        background-color: #ffffff;
        margin: 0 auto;
        padding: 20px;
        width: 100%;
        max-width: 500px;
        border-radius: 8px;
    }
/* FIM Seção do jogo */   

    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin-top: 15px;
    }

    .card {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 400px;
    }

img.lampada {
    margin-top: 5px;
    margin-right: 8px;
    width: 16px;
    height: 23px;
} 

@media (max-width: 385px) {
 .h-titulo {
    font-size: 13px;
}
}

/* ----------- INÍCIO MENUS --------------*/

/* --------- INTERCALA MENU HORIZONTAL OU SANDUÍCHE CONFORME TELA---------- */  
    @media only screen and (min-width: 769px) {
            
        #menusanduiche {  /*<!--  menu sanduíche-->*/
            display: none;  /*<!--  menu sanduíche-->*/
        }
    }
    @media only screen and (max-width: 768px) {  /*<!--  menu sanduíche-->*/
        #menuhorizontal { /*<!--  menu sanduíche-->*/
            display: none;    /*<!--  menu sanduíche-->*/
        }
    }
/* --------- FIM INTERCALA MENU HORIZONTAL OU SANDUÍCHE CONFORME TELA---------- */ 

/* ---------- INÍCIO CSS MENU HORIZONTAL -----------------  */

    ul#menuhorizontal {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: transparent;
        
        font-size: 12px;
        font-family: "Roboto", Arial, sans-serif;
        font-weight: normal;
    }

    ul#menusanduiche {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        color: #000000;  
        font-family: "Roboto", Arial, sans-serif;
        font-size: 16px;
        font-weight: normal;
        z-index: 55559;
    }
    
    li {
        float: left;
    }
    
    li a, .dropbtn {
        display: inline-block;
        background-color: #8dff82; /*não aparece em nada esta cor*/
        color: #000000;
        text-align: center;
        padding: 4px 16px;
        text-decoration: none;
        font-size: 14px;
    }
    
 
    
    li.dropdown {
        display: inline-block;
    }
    
    .dropdown-content {
        /*display: none;*/
        position: absolute;
        background-color: transparent;
        padding: 0 5px;
        min-width: 160px;
        z-index: 55559;
        clip-path: inset(0 0 100% 0); /*para fazer o submenu aparecer com animação*/
        transition: clip-path 0.5s ease-out;
    }
    
    .dropdown-content a { /*🔣 MENU - Horizontal - menus que descem*/
        color: #000000;
        padding: 0px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        font-family: "Roboto", Arial, sans-serif;
        font-weight: bold;
        font-size: 14px;
        margin: 1px;
        background-color: #87d0fd;
        /*border: 2px solid black; */ /* só deixar quando quiser efeito botão*/
        /*box-shadow:*/ /* só deixar quando quiser efeito botão*/
        /*inset -4px -4px 6px rgba(0, 0, 0, 0.5),
        inset 4px 4px 6px rgba(255, 255, 255, 0.3);*/
        /*border-radius: 5px; */  /* só deixar quando quiser efeito botão*/
    }
    .dropdown-content a:hover {
        background-color: #FF9D5C;
        color: #002878;    
    }
 
    
    
    .dropdown:hover .dropdown-content {
        /*display: block;*/
        clip-path: inset(0 0 0 0);
    }

    .classmenuhoriz {                         /*🔣 MENU - Horizontal os visíveis */
        background-color: #FF6600; /*FF6600
        /*border: 2px solid black;*/ /* só deixar quando quiser efeito botão*/
        /*box-shadow:   /* só deixar quando quiser efeito botão*/
        /*inset -4px -4px 6px rgba(0, 0, 0, 0.5),
        inset 4px 4px 6px rgba(255, 255, 255, 0.3);*/
        /*border-radius: 5px;*/   /* só deixar quando quiser efeito botão*/
        text-decoration: none;
        display: inline-block;
        position: relative;
        transition: 0.2s ease-in-out;
        /*box-shadow: 4px 4px 0px black;*/
        padding: 5px 30px;
        /*margin: 5px;*/ /*mudei*/
        margin: 0;
        
        font-size: 14px;
        font-weight: bold;
        
    }
    .classmenuhoriz:hover:not(.active) { 
        background-color: #ff8e42;
        color: #002878; 
    } 
 
/*  FIM CSS MENU HORIZONTAL   */

/*  INÍCIO CSS MENU SANDUÍCHE-->*/
   /* a#menusandini { 
        background-color: #FBFB4B;
        color: #000000;  
        margin: 1px;
         
        border: 2px solid #000000;
        border-radius: 10px;
        font-size: 18px;
        }*/
    a.classmenusand { 
        background-color: #FF6600;
        color: #000000;  
        font-size: 14px;
        font-weight: bold;
         
        }

    a.classmenusand:hover:not(.active) { 
        background-color: #ff8e42;
        color: #002878;  
       
        }  

    a.classsubmenusand { 
        background-color: #87d0fd;
        color: #000000;  
        
        font-size: 14px;
       
        }
    a.classsubmenusand:hover:not(.active) { 
        background-color: #FF9D5C;
        color: #002878; 
        
        }   
/*  FIM CSS MENU SANDUÍCHE-->*/

/* ---------------------- FIM MENUS -----------------------*/



/* FOOTER */
    footer {
        background: hsl(51, 100%, 50%); /*#FFD700*/
        color: #002ec5;
        text-align: center;
        padding: 20px;
        margin-top: 40px;
    }

    .footer-links {
        margin-top: 10px;
    }

    .footer-links a {
        color: #002d60;
        text-decoration: none;
        margin: 0 5px;
        font-size: 0.9rem;
    }

    .footer-links a:hover {
        text-decoration: underline;
    }
/* -------- fim do footer--------*/

.nada-só-para-testar-cores {
    color: hsl(51, 100%, 50%); /*#FFD700*/
    color: hsl(226, 100%, 39%); /*#002ec5*/
    color: hsl(193, 41%, 76%); /*#a8d0db*/
    color: #FF6600; /**/
    color: #878533; /**/
    color: hwb(60 62% 0%);
    color: #C3C3C3;
}