@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Sarala:wght@400;700&display=swap');

        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        html {
            scroll-behavior: smooth;
        }

        .topnav {
            background-color: #333;
            overflow: hidden;
        }

        .topnav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }
        .topnav ul li {
            margin: 0 20px;
        }
        .topnav ul li a {
            color: white;
            text-decoration: none;
            padding: 14px 20px;
            display: block;
            font-size: 20px;
            transition: background-color 0.3s, color 0.3s;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
        }
        .topnav ul li a:hover {
            background-color: #ddd;
            color: #333;
        }

        header {
            text-align: center;
            padding: 40px 0;
            background-color: #333;
            color: white;
        }

        h1 {
            font-size: 36px;
            font-weight: 700;
        }

        ul {
            margin: 20px 0;
            padding: 0;
            list-style-type: none;
        }

        ul li {
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }

        ul li strong {
            font-weight: 700;
        }

       footer {
            text-align: center;
            padding: 20px;
            background-color: #333;
            color: white;
            position: relative;
            bottom: 0;
            width: 100%;
            font-size: 18px;
        }

        .social-icons {
            margin-top: 12px;
        }
        .social-icons a {
            margin: 0 12px;
            color: white;
            font-size: 16px;
            transition: color 0.3s ease;
        }
        .social-icons a:hover {
            color: #ff4500;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            header h1 {
                font-size: 28px;
            }
        }



main {
    flex: 1;
    font-family: "Sarala", sans-serif;
    font-weight:  400;
    color: black; /* Define a cor do texto para branco */
    font-size: 16px; /* Define o tamanho padrão do texto */
    line-height: 1.6; /* Ajusta o espaçamento entre linhas para melhorar a leitura */
    padding: 20px; /* Adiciona um pouco de espaço dentro do main */
}

main h1, main h2, main h3 {
    font-weight: 700; /* Aplica o peso negrito para cabeçalhos */
    color: Black; /* Uma cor de destaque para títulos */
}

main p {
    margin-bottom: 10px; /* Adiciona espaço abaixo de cada parágrafo */
}

.hero-banner {
  background-image: url('PIA00024.jpg'); /* Substitua pelo caminho correto da sua imagem */
  background-size: cover;
  background-position: center;
  height: 750px; /* Ajuste a altura conforme necessário */
  display: flex;
  align-items: center; /* Alinha verticalmente */
  justify-content: flex; /* Alinha horizontalmente à direita */
  padding-right: 50px; /* Espaço à direita do texto */
  color: black; /* Cor do texto */
}

.text-box {
  background-color: rgba(0, 0, 0, 0.1); /* Fundo preto com 50% de opacidade */
  padding: 25px;
  width: 100%;
  max-width: 600px;
  text-align: left; /* Alinha o texto à esquerda */
}

.hero-banner h2 {
font-family: "Sarala", sans-serif;
font-weight:  700;
  font-size: 50px; /* Tamanho do título */
  margin: 0 0 5px 0; /* Adiciona margem inferior de 20px */
  padding: 5px 0; /* Espaçamento vertical */
}

.hero-banner h3 {
  font-size: 40px; /* Tamanho do subtítulo */
  margin: 3px 0;
  padding: 1px 0; /* Espaçamento vertical */
}
.about-me {
    display: flex; /* Ativa o flexbox */
    justify-content: space-between; /* Espaçamento entre as colunas */
    align-items: flex-start; /* Alinha itens ao topo */
    margin: 20px; /* Margem externa para separação da seção */
}

.column {
    flex: 1; /* As colunas ocupam espaços iguais */
    padding: 20px; /* Espaçamento interno */
    box-sizing: border-box; /* Inclui padding no cálculo de width/height */
}

.photo img {
    max-width: 100%; /* Garante que a imagem não exceda a largura da coluna */
    height: auto; /* Mantém a proporção da imagem */
}

.bio {
    padding-left: 20px; /* Espaçamento adicional à esquerda para a coluna do texto */
}

.email-button {
  background-color: #433786; /* Cor de fundo azul */
  color: white; /* Texto branco */
  padding: 0px 10px; /* Espaçamento interno */
  text-decoration: none; /* Remove o sublinhado */
  border-radius: 5px; /* Bordas arredondadas */
  font-size: 16px; /* Tamanho do texto */
  font-weight: bold; /* Texto em negrito */
}

.email-button:hover {
  background-color: #0056b3; /* Cor de fundo mais escura quando o mouse está sobre o botão */
}

.sidebar {
    height: 100vh; /* Altura total da viewport */
    width: 200px; /* Largura da barra lateral */
    position: fixed; /* Fixa na viewport */
    left: 0; /* Alinha à esquerda da página */
    background-color: #333; /* Cor de fundo da barra lateral */
    padding: 20px 10px; /* Espaçamento interno */
}

.sidebar a {
    display: block; /* Faz cada link ser um bloco */
    color: white; /* Cor do texto */
    padding: 10px; /* Espaçamento interno para cada link */
    text-decoration: none; /* Remove sublinhado dos links */
    font-size: 18px; /* Tamanho do texto */
}

.sidebar a:hover {
    background-color: #555; /* Cor de fundo ao passar o mouse */
}

.content {
    margin-left: 220px; /* Margem esquerda para não sobrepor a barra lateral */
    padding: 20px; /* Espaçamento interno */
    flex: 1; /* Ocupa o espaço restante */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: block;
    position: relative;
    width: 100%;
    height: 300px; /* ajuste a altura conforme necessário */
    overflow: hidden;
    text-decoration: none; /* Remove sublinhado do link */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o espaço disponível sem distorcer */
}

.title {
    position: absolute;
    top: 0; /* Inicia no topo do quadrado */
    left: 0; /* Inicia na esquerda do quadrado */
    width: 100%; /* Ocupa toda a largura do quadrado */
    height: 100%; /* Ocupa toda a altura do quadrado */
    background-color: rgba(0, 0, 0, 0.6); /* Fundo semi-transparente que cobre toda a imagem */
    color: white;
    text-align: center;
    font-size: 20px;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    padding: 0; /* Removendo qualquer padding interno para não afetar o alinhamento */
}

a {
    color: black; /* Define a cor do texto do link */
    text-decoration: none; /* Remove o sublinhado padrão */
}

a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
    color: darkblue; /* Muda a cor ao passar o mouse */
}