.middle {
    width: 300px;
    height: auto;

}

body {

  background-image: url('photos/gray.jpg');

  
  background-repeat: no-repeat; 
  background-position: center;  
  background-attachment: fixed; 
  
  background-size: cover; 
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;   /* keep items stacked top to bottom */
  justify-content: center;  /* vertical centering */
  align-items: center;      /* horizontal centering */
  text-align: center;
}
nav {
  display: flex;
  flex-direction: row;   /* was column */
  flex-wrap: wrap;       /* wraps on narrow screens */
  justify-content: center;
  align-items: center;
  gap: 12px;             /* space around each link and pipe */
}