html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1,h2,h3,h4,h5,h6,.w3-slim,.w3-wide{font-family:"Segoe UI",Arial,sans-serif}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:"Times New Roman",Times,serif}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
hr{border:0;border-top:1px solid #eee;margin:20px 0}


.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.right { grid-area: right; }
.footer { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'footer footer footer footer footer footer';
	grid-template-columns
  gap: 10px;
  background-color: #f8f8ff;
  padding: 1px;
}

.grid-container > div {
  background-color: #f8f8ff;
  padding: 50px 0;
  font-size: 30px;
}


.header {
  text-align: center;
  color: #000000;
  background-color: #dcdcdc;
  border: 1px solid black;
  padding: 10px;
}

.menu {
  color: #000000;
  background-color: LightBlue;
  text-align: left;
  border: 1x solid black;
  padding: 10px;
}

.main {
  background-color: f8f8ff;
  text-align: center;
  background-size: 300px 400px;
 
  block-size: 400px;
}

.right {
  color: #000000;
  background-color: LightBlue;
  text-align: left;
  border: 1px solid black;
  padding: 10px;
}

.footer {
  color: #f8f8ff;
  font-size:12px;
  text-align: center;
  background-color: gray;
  border: 1px solid black;
  padding: 10px;
}

.center {
  margin: auto;
  text-align: center;
  width: 50%;
  border: 1px solid black;
  padding: 1px;
}

h1 {
  color: black;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}