@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    margin: 0;
    background-color: #eee;
}

* {
    font-family: Montserrat;
}

:root {
    --main-color: #648e4a;
    --logo-blue: #1d3969;
    --logo-green: #007700;
    --light-green: #6aac41;
    --green-todbg: #b3e295;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Ajuste o valor conforme necessário */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplica a animação a todos os elementos dentro de #root, exceto ao home-menu */
#root > :not(#home-menu):not(#filter) {
    animation: fadeInUp 1s ease-in-out;
}

/* Adiciona a animação ao footer, se necessário */
footer {
    animation: fadeInUp 1s ease-in-out;
}
.active{
   color: #b3e295!important;
}
.protected_content{
    display: none;
}


 
 ::-webkit-scrollbar {
     width: 8px;
 }
 
 ::-webkit-scrollbar-track {
     background: #000000;
 }
   
 ::-webkit-scrollbar-thumb {
     -webkit-border-radius: 3px;
     border-radius: 3px;
     background: var(--logo-blue);
 }
 
 ::-webkit-scrollbar-thumb:hover {
     -webkit-border-radius: 3px;
     border-radius: 3px;
     background: white;
 }

 .cronometro-container {
    width: fit-content;
    padding: 10px;
    display: flex;
    gap: 35px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 20px;
    align-content: center;
  align-items: center;
  z-index: 1000;
  }

  #cronometro {
    background-color: black;
    color: var(--green-todbg);
    padding: 5px;
    border-radius: 5px;
    width: 70px;
  }

  button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--logo-blue);
  }

  @media (max-width: 1000px) {
   #question_tools{
    display: flex!important;
    flex-direction: column;
   }
   #tools {
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
   }
  }
  #root{
    min-height: 100vh!important;
  }
  #question, .option{
    user-select: none!important;
  }


  button{
    cursor: pointer!important;
  }