html, body {
    margin: 0;
    padding: 0;
}

main {
    padding:1vw
}


.nav-bar {
display: flex;
justify-content: center; 
align-items: center;
padding: 15px 30px;
background-color: #3B176D; 
}

    
.nav-links {
display: flex;
align-items: center;
gap: 20px; 
}


.nav-links .nav-btn {
background-color: #3B176D; 
color: white;  
border: 2px solid black;
text-decoration: none; 
padding: 8px 20px;   
display: inline-flex;    
align-items: center;
justify-content: center;
border-radius: 6px;    
cursor: pointer;         
transition: background-color 0.2s ease; 
}

.nav-links .nav-btn:hover {
background-color: #60428b;
}

.grid-container {
  display: grid;
  /* Creates 4 equal columns */
  grid-template-columns: repeat(4, 1fr); 
  /* Creates 5 equal rows */
  grid-template-rows: repeat(5, 1fr);    
                           
  
  /* Give the container a height so the 5 rows are visible */
  height: 500px; 
}

/* Optional styling just to see the grid cells clearly */
.grid-item {
  padding: 10px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-weight: bold;
}

figure {
  margin-inline: auto;
  text-align: center; /* Centers the inner image and caption text */
}

.return-home {
display: inline-block;
padding: 20px 40px;
background-color: #3B176D;
color: white;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
border: 2px solid black;
}

.return-home:hover {
background-color: #60428b;
}

footer {
    background-color:#3B176D;
    text-align: center;
    color: white;
}