body {
  background-image: url(https://i.imgur.com/9UkwnhD.gif);
  font-family: 'New Century Schoolbook';
  color: White;
  }
  

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
  align-content: center;
  padding: 10px;
  
  grid-template-areas:
    'lefttop header righttop'
    'leftpanel centerpanel rightpanel'
    'leftfoot centerfoot rightfoot';
}

.grid-container > div {
  background-color: transparent;
  color: #000;
  padding: 10px;
  font-size: 30px;
  }

.grid-container > div.lefttop {
	text-align: left;
  grid-area: 'lefttop';
    }
 
/* page header */ 
  
.grid-container > div.header {
	text-align: center;
  grid-area: 'header';
  color: white;
  border: 50px solid transparent;
  margin: auto;
  border-image: url(https://i.imgur.com/J05cawo.png) 20% round;
  text-align: center;
    }

.grid-container > div.righttop {
	text-align: right;
  grid-area: 'righttop';
    }
 
/* left panel */ 
    
.grid-container > div.leftpanel {
	text-align: left;
  grid-area: 'leftpanel';
  outline: thick ridge goldenrod;
  margin: 40px;
  padding: 10px;
  background-image: url("https://i.imgur.com/j1lHMx3.jpeg");
  }

  .grid-container > div.leftpanel > div.content {
	  outline: medium solid brown;
	  background-color: lightgoldenrodyellow;
	  justify-content: center;
	  text-align: center;
    margin: 40px;
    padding: 10px;
    color: black;
    font-size: 16px;
    }
    
  .grid-container > div.leftpanel > div.graphics {
    display: flex;
    flex-direction: column;
    background-color: rgba(255,218,185,0.5);
    color: black;
    outline: thick ridge goldenrod;
    margin: 10px;
    padding: 20px;
    font-weight: bold;
    }
      
    .grid-container > div.graphics > div.frame {
      outline: 2px ridge seagreen;
      height: 20%;
      margin: auto;
      padding:10px;
      justify-content: center;
	    text-align: center;
      }

/* center panel / main page content */
    
.grid-container > div.centerpanel {
	text-align: center;
  grid-area: 'centerpanel';
  outline: thick ridge goldenrod;
  margin: 40px;
  padding: 10px;
  background-image: url('https://i.imgur.com/NIEUQsr.jpeg');
    }
  
  .grid-container > div.centerpanel > div.content {
	  background-color: OldLace;
    outline: thick ridge Goldenrod;
    margin: 40px;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    color: Black
    }
    
  .grid-container > div.centerpanel > div.graphics {
    display: flex;
    flex-direction: row;
    background-color: rgba(255,218,185,0.5);
    color: black;
    outline: thick ridge goldenrod;
    margin: 10px;
    padding: 10px;
    font-weight: bold;
    }
      
    .grid-container > div.centerpanel > div.graphics > div.frame {
      outline: 2px ridge seagreen;
      width: 20%
      }
   
    .grid-container > div.centerpanel > div.content > h1 {
      color: darkgoldenrod;
      text-shadow: 1px 1px 2px maroon, 0 0 5px goldenrod;
      font-weight: bold;
    }
    
    .grid-container > div.centerpanel > div.content > h2 {
      color: cadetblue;
    } 
    
/* right panel */    
    
.grid-container > div.rightpanel {
	text-align: right;
    grid-area: 'rightpanel';
    outline: thick ridge goldenrod;
    margin: 40px;
    padding: 10px;
    background-image: url("https://i.imgur.com/r67DBgI.jpeg");
    }

  .grid-container > div.rightpanel > div.content {
	  outline: medium solid midnightblue;
	  background-color: Lavender;
    margin: 40px;
    padding: 20px;
    color: black;
    text-align: center;
    font-size: 16px;
    }
    
  .grid-container > div.rightpanel > .graphics {
    display: flex;
    flex-direction: row;
    background-color: rgba(255,218,185,0.5);
    color: black;
    outline: thick ridge goldenrod;
    margin: 10px;
    padding: 10px;
    font-weight: bold;
    }
      
    .grid-container > div.rightpanel > .graphics > .frame {
      outline: 2px ridge seagreen;
      width: 20%
    }

.grid-container > div.leftfoot {
	text-align: left;
    grid-area: 'leftfoot';
    }

.grid-container > div.centerfoot {
	position: sticky;
	text-align: center;
    grid-area: 'centerfoot';
    }

.grid-container > div.rightfoot {
	text-align: right;
    grid-area: 'rightfoot';
    }