body {
  background: #fff;
  color: #000;
  font-family: "Courier New", monospace;
  margin: 0;
  padding: 0;
}

header {
  text-align: center;
  padding: 40px 0 20px; /* aumentato lo spazio dall’alto */
}

nav {
  display: inline-block;
}

nav a {
  display: inline-block;
  margin: 0 15px;
  padding: 10px 28px;
  font-family: "Courier New", monospace;
  font-size: 15px;
  color: black;
  text-decoration: none;
  background: white;

  /* effetto lingotto 1-bit */
  border-top: 3px solid white;
  border-left: 3px solid white;
  border-bottom: 3px solid black;
  border-right: 3px solid black;

  /* linea nera sottile esterna */
  outline: 1px solid black;
  outline-offset: -2px; /* spinge l’outline leggermente dentro per non rompere il bordo lingotto */
}

nav a:hover {
  background: black;
  color: white;

  border-top: 3px solid black;
  border-left: 3px solid black;
  border-bottom: 3px solid white;
  border-right: 3px solid white;

  outline: 1px solid black;
  outline-offset: -2px;
}





main {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* rimane verso l’alto */
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px 20px 0 20px; /* più padding in alto, meno in basso */
  gap: 40px;
}

.about {
  flex: 0 0 40%;  /* prendi il 40% dello spazio */
  max-width: 500px;
}

.image {
  flex: 0 0 60%;  /* prendi il 60% dello spazio */
}

.image img {
  width: 100%;   /* l’immagine si adatta alla sua colonna */
  height: auto;
  display: block;
}


footer {
  text-align: center;
  margin: 50px 0;
  font-size: 14px;
}