#linkboxbox{
width:500px;

padding:16px;
background-color:#fff;
}

#linkbox{
padding:11px;
border:1px gray dotted;
}

body{
background-color: lavender;
letter-spacing:1px;
text-align:justify;
font-size:17px;
line-height:20px;
font-family: 'Georgia';
margin:0 auto;
border-top:6px solid #77baa2;
}

p{
text-indent:26px;
}

h1{
font-family: 'Georgia';
margin-bottom:4px;
text-align:center;
font-weight:normal;
letter-spacing:1px;
border-left:16px #77baa2 solid;
font-size:17px;
}

h2{
font-family: 'Georgia';
margin-top:40px;
font-weight:bold;
letter-spacing:1px;
font-size:11px;
font-size:25px;
text-align:center;
background-color:#92e0f7;
padding:30px
}

h3{
font-family: 'Georgia';
margin-top:0px;
font-weight:normal;
font-size:25px;
text-align:center;
background-color:#d5eef5
}


h4{
font-family: 'Georgia';
margin-top:0px;
font-weight:normal;
font-size:17px;
text-align:center;
}
a{
color:#1f1470;
text-decoration:underline;  
}

a:hover{
color:#fff;
background:#dac33b; 
}

#linkboxbox a{
margin-bottom:4px;
display:block;
padding:2px;
}

#linkboxbox a:hover{
text-align:right;
}


ul {
  list-style-type:"";
  font-family: 'Arial';
font-weight:normal;
font-size:14px;
font-size:14px;
padding:2px;
font-weight: bold;
}



.container {  display: grid;
  grid-template-columns: 0.3fr 1.5fr 1.5fr 1.5fr 0.3fr;
  grid-template-rows: 0.1fr 1.2fr 1.2fr 1.2fr 1fr;
  gap: 12px 12px;
  grid-auto-flow: row;
}

.header { grid-area: 1 / 1 / 2 / 6; }

.box2 { grid-area: 2 / 3 / 3 / 4; }

.box3 { grid-area: 2 / 4 / 3 / 5; }

.box4 { grid-area: 3 / 2 / 4 / 3; }

.box5 { grid-area: 3 / 3 / 4 / 4; }

.box6 { grid-area: 3 / 4 / 4 / 5; }

.box7 { grid-area: 4 / 2 / 4 / 3; }

.box1 { grid-area: 2 / 2 / 3 / 3; }

@media all and (-ms-high-contrast:none) {
  .container {
    display: -ms-grid;
    -ms-grid-columns: 0.3fr 1.5fr 1.5fr 1.5fr 0.3fr;
    -ms-grid-rows: 0.6fr 1.2fr 1.2fr 1fr;
  }

  .header {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
    text-align: center
  }

  .box2 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  .box3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  .box4 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  .box5 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  .box6 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  
  .box7 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
  }
  
    .box7 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }

  .box1 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
}