/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Classes */

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle right' 
    'footer footer footer footer footer footer';
  grid-column-gap: 20px; /* - if you want gap between the columns */
  grid-row-gap: 40px;
  justify-content: center;
  align-content: space-between;
} 

/* Style the header */
.header {
  grid-area: header;
  /*background-color: #f1f1f1;*/
  padding: 20px;
  text-align: center;
  font-size: 35px;
}

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

/* Style the left column */
/* Navigation */
.left {
  grid-area: left;
  /*background-color: indigo; /* Temp for Vfx */ 
  
}

.left a {
  padding: 5px;
  border: 2px solid indigo;
}

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

/* Style the right column */
.right {
  grid-area: right;
  background-color: indigo; /* Temp for Vfx */
}

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


/* Attributes */

body {
  background-color: black;
  color: white;
  font-family: Verdana;
}

mark {
  background-color: indigo;
  color: lavender;
}

img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}