body {
  background-image: url("pizza-3.jpg");
  background-attachment: fixed;
  display: grid;
  justify-content: center;
}

.diary-grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 900px;
}

.diary-title {
  grid-column: auto / span 10;
  grid-column-start: 3;
  & img {width: 40%;}
}
  
  
nav {grid-column: auto / span 2;}

.nav-items {
  background: radial-gradient(circle,rgba(250, 224, 120, 1) 0%, rgba(224, 187, 76, 1) 100%);
  color: black;
  text-align: right;
  margin: 0px 5px 5px 0px;
  padding: 10px;
  border-radius: 30px 0px 0px 30px;
}

.nav-active {
  background: linear-gradient(90deg,rgba(46, 133, 171, 1) 0%, rgba(38, 115, 150, 1) 31%, rgba(57, 131, 163, 1) 100%);
  color: white;
  text-align: right;
  margin: 0px 5px 5px 0px;
  padding: 10px;
  border-radius: 30px 0px 0px 30px;
}

.nav-active a {text-decoration: none; color: white; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
.nav-items a {text-decoration: none; color: black; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
a {text-decoration: none;}

.nav-items:hover {
  background: linear-gradient(90deg,rgba(46, 133, 171, 1) 0%, rgba(38, 115, 150, 1) 31%, rgba(57, 131, 163, 1) 100%);
  color: white;
  & a:hover {color: white;}
}

main {
  grid-column: auto / span 10;
  background-color: OldLace;
  color: black;
  border: solid black 1px;
  height: 80vh;
  overflow: scroll;
}

.para {
  border-bottom: solid black 1px;
  margin: 0px 50px 10px 50px;
  text-align: justify;
  hyphens: auto;
  line-height: 1.5em;
  font-size: 1.05em;
}