html {
  background: url("https://i.pinimg.com/1200x/cd/41/7b/cd417b30506b0b5b3d91a0b140515cdd.jpg") no-repeat center fixed;
  background-size: cover;
}

a {
  color: white; 
  text-align: left; 
  text-decoration: none; 
  display: inline-block; 
  padding: 5px;
  border-radius: 10px;
}

a:hover { color: #F5D6D0; text-decoration: underline; background-color: hsla(260, 100%, 15%, 0.3); padding: 3px; text-align: center; display: inline-block; }

tr, td {
  border: 1px solid #f5ffcf;
  border-collapse: collapse;
  width: 200px;
  margin: 10px;
  padding: 5px;
  text-align: center;
  background-color: #faa166;
  border-radius: 15px;
}

body {
  display: block;
  margin: 48px 120px 48px 120px;
    background-image: url("photos/homebackground2.jpg");
  border-collapse: collapse;
border: 1px solid white;
  font: 12px Inconsolata;
text-align: center;
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

#main_nav { 
 font-family: VT323;
  font-size: 27px;
  line-height: 0;
  margin: 12px 120px 12px 120px;
  text-align: center;
}

h1 {
  font-family: VT323;
  font-size: 75px;
  line-height: 1.5;
  text-align: center;
  color: #F5D6D0;
  text-shadow: -2px 2px 8px #000;
  margin: 36px 120px 36px 120px;
}

h2 {
   font-family: VT323; 
  font-size: 27px; 
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto auto auto;
  padding: 2px;
  position: relative;
  min-height: 100vh;
  max-width: 1440px;
  gap: 5px;
  margin: 48px 120px 48px 120px;
}

.grid-container > div {
   background-color: rgba(199, 52, 22, 0.8);
  font: 15px Inconsolata;
  text-align: center;
  color: #F5D6D0;
  padding: 10px;
  font-size: 20px;
  overflow: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.item1 {
  grid-row: 1 / span 1;
  grid-column: 1 / span 3;
}

.item2 {
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
}

.item3 {
  grid-row: 2 / span 1;
  grid-column: 2 / span 2;
  text-align: justify;
}

flex-container {
  display: flex;
  flex-direction: row;
  color: white; 
  text-align: center;
}

.item4 {
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 300px;
    grid-row: 3 / span 1;
  grid-column: 1 / span 1;
}

.pins {
  text-align: center;
  display: flex;
  flex-direction: column;
   margin: 10px;
  padding: 5px;
  overflow: auto;
  border-collapse: collapse;
border: 1px dashed white;
}


.writingphilosophy {
  text-align: justify;
    display: flex;
  font: 12px Inconsolata;
  flex-direction: column;
   height: 300px;
   grid-row: 3 / span 1;
  grid-column: 2 / span 2;
}

.item6 {
  display: flex;
  flex-direction: row;
  color: white; 
  text-align: center;
}

.item6a {
  padding: 15px;
  gap: 10px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  overflow: auto;
    grid-row: 4 / span 1;
  grid-column: 1 / span 3;
}

.collection {
  display: flex;
  flex-direction: row;
  overflow: auto;
  background-color: rgba(199, 52, 22, 0.9);
  border-collapse: collapse;
border: 1px dashed white;
}


.footer {
  grid-row: 5 / span 1;
  grid-column: 1 / span 3;
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}