main
{
  display: grid;
  grid-template-areas: 
  	"topbar   topbar  topbar"
  	"lsidebar content rsidebar"
  	"footer   footer  footer";
  grid-template-columns: 1fr 4fr 1fr;   /* fr = Fractional Unit */
  grid-template-rows: 200px auto 100px; /* px = pixels, auto = the rest */
}

header 
{
  grid-area: topbar;
  background-color: #CCFFFF;            /* light cyan */
}

nav
{
  grid-area: lsidebar;
  background-color: #FFCCFF;            /* light purple */
}

article
{
  grid-area: content;
  background-color: #EEEEEE;            /* very light grey */
}

div.right
{
  grid-area: rsidebar;
  background-color: #FFCCCC;            /* light red/pink */

}

footer
{
  grid-area: footer;
  background-color: #FFFFCC;            /* light yellow */
}

/*==== Let's also demonstrate a: pseudoclasses ====*/

a
{
  color: darkgreen;
}

a:hover
{
  background-color: yellow;
  transition: 0.5s;
}

a:active
{
  background-color: lightgreen;
  transition: 0.5s;
}
  

a:visited
{
  color: darkred;
}