h1{
    font-family: sArial, Helvetica, sans-serif;
    color: darkgrey;
}

h2{
    font-family:Arial, Helvetica, sans-serif;
    color: darkgrey;
}

h3{
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    color: darkgrey;
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    color: darkgrey;
}

h5 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    color: darkgrey;
}

body {
    background-color: black;
    text-decoration-color: antiquewhite;
    color: aquamarine;
}
.grid1text h4 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}

.grid1text p {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    text-align: justify;    
}

li {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left; 
}

p {
    font-family: Arial, Helvetica, sans-serif;
}

a {
    font-family: Arial, Helvetica, sans-serif;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXX */
/* REsponsable GRID... copied from W3schools examples*/
{
    box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.5em;
    color: azure;
    color: darkgrey; 
    margin: 0;
}
.topnav {
  overflow: hidden;
  background-color: black;
}

.topnav a {
  float: left;
  color: darkviolet;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: blue;
  color: black;
}

.topnav a.active {
  background-color: darkviolet;
  color: black;
}
/* Style the header */
.header {
  grid-area: header;
  background-color: black;
  padding: 30px;
  text-align: center;
  font-size: 35px;
    color: darkgrey;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
  'header header header header header header' 
  'left left middle middle right right' 
  'footer footer footer footer footer footer';
  /* grid-column-gap: 10px; - if you want gap between the columns */
    background-color: black;
    color: darkgray;
} 

.left,
.middle,
.right {
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
    background-color: black;
}

/* Style the left column */
.left {
  grid-area: left;
}

/* Style the middle column */
.middle {
  grid-area: middle;
}

/* Style the right column */
.right {
  grid-area: right;
}

/* Style the footer */
.footer {
  grid-area: footer;
  background-color: black;
  padding: 10px;
  text-align: center;
    color: darkgrey;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
    'header header header header header header' 
    'left left left left left left' 
    'middle middle middle middle middle middle' 
    'right right right right right right' 
    'footer footer footer footer footer footer';
}
    
/*
    body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
} */