/*estilizando o menu*/
body{
    font-family:'Poppins', sans-serif !important;
}

.container-content{
    background-color: #fff6ff;
}

.header{
    width: 100%;
    padding: 20px;
    background: linear-gradient(to left,#f36ec0, #af5fe4); 
    display: flex;
}

.header__perfil a{
    text-decoration: none;
}

.header__perfil a span{
    font-size: 35px;
}

.header__perfil button i{
    font-size: 25px;
    color: white;
}

.header__perfil{
    display: flex;
    align-items: center;
    gap: 20px;
    height: 35px;
}

.header__perfil #cadastre-se{
    background-color: transparent;
    color: white;
    font-size: 1rem;
    border: none
}

.header__perfil #cadastre-se{
    border: 2px solid white;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.header__perfil #cadastre-se:hover{
    background-color: white;
    color: #f36ec0;
    transition: all 500ms;
}

#claroescuro{
    background-color: transparent;
    border: none;
}

#claroescuro i{
    display: flex;
}

.container-content{
    width: 100%;
}

/*logo*/
.header__logo{
    width: 80px;
    height: 50px;
}

.header__logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
/*pesquisa*/
.search-and-menu{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    margin: 0 auto;
    width: 80%;
}

.header__pesquisa{
    display: flex;
    border-radius: 40px;
    padding: 10px 15px;
    background-color: #ffffff51;
    width: 60%;
    gap: 10px;
}

.header__pesquisa input{
    border: none;
    background: transparent;
    outline: none;
    caret-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    color: white;
}

.header__pesquisa input::placeholder{
    color: white;
    opacity: 0.8;
}

.header__pesquisa span{
    color: white;
    display: flex;
    align-items: center;
}

/*elementos do menu*/
.menu-list{
    display: flex;
    list-style: none;
    gap: 60px;
    margin-top: 0;
    margin-bottom: 0;
    margin: 0;
    padding-left: 0;
}

.menu-list li a{
    font-weight: 500;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    text-decoration: none;
    padding-bottom: 6px;
}

.header__perfil span{
    color: white;
    font-size: 25px;
    cursor: pointer;
    text-decoration: none;
}

#cadastrado{
    display: none;
}


/* Estilos para o modo escuro */
body.dark {
    background-color: #3E3E40;
    color: white;
}

body.dark .container-content {
    background-color: #2d2d2d; /* Fundo mais escuro */
}

body.dark .header {
    background: linear-gradient(to left, #2d2d2d, #3E3E40);
}

body.dark .header__perfil button {
    background-color: white;
    color: #3E3E40;
    border-color: white;
}

body.dark .header__perfil button:hover {
    background-color: #3E3E40;
    color: white;
}

body.dark .header__pesquisa {
    background-color: #5a5a5a;
}

body.dark .header__pesquisa input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

body.dark .menu-list li a {
    color: white;
}

body.dark .header__perfil span {
    color: white;
}



@media screen and (max-width: 49rem) {
    .header {
        padding: 15px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .header__perfil a span {
        font-size: 30px;
    }

    .header__perfil button {
        font-size: 0.9rem;
        padding: 6px 8px;
        margin-top: 10px;
    }

    .header__perfil button:hover {
        transition: background-color 300ms, color 300ms;
    }

    .header__logo {
            width: 3.75rem;  /* 60px */
            height: 2.5rem;  /* 40px */
    }
    
    .search-and-menu {
            width: 90%;
    }
    
    .header__pesquisa {
            width: 80%;
            padding: 0.5rem 0.75rem;  /* 8px 12px */
    }
    
    .header__pesquisa input::placeholder {
            font-size: 0.875rem;  /* 14px */
    }

        /* Menu */
    .menu-list {
            flex-direction: column;  /* Altera o menu para coluna em telas menores */
            gap: 2rem;  /* 32px: Menor espaçamento entre os itens do menu */
            margin-top: 1rem;  /* Espaço superior */
    }
    
        /* Itens de Menu */
    .menu-list li a {
            font-size: 1rem;  /* 16px: Reduz o tamanho da fonte para melhor legibilidade em telas menores */
            padding-bottom: 0.3125rem;  /* 5px: Menor espaço inferior */
            text-align: center;  /* Centraliza o texto dos itens de menu */
    }
    
        /* Perfil (Ícone ou nome) */
    .header__perfil span {
            font-size: 1.25rem;  /* 20px: Tamanho de fonte reduzido para o perfil */
            text-align: center;  /* Centraliza o nome/ícone do perfil */
            margin-top: 0.5rem;  /* Espaço superior */
    }
    
        /* Pesquisa */
    .header__pesquisa {
            width: 80%;  /* Aumenta a largura do campo de pesquisa */
            margin: 0 auto;  /* Centraliza a barra de pesquisa */
            padding: 12px;  /* Espaçamento maior no campo de pesquisa */
            gap: 1rem;  /* Aumenta o espaçamento entre o campo de pesquisa e o ícone de pesquisa */
    }
    
    .header__pesquisa input {
            font-size: 1rem;  /* 16px: Tamanho de fonte para input de pesquisa */
            padding: 8px;  /* Aumenta o espaço dentro do input */
            width: 100%;  /* Ocupa toda a largura disponível */
    }
    
    .header__pesquisa input::placeholder {
            font-size: 0.9rem;  /* 14px: Tamanho menor do texto do placeholder */
            opacity: 0.8;  /* Menos opacidade */
    }
    
        /* Logo */
    .header__logo {
            width: 60px;  /* Reduz a largura da logo para telas menores */
            height: 40px;  /* Reduz a altura da logo */
    }
    
    .header__logo img {
            object-fit: contain;  /* Garante que a imagem não distorça ao ajustar o tamanho */
    }
    
        /* Container de Conteúdo */
    .container-content {
            padding: 1rem;  /* Adiciona espaço interno ao container */
    }
    }