/* style.css */

body {
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #cae0ff; /* Fundo branco */
    color: #000; /* Texto preto */
    line-height: 1.6; /* Espaçamento entre linhas confortável */
}

header {
    background: linear-gradient(to top, rgba(0, 0, 0, 0), #fff);
    position: sticky;
    top: 0;
}


a:hover{
    color: rgb(0, 101, 101);
}

header .container {
    padding: 4%;
}

header nav ul {
    list-style: none;
    margin: 0px;
    padding: 10px;
    display: flex;
    justify-content: left;
}

header nav ul li {
    font-size: larger;
}

.works-li {
    padding-right: 50px;
}
.about-li {
    padding-right: 50px;
}

header nav ul li ul li{
    font-size: medium;
}

header nav ul li a {
    font-weight: bold;
    text-decoration: none; /* Remove sublinhado dos links */
    color: #000; /* Cor preta para os links */
}

header nav ul li ul li a {
    font-weight: normal;
}

header nav ul li ul li a:hover {
    font-weight: normal;
    color: #686868;
}

.submenu {
    display: none; /* Esconde o submenu inicialmente */
    position: absolute; /* Posiciona o submenu em relação ao item pai */
    padding: 10px;
    z-index: 1; /* Garante que o submenu fique acima de outros elementos */
}

header nav ul li:hover .submenu {
    display: block; /* Mostra o submenu ao passar o mouse sobre o item pai */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-family: 'Noto Serif', serif;
}

footer {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    padding: 10px 0;
    font-size: 10px;
    font-weight: lighter;
    text-align: center; /* Centraliza o texto do rodapé */
    position: fixed; /* Fixa o rodapé na parte inferior da janela */
    bottom: 0; /* Posiciona o rodapé na parte inferior */
    left: 0; /* Alinha o rodapé à esquerda */
    width: 100%; /* Ocupa toda a largura da janela */
}

.social-icons a {
    margin: 0 10px; /* Espaçamento entre os ícones sociais */
}

.logo-maior {
    max-width: 20%; /* Define a largura máxima da imagem para 100% do seu contêiner */
    height: auto; /* Ajusta a altura automaticamente para manter a proporção */
}

main {
    padding: 4%;
    display: grid; /* Utiliza grid para organizar os trabalhos */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Cria colunas responsivas */
    gap: 20px; /* Espaçamento entre os trabalhos */
}

.work {
    overflow: hidden; /* Impede que a imagem ultrapasse as bordas */
}

.work figure {
    margin: 0; /* Remove margens padrão do figure */
}

.work img {
    aspect-ratio: 16/9;
    width: 100%;
    height: 20px;
    height: auto;
    object-fit: cover;
}

.work figcaption {
    padding: 15px; /* Adiciona espaçamento interno à legenda */
    text-align: center; /* Centraliza o texto da legenda */
}

.work figcaption em {
    font-style: italic;
    font-size: 0.9em;
}

/* Estilos para o artigo de trabalho */
.work-article {
    display: flex; /* Usa Flexbox para o layout */
    flex-direction: row; /* Organiza os elementos em linha */
    gap: 20px; /* Espaçamento entre texto e mídia */
}

/* Estilos para o conteúdo de texto */
.work-article .text-content {
    flex: 1; /* O texto ocupa o espaço disponível */
    max-width: 100%;
}


/* Estilos para o conteúdo de mídia (imagens e vídeos) */
.work-article .media-content {
    flex: 1; /* A mídia ocupa o espaço disponível */
    display: flex;
    flex-direction: column; /* Organiza imagens e vídeos em coluna */
    gap: 10px; 
}

/* Estilos para imagens e vídeos dentro do conteúdo de mídia */
.work-article .media-content img {
    width: 100%;
    max-width: 100%; 
    height: auto;
}
.work-article .media-content iframe {
    width: 100%;
    height: auto;
}
.work-article a {
    text-decoration: none;
    color: #686868;
}
.work-article a:hover {
    text-decoration: none;
    color: rgb(170, 170, 170);
}
.work-article .text-content blockquote {
    font-family: 'Noto Serif', serif;
    font-style: italic;
    max-width: 75%;
}

/* Estilos para telas menores (até 768px de largura) */
@media (max-width: 768px) {
    .logo-maior {
        max-width: 40%;
    }
    header .container {
        flex-direction: column; /* Organiza o logo e o menu em coluna */
        text-align: left; /* Centraliza o conteúdo horizontalmente */
    }

    header nav ul {
        flex-direction: row; /* Organiza os itens do menu em coluna */
        align-items: center; /* Centraliza os itens do menu horizontalmente */
    }

    .submenu {
        position: static; /* Remove o posicionamento absoluto do submenu */
        width: 100%; /* Ocupa toda a largura do item pai */
        display: none;
    }
    header nav ul li:hover .submenu {
        display: none; /* Impede que o submenu seja exibido ao passar o mouse */
    }
    footer {
        font-size: 10px;
    }
    main {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
    }
    main figure {
        max-width: 100%; 
    }

    main iframe {
        height: 200px; 
    }
    .work-article {
        flex-direction: column; /* Empilha os elementos em telas menores */
    }
}

p {
    font-family: 'Noto Serif', serif;
}

footer p {
    font-family: 'Noto Sans Mono', monospace;
    font-weight: normal;
    margin: 0;
}
figcaption {
    font-family: 'Noto Serif', serif;
}