body {
  background-image: url(images/bgsitemap.png);
  background-color: #CBC1E9;
  color: rgb(43, 51, 167);

  
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;

  }

.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.4fr 1.4fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "header picture picture"
    "main picture picture"
    "main picture picture";
}

.header { grid-area: header; 
padding-top: 20px;
}

.main { grid-area: main; 
padding-left: 50px;
}

.picture { grid-area: picture; 

}

/* unvisited link */
a:link {
  color: rgb(95, 183, 255);
  text-decoration: none;
}

/* visited link */
a:visited {
  color: rgb(89, 62, 238);
}

/* mouse over link */
a:hover {
  color: rgb(80, 8, 169);
}

/* selected link */
a:active {
  color: rgb(199, 153, 225);
}

table.unstyledTable {
  border: 0px solid #000000;
  text-align: left;
}
table.unstyledTable td, table.unstyledTable th {
  border: 0px solid #AAAAAA;
  
}

h1 {
    margin: 0px;
    text-align: center;
}

.headerborder {
width: 200px;
margin: auto;
padding: 10px;
    
border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAqklEQVQ4T9WQQQ7DMAgEy/8f7WqrDgoEqGv10rkkZmGCY48N1lrLD2/MzPyQaAOBrBJM2a0AGtJAtaUg+yidBH5o+q49bXMWVXT9r5f85R0hMFtKVeRJuEsWuygH35CXCtIToWAh8TOpCJ7/kbI61zj9BeHGt8KBlKWCNAfUdslLBcGJmBlopSJnFV1/K4Usr3pEKwUNqmkS0OPFC2URWTU0ZdAGotp0ksETLmfgAv75oE8AAAAQZGVCRzA0QjFDMkU1NjZFODFCQjiIkzxpAAAAAElFTkSuQmCC") 7 /  7px / 0 round;
border-width:  7px;
border-style:  solid;
background-image: url(images/headr.webp);
-webkit-border-radius: 7px;
border-radius: 7px;
}    

img {
    display: block;
  margin-left: auto;
  margin-right: auto;
}

.mainbox {
background-color: rgba(255, 255, 255, 0.21);
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 20px;
}