body {font-family: Montserrat, Arial, Helvetica, sans-serif;
    margin: 0
}

.content-wrapper {
  padding-left: 20px; /* Adjust the value as needed */
    padding-right: 20px; /* Adjust the value as needed */
}

h1 { color: #f2f2f2;
}

h2 {
    color: #0C9CEE;
}

/* Add a background color to the top navigation */
#topheading {
  background-color: #591FCF;
    }

#seven, #eight {
  background-color: #D2FEFF;
    }

/* Have img line and h1 of the hearder appear on the same line */
header a, header h1, header nav{
 display: inline-block;
    }

/* Style the links inside the navigation bar */
nav a {
  color: #f2f2f2;
  text-align: center;
  padding:8px;
  text-decoration: none;
  font-size: 18px;
    
}

/* Style the links inside the navigation bar */
nav li {
    list-style-type: none;
    display: inline-block;
}

/* Change the color of links on hover */
nav a.hover {
    color: black;
 }

/* Make image source information smaller */
.img_r {
  font-size: x-small;
    
}

#layout {
    display: grid;
    grid-template-rows: [header-start] 5em [empty-space-start] 20px [content-start] 500px [content3-start] 350px [content4-start] 40px;
    grid-template-columns: [main] 1fr [related] 350px;
    grid-template-areas: 
        "header1 header1"
        "empty-space1 empty-space2"
        "main1 related1"
      /*   "main2 related2"
         "main3 related3"*/
         "main4 main4"
   
    }

#layout-events {
    display: grid;
    grid-template-rows: [events-header] 80px [events-start] 580px;
    grid-template-columns: [poster] 500 px [description] 1fr;
    grid-template-areas:
        "eventheader eventheader"
        "event1 eventdesc1"  
    }

#layout-events-small {
    display: grid;
    grid-template-rows: [events-header] 80px [events-start] 300px;
    grid-template-columns: [poster] 500 px [description] 1fr;
    grid-template-areas:
        "eventheader eventheader"
        "event1 eventdesc1"  
    }

layout-events-extra-large {
     display: grid;
    grid-template-rows: [events-header] 80px [events-start] 500px;
    grid-template-columns: [poster] 500 px [description] 1fr;
    grid-template-areas:
        "eventheader eventheader"
        "event1 eventdesc1"  
    }

#eventhdr { grid-area: eventheader; }
#eventone { grid-area: event1; }
#eventtwo { grid-area: eventdesc1; }

#layout-faq {
    display: grid;
    grid-template-rows: [header-start] 5em [empty-space-start] 20px [content-start] 50px [content2-start] 250px [content3-start] 250px [content4-start] 250px;
    grid-template-columns: [main] 1fr [related] 350px;
    grid-template-areas: 
        "header1 header1"
        "empty-space1 empty-space2"
        "main1 related1"
         "main2 related2"
         "main3 related3"
         "main4 related4"
    }

#layout-solar {
    display: grid;
    grid-template-rows: [header-start] 5em [empty-space-start] 20px [content-start] 1700px;
    grid-template-columns: [main] 1fr [related] 350px;
    grid-template-areas: 
        "header1 header1"
        "empty-space1 empty-space2"
        "main1 related1"
         }

#layout-laci {
    display: grid;
    grid-template-rows: [header-start] 5em [empty-space-start] 20px [content-start] 800px;
    grid-template-columns: [main] 1fr [related] 350px;
    grid-template-areas: 
        "header1 header1"
        "empty-space1 empty-space2"
        "main1 related1"
         }


#layout-greener {
    display: grid;
    grid-template-rows: [header-start] 5em [empty-space-start] 20px [content-start] 500px;
    grid-template-columns: [main] 1fr [related] 350px;
    grid-template-areas: 
        "header1 header1"
        "empty-space1 empty-space2"
        "main1 related1"
         }

#hdr { 
    grid-row-start: 1; 
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}
#spcr { 
    grid-row-start: 2; 
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
}
#topheading { grid-area: header1; }
#one { grid-area: main1; }
#two { grid-area: related1; }
/* #three { grid-area: main2; } */
/* #four { grid-area: related2; } 
#five { grid-area: main3; }
#six { grid-area: related3; }*/
#seven { grid-area: main4; }