@media (min-width: 1024px) {
  *{
      box-sizing: border-box;
  }
  /* botao acessibilidade */
  #accessibility-icon {
    color: #007bff; /* Cor azul */
    font-size: 35px; /* Tamanho da fonte */
    margin: 10px; /* Margem ao redor do ícone */
    transition: transform 0.3s; /* Transição suave para transformações */
  }
  #accessibility-icon:hover {
      transform: scale(1.2); /* Aumenta o ícone ao passar o mouse */
      color: #0056b3; /* Muda a cor ao passar o mouse */
      background-color: none;
  }
  .no-caret::after {
    display: none; /* Remove a seta */
  }
  .nav-link2{
    text-decoration: none;
  }
  .dropdown-item2{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    white-space: wrap;        
    display: block;
    justify-content: center;
    margin: auto;
    align-items: center;
    text-align: center;
    color: #000;
    text-decoration: none;
  }
  .dropdown-item2:hover{
    border-radius: 1em;
    color: black;
    font-weight: bold;
  }
  #item1-tutorial-acess{
    margin: 8px 0 8px 0;
    padding:8px 0 8px 0 ;
  }
  /* Parte maior do trilho */
  .trilho{
    width: 2em;
    height: 1.5em;
    background-color: #4d4d4d;
    border-radius: 150px;
    position: relative;
    cursor: pointer;
  }
  /* meia lua dentro do trilho */
  .trilho .indicador{
    width: 1em;
    height: 1.5em;
    background-color: #fff;
    border-radius: 1em 0em 0em 1em;
    transform: scale(.9);
    position: absolute;
    left: 0;
    transition: .5s;
  }
  /* Parte de fora do trilho para modo escuro */
  .botao-escuro{
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #item2-tutorial-acess{
    border-top: 1px solid gray ;
    margin: 8px 0 8px 0;
    padding:8px 0 8px 0 ;
  }
  /* Butoes diminuir e aumentar*/
  .acessibilidade-fonte{
    display: flex;
    margin: auto;
    text-align: center;
    justify-content: center;
  }
  /* Botao + e - */
  .tamanho-fonte{
    padding: .5em;
    height: auto;
    margin-right: .3em;
    font-size: 1em;
    background-color: #f47929;
    color: #fff;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 5em;
    border: none;
    cursor: pointer;
    user-select: none;
  }
  /* Fundo da tela na cor escura */
  body.dark{
    background-color: #4d4d4d ;
  }
  /* objetos em tema escuro */
  .dark{
    header{
      background-color: #4d4d4d;
    }
    .bg-light {
      background-color: #4d4d4d !important;
    }
    /* letras de link */
    .navbar-light .navbar-nav .nav-link{
      color: #fff;
    }
    /* menu acessibilidade suspenso */
    .dropdown-item2{
      color: #fff;
    }
    .trilho{
      background-color: #c3c3c3;
    }
    .trilho .indicador{
      left: 1em;
      border-radius: 0 1em 1em 0;
      background-color: #000;
    }
    /* mudanca de tamanho de fonte */
    .tamanho-fonte{
      color: black;
    }
    /* menu suspenso */
    .dropdown-menu{
      background-color: #4d4d4d;
      border: 1px solid #fff;
    }
    /* cada elemento dentro do menu suspenso */
    .dropdown-item{
      background-color: #4d4d4d;
      color: white;
    }
    /* conteudo dentro de menu suspenso */
    #item2-tutorial{
      border-top: 1px solid white ;
      border-bottom: 1px solid white ;
    }
    /* titulo em cima das perguntas  */
    h3.topicos{
      color: #fff;
    }
    /* parte de dentro da area de pergunta */
    button.accordion-button{
      background-color: gray;
      color: #fff;
      border-radius: 5em;
    }
    /* conteudo de cada opcao de pergunta */
    .accordion-body{
      color: #fff;
    }
    /* fundo quando abre as perguntas  */
    .accordion-item{
      background-color: #212121;
    }
    
    /* icone whats */
    .whats:hover{
      background-color: #7e7c7c;
    }
    /* icone face */
    a.facebook-link i{
      color: #7e7c7c;
      background-color: #fff;
    }
    /* icone insta */
    i.insta{
      background: #7e7c7c;
      color: #fff;
    }
  }
}
/* Celular*/
@media (max-width: 1023px) {
  
  #accessibility-icon {
    color: #007bff; /* Cor azul */
    font-size: 42px; /* Tamanho da fonte */
    margin: 5px; /* Margem ao redor do ícone */
    transition: transform 0.3s; /* Transição suave para transformações */
    position: fixed;
    top: 0px;
    right: 1.7em;
    display: flex;
  }
  #accessibility-icon:hover {
      transform: scale(1.2); /* Aumenta o ícone ao passar o mouse */
      color: #0056b3; /* Muda a cor ao passar o mouse */
      background-color: none;
  }
  .no-caret::after {
    display: none; /* Remove a seta */
  }
  .nav-link2{
    text-decoration: none;
  }
  .dropdown-item2{
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    white-space: wrap;        
    display: block;
    justify-content: center;
    margin: auto;
    align-items: center;
    text-align: center;
    color: #000;
    text-decoration: none;
  }
  .dropdown-item2:hover{
    border-radius: 1em;
    color: black;
    font-weight: bold;
  }
  #item1-tutorial-acess{
    margin: 8px 0 8px 0;
    padding:8px 0 8px 0 ;
  }

  /* Parte maior do trilho */
  .trilho{
    width: 2em;
    height: 1.5em;
    background-color: #4d4d4d;
    border-radius: 150px;
    position: relative;
    cursor: pointer;
  }
  /* meia lua dentro do trilho */
  .trilho .indicador{
    width: 1em;
    height: 1.5em;
    background-color: #fff;
    border-radius: 1em 0em 0em 1em;
    transform: scale(.9);
    position: absolute;
    left: 0;
    transition: .5s;
  }
  /* Parte de fora do trilho para modo escuro */
  .botao-escuro{
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #item2-tutorial-acess{
    border-top: 1px solid gray ;
    margin: 8px 0 8px 0;
    padding:8px 0 8px 0 ;
  }
}