@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gaegu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


/* Estilo padrão (modo claro) */
body {
  background-color: #fff;
  color: #000;
  transition: background-color 0.3s, color 0.3s;
}

p {
  font-weight: 500 !important; 
}
* {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif ;
}

ruby {
  font-weight: bold !important;
}
rt {
  font-weight: bold !important;
}

.caixa h5{
  font: bold;
}
h5 {
  font-weight: bold;
}
h6 {
  font-weight: bold;
}
p {
  font-weight: 100;
}

/*   FRASE TOPO  */ 


.frasetopo {
  background-color: rgb(18, 165, 50) !important;
  color: white;
  font-weight: 200;
  font-size: 14px;
  padding: 2px;
  margin: 0px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra abaixo */
  }
  

/*   FRASE TOPO  */ 





  /* cabeçalho*/
  
  .logo {
    max-width: 200px;
    }
    
  

    .menuresponsivo {
      background-color: #f4f4f4; /* Cor de fundo personalizada */
      border-bottom: 3px solid #14af55; /* Borda vermelha */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra abaixo */
    }
    .menuresponsivo .nav-link {
      color: #000000 !important; /* Cor dos links */
      font-size: 18px;
    }
    .menuresponsivo .nav-link:hover {
      color: #2ecc71 !important; /* Cor dos links ao passar o mouse */
    }
  

    .navbar-toggler {
      background-color: #f4f4f4 !important; /* Cor de fundo do botão */
      border: 2px solid #2ecc71 !important; /* Cor da borda */
    }
  
    .navbar-toggler-icon {
    filter: invert(100%); /* Deixa o ícone branco */
    }

  /* cabeçalho*/



/* CAIXA */

.espacinho{
  margin: 20px;
}
.caixa {
  border: 4px solid #2ecc71; /* Borda vermelha */
  border-radius: 50px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra abaixo */
}
.caixa h5 {
  justify-items: center;
  font-family: "Open Sans", sans-serif;
}
#sobre {
  font-size: 1rem;
  text-decoration: none;
}
.h6 h6{
  margin-top: 10px;
}

/* CAIXA */

/* FRASES */


h5 ruby rt{
  font-weight: 100;
}
h5 ruby{
  font-weight: 100;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn-copy {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 0.9rem;
}
.btn-copy:hover {
  background-color: #e0484d;
}
.btn-toggle {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-left: 10px;
}

.card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}



/* Estilo da seção Anki */
.anki-section {
  border: solid 2px rgb(99, 99, 99);
  border-radius: 15px;
 
  padding: 10px;
  opacity: 0; /* Começa invisível */
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, max-height 0.5s ease, visibility 0s 0.5s; /* Transição suave */
}

.anki-section.show {
  opacity: 1;
  display: block;
  max-height: 1000px; /* Estabelece a altura para ser visível */
  transition: opacity 0.5s ease, max-height 0.5s ease; /* Faz transição suave */
}

/* Transição suave para os botões de copiar */
.btn-copy {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-copy:hover {
  background-color: #007bff; /* Exemplo de cor ao passar o mouse */
  color: white;
  transform: scale(1.1); /* Aumenta o tamanho do botão ao passar o mouse */
}


/* FRASES */

footer {
  text-align: center; 
  padding-top: 2px;
  background-color: #039741 !important; 
  border-top: 1px solid #e9ecef;
  color: white;
  font-family: Arial, Helvetica, sans-serif !important;
}



#btnTopo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none; /* Oculto por padrão */
  z-index: 1000;
  background-color: #039741;
  border: #039741;
  border-radius: 50px ;
  padding: 10px 15px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
}


/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */

/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */

/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */



@media (min-width: 768px) and (max-width: 1024px) {
  .bv {
    font-size: 0.5rem;
    padding: 2px;
    margin: 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra abaixo */
  }
  
  .logo {
    width: 100% !important;
  }
  
  .dm {
    padding: 4px 4px;
    font-size: 0.7rem;
  }
  
  /*   iniciando...  */ 
  
  #btnp {
    font-size: 1rem;
    text-decoration: none; /* Remove o sublinhado padrão */
    position: relative; /* Necessário para manipular a linha */
    color: black; /* Cor padrão do texto */
    transition: color 0.3s ease; /* Transição suave para a cor do texto */
    line-height: 1.5; /* Ajusta a altura da linha para alinhar com o texto */
  }
  
  #ftp {
    max-width: 80%;
  }
  
  #btnTopo {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Oculto por padrão */
    z-index: 1000;
    border-radius: 50px;
    padding: 5px 10px;
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    font-size: 0.8rem !important;
  }
}

/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */

@media (min-width: 576px) and (max-width: 768px) {
  .bv {
    font-size: 0.5rem;
    padding: 2px;
    margin: 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra abaixo */
  }
  
  .logo {
    width: 100% !important;
  }
  
  .dm {
    padding: 4px 4px;
    font-size: 0.7rem;
  }
  
  /*   iniciando...  */ 
  
  #btnp {
    font-size: 0.9rem;
    text-decoration: none; /* Remove o sublinhado padrão */
    position: relative; /* Necessário para manipular a linha */
    color: black; /* Cor padrão do texto */
    transition: color 0.3s ease; /* Transição suave para a cor do texto */
    line-height: 1.5; /* Ajusta a altura da linha para alinhar com o texto */
  }
  
  #ftp {
    max-width: 80%;
  }

}

/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */

@media (max-width: 576px) {
  .bv {
    font-size: 0.4rem;
    padding: 2px;
    margin: 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra abaixo */
  }
  
  .logo {
    max-width: 28%;
  }

  .cima {
    height: 80px;
  }
  /*   iniciando...  */ 
  
  #btnp {
    font-size: 0.7rem;
    text-decoration: none; /* Remove o sublinhado padrão */
    position: relative; /* Necessário para manipular a linha */
    color: black; /* Cor padrão do texto */
    transition: color 0.3s ease; /* Transição suave para a cor do texto */
    line-height: 1.5; /* Ajusta a altura da linha para alinhar com o texto */
  }
  
  #ftp {
    max-width: 100%;
  }

}

/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */
/* ========================================================================================================================================================= */

/* Smartphones pequenos (até 480px) */
@media (max-width: 480px) {
  .bv {
    font-size: 0.4rem;
    padding: 2px;
    margin: 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra abaixo */
  }
  
  .logo {
    max-width: 28%;
  }

  .cima {
    height: 80px;
  }
  /*   iniciando...  */ 
  
  #btnp {
    font-size: 0.7rem;
    text-decoration: none; /* Remove o sublinhado padrão */
    position: relative; /* Necessário para manipular a linha */
    color: black; /* Cor padrão do texto */
    transition: color 0.3s ease; /* Transição suave para a cor do texto */
    line-height: 1.5; /* Ajusta a altura da linha para alinhar com o texto */
  }
  
  #ftp {
    max-width: 100%;
  }

}

@media (max-width: 420px)  {
  #btnp {
    font-size: 0.57rem !important;
    text-decoration: none; /* Remove o sublinhado padrão */
    position: relative; /* Necessário para manipular a linha */
    color: black; /* Cor padrão do texto */
    transition: color 0.3s ease; /* Transição suave para a cor do texto */
    line-height: 1.5; /* Ajusta a altura da linha para alinhar com o texto */
  }
}

/* Smartphones pequenos (até 320px) */
@media (max-width: 320px)  {

  .bv {
    font-size: 0.3rem;
    padding: 2px;
    margin: 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra abaixo */
  }
  
  .logo {
    max-width: 25%;
  }

  .cima {
    height: 50px;
  }
  /*   iniciando...  */ 
  
  #btnp {
    font-size: 0.45rem;
    text-decoration: none; /* Remove o sublinhado padrão */
    position: relative; /* Necessário para manipular a linha */
    color: black; /* Cor padrão do texto */
    transition: color 0.3s ease; /* Transição suave para a cor do texto */
    line-height: 1.5; /* Ajusta a altura da linha para alinhar com o texto */
  }
  
  #ftp {
    max-width: 100%;
  }
}

  /* ========================================================================================================================================================= */
  /* ========================================================================================================================================================= */
  /* ========================================================================================================================================================= */
  /* ========================================================================================================================================================= */
  /* ========================================================================================================================================================= */