:root {
  --c00: #030303; /*black1 rgb(003, 003, 003)*/
  --c01: #F0F6FC; /*bluli1 rgb(240, 246, 252)*/
  --c02: #C4CEF5; /*bluli2 rgb(196, 206, 245)*/
  --c03: #8E91E8; /*bluli3 rgb(142, 145, 232)*/
  --c04: #030229; /*bluda1 rgb(003, 002, 041)*/
  --c05: #611708; /*redda1 rgb(097, 023, 008)*/
  --c06: #2E0602; /*redda2 rgb(046, 006, 002)*/
  --c07: #35075E; /*vioda1 rgb(053, 007, 094)*/
  --c08: #1C032B; /*vioda2 rgb(028, 003, 043)*/
  --c09: #12021A; /*vioda3 rgb(018, 002, 026)*/
  --c10: #FDC114; /*yelli1 rgb(253, 193, 020)*/
  --c11: #F5760E; /*yelda1 rgb(245, 118, 014)*/
  --c12: #400000; /*borda1 rgb(064, 000, 000)*/
  --c13: #FDB721; /*yelli2 rgb(253, 183, 033)*/
  --c14: #F5760E; /*orali1 rgb(245, 118, 014)*/
  --c15: #C86400; /*orada1 rgb(200, 100, 000)*/
  --c16: #D8F0FE; /*bluli4 rgb(216, 240, 254)*/
  --c17: #B7C2FC; /*bluli5 rgb(183, 194, 252)*/
}



body {
	font-family: sans-serif;
  color: var(--c01);
	border-color: var(--c03);
	max-width: 60em;
  min-height: 100vh;
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  background: url(cont/wmir.jpg);
  background-repeat: no-repeat;
  background-size: 90em;
  background-position: center;
  background-attachment:fixed;
}

/* HTML5 display-role reset for older browsers */
.headhd, 
.headex, 
.headdo, 
.navall, 
.subnav,
.mainer,
.author,
.footer {
  display: block;
}

.seitencontainer {
  box-shadow: 5em;
  display: grid;
  grid-template-rows: 52px 52px 40px 40px 2fr 1fr 15px; 
  grid-template-columns: 2fr 1fr;
  min-height: 100vh;
}

.headhd, 
.headex, 
.headdo, 
.navall, 
.subnav,
.mainer,
.author,
.footer {
  border: 1px solid;
  padding: 5px;
  opacity: 0.6;
	border-color: var(--c10);  
  background: var(--c11);
}

.navall,
.subnav,
.footer,
.headex {
  font-size: 0.8em;
  padding: 0px;
  padding-left: 5px;
}

.headhd { 
  grid-area: 1 / 1 / 2 / 2;
  border-radius: 0.1em 0.3em 0.1em 0.3em;
  border-right: 3.5px solid;
  border-bottom: 3.5px solid;
	border-color: var(--c10);
  background: url(cont/hdbn2.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
} 

.headex {
  grid-area: 2 / 1 / 3 / 3;
  border-radius: 0.1em 0.1em 0.3em 0.1em;
  border-bottom: 3.5px solid;
	border-color: var(--c10);
}

.headdo {
  grid-area: 1 / 2 / 2 / 3;
  border-radius: 0.3em 0.1em 0.3em 0.1em;
  border-left: 3.5px solid;
  border-bottom: 3.5px solid;
	border-color: var(--c10);
}

.navall {
  grid-area: 3 / 1 / 4 / 3;
  border-radius: 0.1em 0.1em 0.3em 0.1em;
  border-bottom: 3.5px solid;
	border-color: var(--c10);
  display: grid;
  grid-template-rows: 1fr 1fr; 
  grid-template-columns: 1fr 1fr;
}

.subnav {
  grid-area: 4 / 1 / 5 / 3;
  display: grid;
  grid-template-rows: 1fr 1fr; 
  grid-template-columns: 1fr 1fr;
}

.mainer {
  grid-area: 5 / 1 / 6 / 3;
  /*display: grid;
  opacity: 0.9;
  grid-template-rows: repeat(4, 1fr); 
  grid-template-columns: repeat(3, 1fr);*/
}
#c1 {
  grid-area: 1 / 1 / 2 / 2;
  background: var(--c01);
}
#c2 {
  grid-area: 1 / 2 / 2 / 3;
  background: var(--c02);
}
#c3 {
  grid-area: 1 / 3 / 2 / 4;
  background: var(--c03);
}
#c4 {
  grid-area: 2 / 1 / 3 / 2;
  background: var(--c04);
}
#c5 {
  grid-area: 2 / 2 / 3 / 3;
  background: var(--c05);
}
#c6 {
  grid-area: 2 / 3 / 3 / 4;
  background: var(--c06);
}
#c7 {
  grid-area: 3 / 1 / 4 / 2;
  background: var(--c07);
}
#c8 {
  grid-area: 3 / 2 / 4 / 3;
  background: var(--c08);
}
#c9 {
  grid-area: 3 / 3 / 4 / 4;
  background: var(--c09);
}
#c0 {
  grid-area: 4 / 1 / 5 / 2;
  background: var(--c00);
}
#c10 {
  grid-area: 4 / 2 / 5 / 3;
  background: var(--c10);
}
#c11 {
  grid-area: 4 / 3 / 5 / 4;
  background: var(--c11);
}

.author {
  grid-area: 6 / 1 / 7 / 3;
}

.footer {
  grid-area: 7 / 1 / 8 / 3;
  position: fixed;
  /*width: 55em;*/
  bottom: 0px;
}

#men00, #men10 {
  grid-area: 1 / 1 / 2 / 2;
}

#men01, #men11 {
  grid-area: 1 / 2 / 2 / 3;
}

#men02, #men12 {
  grid-area: 2 / 1 / 3 / 2;
}

#men03, #men13 {
  grid-area: 2 / 2 / 3 / 3;
}

@media (min-width: 30em) {
  .seitencontainer {
    margin: 3px;
    grid-gap: 3px 6px;
    /*grid-template: 1fr 1fr 1fr 1fr 1fr /
                   80px 22px 2fr 1fr 30px /
                   ".headhd .headhd .headex .headex .headdo"
                   ".headhd .headhd .navall .navall .navall"
                   ".subnav .mainer .mainer .mainer .mainer"
                   ".author .mainer .mainer .mainer .mainer"
                   ".footer .footer .footer .footer .footer";*/
    grid-template-rows: 85px 20px 1fr 1fr 20px; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .headhd {
    grid-area: 1 / 1 / 3 / 3;
  } 
  .headex {
    grid-area: 1 / 3 / 2 / 5;
  }
  .headdo {
    grid-area: 1 / 5 / 2 / 6;
  }
  .navall {
    grid-area: 2 / 3 / 3 / 6;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .subnav {
    grid-area: 3 / 1 / 4 / 2;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
  }
  .mainer {
    grid-area: 3 / 2 / 5 / 6;
  }
  .author {
    grid-area: 4 / 1 / 5 / 2;
  }
  .footer {
    grid-area: 5 / 1 / 6 / 6;
  }
  #men00 {
    grid-area: 1 / 1 / 2 / 2;
  }
  #men01 {
    grid-area: 1 / 2 / 2 / 3;
  }
  #men02 {
    grid-area: 1 / 3 / 2 / 4;
  }
  #men03 {
    grid-area: 1 / 4 / 2 / 5;
  }
  #men10 {
    grid-area: 1 / 1 / 2 / 2; 
  }
  #men11 {
    grid-area: 2 / 1 / 3 / 2;
  }
  #men12 {
    grid-area: 3 / 1 / 4 / 2;
  }
  #men13 {
    grid-area: 4 / 1 / 5 / 2; 
  }
}

@media (min-width: 50em) {
  .seitencontainer {
    margin: 10px;
    grid-template-rows: 85px 20px 2fr 1fr 20px; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px 20px;
  }
  .headhd {
    grid-area: 1 / 1 / 3 / 3;
  } 
  .headex {
    grid-area: 1 / 3 / 2 / 5;
  }
  .headdo {
    grid-area: 1 / 5 / 2 / 6;
  }
  .navall {
    grid-area: 2 / 3 / 3 / 6;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .subnav {
    grid-area: 3 / 1 / 4 / 2;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
  }
  .mainer {
    grid-area: 3 / 2 / 5 / 6;
  }
  .author {
    grid-area: 4 / 1 / 5 / 2;
  }
  .footer {
    grid-area: 5 / 1 / 6 / 6;
  }
  #men00 {
    grid-area: 1 / 1 / 2 / 2;
  }
  #men01 {
    grid-area: 1 / 2 / 2 / 3;
  }
  #men02 {
    grid-area: 1 / 3 / 2 / 4;
  }
  #men03 {
    grid-area: 1 / 4 / 2 / 5;
  }
  #men10 {
    grid-area: 1 / 1 / 2 / 2; 
  }
  #men11 {
    grid-area: 2 / 1 / 3 / 2;
  }
  #men12 {
    grid-area: 3 / 1 / 4 / 2;
  }
  #men13 {
    grid-area: 4 / 1 / 5 / 2; 
  }
}