body{
    background-image: url(https://www.myfreetextures.com/wp-content/uploads/2014/10/IGP5374.jpg);
    background-attachment: fixed;
    background-size: cover;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 5fr; 
    grid-template-rows: .2fr 8fr 8fr 8fr 8fr 8fr 8fr 8fr 8fr; /* add rows for our header/footer */
   /* grid-template-areas: "header header header header" "clublink club clublink1 blank" "clublink club clubdes blank" "clublink club clubdes blank" "clublink club clubdes blank" "clublink club clubdes blank" "clublink club clubdes blank""clublink club clubdes blank" "clublink club clubdes blank" "clublink club clubdes blank" "clublink club clubdes blank" "footer footer footer footer" */
   grid-template-areas: "header header header header" "club clubpicture clublink1 clublink1" "club clubpicture clublink2 clublink2" "club clubpicture clublink3 clublink3" "club clubpicture clublink4 clublink4" "club clubpicture clublink5 clublink5" "club clubpicture clublink6 clublink6" "club clubpicture clublink7 clublink7" "club clubpicture clublink8 clublink8" "club clubpicture clublink9 clublink9" "footer footer footer footer"
}

header{
  grid-area: header;
  display: flex;
  justify-content: center;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color:rgba(255,255,255,0.75);
  font-weight: bolder;
  margin: 8px;
}

.left1{
 display:flex;
 width: 69%;
 margin: 8px;
 justify-content: center;
 border-style: dotted;
 font-size: larger;
 padding: 7px;
}

.left1 a:link, a:visited {
 text-decoration: none;
 color: black;
}

.left1 a:hover, a:active {
  text-decoration: underline;
  color: black;
}

.left2{
 display:flex;
 width: 69%;
 margin: 8px;
 justify-content: center;
 border-style: dotted;
 font-size: larger;
 padding: 7px;
}

.left2 a:link, a:visited {
 text-decoration: none;
 color: black;
}

.left2 a:hover, a:active {
  text-decoration: underline;
  color: black;
}

.right1{
 display:flex;
 width: 69%;
 margin: 8px;
 justify-content: center;
 border-style: dotted;
 font-size: larger;
 padding: 7px;
}

.right1 a:link, a:visited {
 text-decoration: none;
 color: black;
}

.right1 a:hover, a:active {
  text-decoration: underline;
  color: black;
}

.right2{
 display:flex;
 width: 69%;
 margin: 8px;
 justify-content: center;
 border-style: dotted;
 font-size: larger;
 padding: 7px;
}

.right2 a:link, a:visited {
 text-decoration: none;
 color: black;
}

.right2 a:hover, a:active {
  text-decoration: underline;
  color: black;
}


club{
  grid-area: club;
  display: flex;
 justify-content: center;
 align-items: center;
 font-family:Georgia, 'Times New Roman', Times, serif;
}


footer{
    grid-area: footer;
    justify-content: center;
    text-align: center;
    font-family: cursive;
}

#clublink1{
    grid-column: 3 / 4;
    grid-area: clublink1;
    grid-row: span 1;
    display: flex;
    padding: 20px;
    margin: 10px;
    background-color: rgba(255,255,255,0.4);
    font-family:Georgia, 'Times New Roman', Times, serif;
 }
  #clublink2{
   grid-column: 3 / 4;
   grid-area: clublink2;
   display: flex;
   padding: 20px;
   margin: 10px;
   background-color: rgba(255,255,255,0.4);
   font-family:Georgia, 'Times New Roman', Times, serif;
 }

 #clublink3{
   grid-column: 3 / 4;
   grid-area: clublink3;
   display: flex;
   padding: 20px;
   margin: 10px;
   background-color: rgba(255,255,255,0.4);
   font-family:Georgia, 'Times New Roman', Times, serif;
 }
 
 #clublink4{
    grid-column: 3 / 4;
    grid-area: clublink4;
    grid-row: span 1;
    display: flex;
    padding: 20px;
    margin: 10px;
    background-color: rgba(255,255,255,0.4);
    font-family:Georgia, 'Times New Roman', Times, serif;
 }
  #clublink5{
   grid-column: 3 / 4;
   grid-area: clublink5;
   display: flex;
   padding: 20px;
   margin: 10px;
   background-color: rgba(255,255,255,0.4);
   font-family:Georgia, 'Times New Roman', Times, serif;
 }

 #clublink6{
   grid-column: 3 / 4;
   grid-area: clublink6;
   display: flex;
   padding: 20px;
   margin: 10px;
   background-color: rgba(255,255,255,0.4);
   font-family:Georgia, 'Times New Roman', Times, serif;
 }
 
 #clublink7{
    grid-column: 3 / 4;
    grid-area: clublink7;
    grid-row: span 1;
    display: flex;
    padding: 20px;
    margin: 10px;
    background-color: rgba(255,255,255,0.4);
    font-family:Georgia, 'Times New Roman', Times, serif;
 }

  #clublink8{
   grid-column: 3 / 4;
   grid-area: clublink8;
   display: flex;
   padding: 20px;
   margin: 10px;
   background-color: rgba(255,255,255,0.4);
   font-family:Georgia, 'Times New Roman', Times, serif;
 }

 #clublink9{
   grid-column: 3 / 4;
   grid-area: clublink9;
   display: flex;
   padding: 20px;
   margin: 10px;
   background-color: rgba(255,255,255,0.4);
   font-family:Georgia, 'Times New Roman', Times, serif;
 }
 

 
