@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@font-face {
    font-family:'MADNESS_HYPERACTIVE';
    src: url('MADNESS_HYPERACTIVE.TTF') format('truetype');
}

*{
    font-family: 'Poppins', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #ffff;
}

body{
    background-color: #1e1e1e;
}

.texto-logo{
    color: #d83333;
    font-family: 'MADNESS_HYPERACTIVE';
}

.popcorn-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    padding: 10px 20px;
}

.popcorn-nav a {
    text-decoration: none;
}

.popcorn-nav h1 {
    color: #d83333;
    font-family: 'MADNESS_HYPERACTIVE';
    font-weight: normal;
    font-size: 3rem;
    transition: all 0.3s ease-in-out;
    margin: 0;
}

.popcorn-nav h1:hover {
    color: #801f1f;
}

.navbar-nav .nav-link[href="login.html"]{
    background-color: #147a04;
    border-radius: 20px;
    color: #fff;
}

.foto-perfil {
    width: 3em;
    height: 3em;
    border-radius: 70px;
    margin: 0; 
}

.login-btn {
    background-color: #147a04;
    border-radius: 18px;
    color: #fff;
    padding: 10px;
    border: none;
    cursor: pointer;
    width: auto;
    text-decoration: none;
}

/* Estilo para o contêiner que contém a barra de rolagem */
::-webkit-scrollbar {
    width: 2px;    
    height: 5px; /* Altura da barra de rolagem */
    background-color: transparent; /* Fundo transparente para o contêiner da barra de rolagem */
    padding: 10px;
}
      
/* Estilo para o trilho (track) da barra de rolagem */
::-webkit-scrollbar-track {
     background-color: transparent; /* Fundo transparente para o trilho */
}
      
/* Estilo para o polegar (thumb) da barra de rolagem */
::-webkit-scrollbar-thumb {
    background-color: #888; /* Cor do polegar */
    border-radius: 5px; /* Borda arredondada do polegar */
}
      
/* Estilo quando o usuário passa o mouse sobre a barra de rolagem */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Cor quando o mouse está sobre ele */
}

#background-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 999;
    opacity: 1;
    visibility: visible; /* Inicialmente visível */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Adiciona transição para opacity e visibility */
}

#loader {
    border: 16px solid #f3f3f3; 
    border-top: 16px solid #d83333; 
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute; 
    top: 50%;
    left: 50%;
    margin-top: -60px; 
    margin-left: -60px; 
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Quando o #background-loader estiver invisível, esconde o #loader também */
#background-loader[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}