:root {
    /* background */
    --background: #F5FCFF;
    --back-nav: rgba(191, 221, 255, 0.33);
    --back-gray: gray;
    --back-option-e-mob: #389964;
    --back-ok: #32AC49;
    --back-card-A-B-Nav: #BCD6F1;
    --back-box: #8DB8E5;
    --back-tittle: #6695CD;
    --back-answer: white;
    --back-active: #19574E;
    --back-linha-corrt: #d4edda;
    --back-linha-incorrt: #f8d7da;
    --back-projt-bttn: #9392D5;
    
    /* cor texto */
    --texto-branco: white;
    --texto-preto: black;
    --texto-branco: ;
    --texto-branco: ;
    --text-bttn-dific: black;
    --text-color-w: white;
    --text-clr-comparacao: red;
    
    /* tamanho texto */
    --tamanho-options: 20px;
    --tamanho-nav-button: 23px;
    /* gap */
    --gap-div-options: 30px;
    --gap-div-options-mob: 15px;
}

/* Modo Noturno */
[data-theme="dark"] {  
    --background: #181D26;
    --back-nav: rgba(46, 54, 73, 0.33);
    --back-option-e-mob: #2E8246;
    --back-ok: #239438;
    --back-card-A-B-Nav: #3E5A89;
    --back-box: #2C3546;
    --back-tittle: #477DBB;
    --back-answer: #CCCEDB;
    --back-active: #1A3142;
    --back-linha-corrt: #5E8A66;
    --back-linha-incorrt: #99636A;  
    --back-projt-bttn: #3E3570;
        
    --text-color: #e0e0e0;
    --text-bttn-dific: white;
    --text-clr-comparacao: maroon;
  
}
/* .theme-toggle,
.theme-toggle-proj, 
.button-back-proj-mob a {
    background: pink;
}  */





html{
    scroll-behavior: smooth;
}

body {
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  font-family: 'Prompt', sans-serif;
}
button{
    font-family: 'Prompt', sans-serif;
}
.option-mob {
    border-radius: 5px;
}
.nav-button, .nav-button-mobile, .difficulty-button, .projeto-button, .reiniciar-button, .cont-dificuldades-Inv, button#btton-check, input#answer, #painel-visu, .option, .div-options-mobile, #feedback, #counter-mob, .container-links-proj a {
    border-radius: 10px;
}
.cardA, .cardB, .div-options {
    border-radius: 20px;
}

/* body {
    display: flexbox;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
} */
body {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    background: var(--background);
    margin: 30px auto;
}


.icon-light, .icon-dark{
 width: 25px;
}
.theme-toggle {
    background: ;
    padding: 20px 60px;
    cursor: pointer;
}
/*navegação desktop*/
.nav {
    /* position: sticky;
    top: 20px; */
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    align-items: center;   
    height: 80px;
    /* background: var(--back-nav); */
    padding: 10px 30px;
}

.nav-button {
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 60px;
    height: 60px;
    font-size: var(--tamanho-nav-button);
    background: var(--back-option-e-mob);
    padding: 0px 40px 0px 40px;
    overflow: hidden;
}
.nav-button[treine]{
    background: var(--back-tittle);
}
.div-options {
    display: flex;
    flex-direction: row;
    justify-content: center; 
    align-items: center;
    height: 60px;
    background: var(--back-card-A-B-Nav);
    padding: 0px 13px 0px 13px;
    gap: var(--gap-div-options);
}
.option{
    display: flex;
    flex-direction: row;
    justify-content: center; 
    align-items: center;   
    height: 40px;
    font-size: var(--tamanho-options);
    background: var(--back-option-e-mob);
    padding: 0px 20px 0px 20px;    
    cursor: pointer;
}
.option.active{
    background: var(--back-active);
    color: var(--text-color-w);    
}

.option p{
    display: none;
    margin-left: 15px;
}

.option.active p{
    display: flex;
    width: ;
}

.option img{
    width: 20px;
}
/* fim navegação desktop*/


/*navegação mobile*/
.nav-mobile {
    /* position: sticky;
    top: 20px; */
    max-width: 330px;
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    align-items: center;   
    height: 80px;
    background:;
  gap: 10px;
    /* padding: 0px 40px 0px 40px; */
}

.nav-mobile, #counter-mob {
    display: none;
}

@media (max-width: 600px) {
    .nav, .container-links-proj{
        display: none;
    }
    .nav-mobile, #counter-mob{
        display: flex;
    }
 
}
.nav-button-mobile {
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 60px;
    height: 60px;
    font-size: var(--tamanho-nav-button);
    background: var(--back-option-e-mob);
    padding: 0px 10px 0px 10px;
    overflow: hidden;
}
.nav-button-mobile[treine]{
    background: var(--back-tittle);
}

.div-options-mobile {
    display: flex;
    flex-direction: row;
    justify-content: center; 
    align-items: center;
    height: 60px;
    background: var(--back-card-A-B-Nav);
    padding: 0px 20px 0px 20px;
    gap: var(--gap-div-options-mob);
}
.option-mob{
    display: flex;
    flex-direction: row;
    justify-content: center; 
    align-items: center; 
    width: 25px; 
    height: 25px;
    font-size: var(--tamanho-options);
    background-color: var(--back-option-e-mob);
    padding: 5px;
    user-select: none;
    cursor: pointer;
}
.option-mob {
    background-color: transparen;
}
.option-mob.active {
    background-color: var(--back-active);
}

.option-mob img{
    width: 25px;
}
/* fim navegação mobile*/



.container-row{
    display: flex;
    flex-direction: row;
}
.container-column{
    display: flex;
    flex-direction: column;
}
.container-grid{
    display: grid;
  place-items: center; 
}

.container-dificuldades{
    display: grid;
    grid-template-columns: repeat(2, auto);
    width: 280px;
    align-content: center;
    justify-content: space-between; 
    gap: 10px;
    background:;
}
.p-dificu{
    background:;
    margin: 0;
    margin-bottom: -5px;
}
.cont-dificuldades-Inv{
    display: flex;
    width: 280px;
    height: 90px;
    text-align: center;
    justify-content: center; 
    align-items: center;   
    background: var(--back-box);
}


.principal-content{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 340px;
    height: 100%;
    justify-content: center; 
    align-items: stretch;   
    background:;
    gap: 20px;
    /* margin-bottom: 80px; */
}

.a { grid-area: a;}
.b { grid-area: b;}
.c { grid-area: c;}

.principal-content {
    grid-template-areas: "a b c";
}
@media (max-width: 600px) {
    .principal-content {
        grid-template-columns: 1fr;
        grid-template-areas: 
        "b"
        "a"
        "c";
    }
    
}


.cardA{
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 400px;
    padding: 30px;
    /* box-sizing: border-box; */
    background: var(--back-card-A-B-Nav);
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
    padding: ;
    /*border: 30px solid red; */
    border-radius: 20px;
}

.cardBox {
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 400px;
    background: var(--back-box);
    text-align: center;
    justify-content: center; 
    align-items: center;
}
.cardBox-two{    

}
.cardA .creditos{
   background:; 
   margin: 0px;
}
#painel-visu { /* onde sera exibido o numero */
    display: flex;
    margin-top:;
    text-align: center;    
    align-items: center;
    justify-content: center; 
    width: 280px;
    height: 180px;
    font-size: 60px;
    background: var(--back-box);
    overflow: hidden;
}
/* .painel-visu { /* onde sera exibido o numero
    width: 200px;
    height: 109px;
    background: yellow;
}
p#numberDisplay {
    text-align: center;
    font-size: 80px;
}  */

#numberDisplay.erro-temporario {
  position: relative;
  animation: piscarErro 0.5s ease-in-out;
  z-index: 2;
  padding: 0px 30px;
  border-radius: 5px;
}

@keyframes piscarErro {
  0%   { background-color: rgba(255, 0, 0, 0.3); }
  100% { background-color: transparent; }
}

#categoriaTexto{
    font-family: 'Prompt', sans-serif;
    font-style: italic;
    /* background: lightgray; */
    padding: 0 6px;
    font-weight: 700;
    
    
    
}

.h1{
    /* position: sticky;
    top: 120px; */
    /* display: flex; */
    text-align: center;
    width: 80%;
    max-width: 550px;
    /* background: var(--background); */
}
.difficulty-button{
  width: 135px;
  height: 40px;
  color: var(--text-bttn-dific);
  background: var(--back-option-e-mob);
  text-align: center;
  cursor: pointer;
}
.difficulty-button.active2{
  background: var(--back-active);
  color: var(--text-color-w);
  cursor: pointer;
}

.reiniciar-button{
  width: 280px;
  height: 40px;
  color: var(--text-bttn-dific);
  background: var(--back-option-e-mob);
  text-align: center;
  cursor: pointer;
}
.reiniciar-button:hover{
    background-color: var(--back-active);
    color: var(--text-color-w);
}

.projeto-button{
  width: 280px;
  height: 70px;
  color: var(--text-bttn-dific);
  background: var(--back-projt-bttn);  
  text-align: center;
  cursor: pointer;
}

button{
    border: none;
}


input#answer { 
      padding: ;
      font-size: 1em;
      font-family: 'Prompt', sans-serif;
      text-align: center;
      width: 210px;
      height: 50px;
      background-color: var(--back-answer);
      border: none;
}
input:focus {
  outline: none;
  border: solid 2px #1A1A1A;
}
/* div#answer{
    bottom: ;
} */
button#btton-check {
        display: flex;
        width: 52px;
        height: 52px;
        justify-content: center;
        align-items: center;
      border: none;
      font-size: 1em;
      background-color: var(--back-ok); 
      color: #1d1d1d;
      font-weight: bold;
      cursor: pointer;
    }
button {
    background: transparent;
}
#feedback{
    display: flex;
    justify-content: center; 
    align-items: center;
    width: 280px;
    height: 50px;
    background: var(--back-box);
    margin: 0px;
}

.inputs{
    display: flex;
    flex-direction: row;
    width: 280px;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
    background:;
    overflow:;
    
}
/* #divanswer{
    margin-top:20px;
} */
.tittle {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    width: 280px;
    height: 50px;
    background-color: var(--back-tittle);
    text-align: center;
    justify-content: center; 
    align-items: center;
   
}
.tittleHist {
    display: flex;
    font-size: 20px;
    font-weight: bold;
    width: 280px;
    height: 50px;
    background-color: var(--back-tittle);
    text-align: center;
    justify-content: center; 
    align-items: center;
    gap: 30px;  
}

.containerCounter {
    display: flex;
    flex-direction: column;
    width: ;
    height: 160px;
}
.containerHist {
    display: flex;
    flex-direction: column;
    width: ;
    height: 260px;
}
.containerCounter, .containerHist {
    overflow: hidden;
    border-radius: 10px;
}


.history-block {
  padding: 6px 10px;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.correct-block {
  background-color: #4caf50; /* verde */
}

.incorrect-block {
  background-color: #f44336; /* vermelho */
}

#respostaVisual{
    gap:10px;
    padding: px;
    box-sizing: ;
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 170px;
    overflow: auto;
    background:;
    border-radius: 7px;
}

.botaoHist{
    width: 30px;
    height: 30px;
    background: black;
}

.invisiblele{
    display: flex;
    width: 100vw;
    height: 50px;
}
.container-links-proj{
    display: flex;
    flex-direction: row;
    width: ;
    height: ;
    justify-content: center;
    background:;
    gap: 20px;
    margin-top:150px;
    margin-bottom:40px;
    
}
.container-links-proj a{
    padding: 13px 35px;
      text-decoration: none;
    background: var(--back-card-A-B-Nav);
    font-size: 13px;
    color: var(--text-color);
}

/* Remove destaque só para quem não navega por teclado
@media (pointer: fine) {
  .option:focus {
    outline: none;
  }
} */

.painel-historico{   
    display: flex;
    flex-direction: column;
    width: 80vw;
    margin-top: 50px;
    padding: 60px 200px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    backgro blackund:;
    border: solid 2px #BCD6F1;
    border-radius: 20px;
    gap:20px;
}

.painel-historico h2{
    text-align: center;
}

.bttn-hst-open, .bttn-hst-close{
    border-radius: 3px;
    font-size: 25px;
}
.bttn-hst-open{
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #e0e0e0;
    border: solid 2px #e0e0e0;
}
.bttn-hst-close{
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;    
    background: var(--back-active);
    color: var(--text-color-w);
}


.linha-historico {
  width: 100%;
  padding: 20px 40px;
  margin-bottom: 20px;
  border-radius: 20px;
  /* word-break: break-word;   <== ESSENCIAL
  overflow-wrap: anywhere; <== ajuda também */
}
.linha-historico div {
  word-break: break-word;
  overflow-wrap: anywhere;
} 

.linha-historico.correta {
  background-color: var(--back-linha-corrt); /* verde claro */
}

.linha-historico.incorreta {
  background-color: var(--back-linha-incorrt); /* vermelho claro */
}

.comparacao-visual span {
  padding: 0 1px;
  font-weight: bold;
}

.comparacao-visual .certo {
  color: var(--text-color);
}

.comparacao-visual .erro {
  color: var(--text-clr-comparacao);
  text-decoration:;
}


@media (max-width: 600px) {
    .painel-historico{
        padding: 20px 20px;
    }
    .linha-historico{
        wid50: 73%;
    }
    .container-links-proj{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        margin-bottom:100px;
    }
 
}
/* =========================================
<<<<<<<<<<<<<SOBRE O PROJETO>>>>>>>>>>>>>
========================================= */