/* Example ruleset */
p {
  color: blue;
  font-size: 16px;
}

body {
 background-image: url("https://unlikely-silver-qdad3xst.edgeone.dev/IMG_6430.jpeg");
 background-color: white;
}




 


/* 1. Link não visitado (padrão) */
a:link {
    color: ivory; /* Exemplo de azul */
    text-decoration: none;
}

/* Keeps the same color after the link is visited */
a:visited {
    color: ivory; 
}


/* 3. Quando o mouse passa por cima (Hover) */
a:hover {
    color: midnightblue; /* Exemplo de vermelho-alaranjado */
    text-decoration: underline;
}

/* 4. Link ativo (sendo clicado no exato momento) */
a:active {
    color: midnightblue; /* Exemplo de vermelho */
    
    

}
 
 
 header {font-size: 3.0rem;
    color:  ivory;
    background-color: lightsteelblue;
    margin: 2px;
    padding: 2px;
}

nav ul {font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: lightsteelblue;
  height: 40px; /* Define a altura fixa do background */
  align-items: center; /* Centraliza o conteúdo verticalmente */
  padding: 0 40px; /* Mantém um espaço nas laterais para não colar na tela */
  box-sizing: border-box;
}



main {font-size: 2.0rem;
    color: ivory;
    background-color: lightsteelblue;
    width: 50vw; /* Ocupa 100% da largura da tela */
    height: 50vh; /* Ocupa 50% da altura da tela */
    margin: 2px;
    padding: 2px;
}


h1 {font-size: 2.0rem;
    color:ivory;
    background-color:  lightsteelblue;
    margin: 2px;
    padding: 2px;
    
}

p {font-size: 1.7rem;
    color:ivory;
    background-color: lightsteelblue;
    margin: 2px;
    padding: 2px;
    
}


aside {
  width: 45%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-size: 1.5rem;
  color:ivory;
  background-color: ivory;
  margin-top: -445px; /* Altera o valor negativo para subir o elemento */
}


/* 1. Link não visitado (padrão) */
aside a:link {
    color: steelblue; /* Exemplo de azul */
    text-decoration: none;
}

/* Keeps the same color after the link is visited */
aside a:visited {
    color: steelblue; 
}


/* 3. Quando o mouse passa por cima (Hover) */
aside a:hover {
    color: navy; /* Exemplo de vermelho-alaranjado */
    text-decoration: underline;
}

/* 4. Link ativo (sendo clicado no exato momento) */
aside a:active {
    color: navy; /* Exemplo de vermelho */
    
    

}



footer {font-size: 1.0rem;
    color:ivory;
    background-color: lightsteelblue;
    margin: 2px;
    padding: 2px;
    width: 50vw; /* Ocupa 100% da largura da tela */
    height: 10vh; /* Ocupa 50% da altura da tela */
}

li {font-size: 2.0rem;
    color:lightblue;
    background-color: lemonchiffon;
    margin: 2px;
    padding: 2px;
}





h2 {
    font-size: 2.0rem;
    color:  steelblue;
   
}

h3 li {font-size: 1.25rem;
    color:navy;
    background-color: ivory;
    margin: 30px;
    padding: 50px;
       width: 50vw; /* Ocupa 100% da largura da tela */
    height: 40vh; /* Ocupa 50% da altura da tela */
}


/* 1. Link não visitado (padrão) */
h3 li a:link {
    color: steelblue; /* Exemplo de azul */
    text-decoration: none;
}

/* Keeps the same color after the link is visited */
h3 li a:visited {
    color: steelblue; 
}


/* 3. Quando o mouse passa por cima (Hover) */
h3 li a:hover {
    color: navy; /* Exemplo de vermelho-alaranjado */
    text-decoration: underline;
}

/* 4. Link ativo (sendo clicado no exato momento) */
h3 li a:active {
    color: navy; /* Exemplo de vermelho */
    
    

}


/* Contêiner principal que agrupa todas as imagens */
.galeria {
    display: flex;
    gap: 20px; /* Espaço entre as imagens */
}

/* Cada bloco individual (imagem + texto) */
.galeria .item {
    display: flex;
    flex-direction: column; /* Organiza a imagem e o texto de cima para baixo */
    align-items: center; /* Centraliza o conteúdo */
}

/* Limita o tamanho do texto para ficar proporcional à imagem */
.galeria .item p {
    max-width: 400px; /* Deve ser próximo da largura da imagem */
    text-align: center;
    margin-top: 10px; /* Espaço entre a imagem e o texto */
}




/* Muda o cursor para uma mãozinha quando o mouse passa por cima */
a img {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de aumento (zoom) e sombra ao passar o mouse */
a img:hover {
  transform: scale(1.05); /* Aumenta a imagem em 5% */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}










/* For mobile phones (screens up to 768px wide) */
@media (max-width: 768px) {
  body {
    margin: 10px;
  }
  .main-content {
    flex-direction: column; /* Stacks elements vertically */
  }
}