body {
	background-color: indigo;
}

/* --- FLEX CONTAINER --- */
.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center; /* center main + asides horizontally */
  align-items: flex-start;
  gap: 10px;               /* space between items */
  flex-wrap: wrap;
  padding: 2em;
  background-color: indigo;
  color: white;
  font-family: Tahoma, Verdana, sans-serif;
}

/* --- FLEX ITEMS --- */
.wrapper > * {
  box-sizing: border-box;
  padding: 10px;
}

/* --- MAIN CONTENT --- */
.main {
  flex: 0 1 600px; /* min-width 600px, can grow */
  background: indigo;
  text-align: left;
}

/* --- EMPTY SIDEBARS --- */
.aside-1,
.aside-2 {
  flex: 1 1 100px; /* flexible width as margin */
  background: indigo; /* remove or keep if you want color */
}

/* --- IMAGE --- */
.image-container {
  text-align: center;
}

.image-container img {
  max-width: 100%;
  max-height: 60vh; /* preserves previous inline height */
  height: auto;
  display: inline-block;
}

/* --- CONTACT TEXT --- */
.contact {
  text-align: center;
}

/* --- LINKS --- */
a {
  color: hotpink;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: yellow;
}

/* --- RESPONSIVE LAYOUT --- */
@media (max-width: 800px) {
  .wrapper {
    flex-direction: column; /* stack everything vertically */
    align-items: center;
  }
  .aside-1, .aside-2 {
    flex: 1 1 100%; /* full width on small screens */
  }
  .main {
    flex: 1 1 90%; /* shrink slightly from full width */
  }
}