div.wrapper {
  width: 1100px;
    margin-left:auto;
  margin-right:auto;

}

header{
     align-self:center;
     display: grid;
     grid-template-columns: 150px auto 200px;
     grid-template-areas: 'logo title lang';
  width: 1100px;
}
header > logo {
  padding-top:1rem;
  text-align: center;
  grid-area: logo;
}

header > div.title {
  text-align: center;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1.0);
  align-content: center;
  grid-area: title;
}

header > div.lang {
  text-align: center;
  padding-top: 50px;
  grid-area: lang;

}

img.zname{
 width:50px;
 box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
}

div.main{
  display:flex;
  margin-left:auto;
  margin-right:auto;
  flex-direction: column;
}

.button {
   display:inline-block;
   background-color:#dddddd;
   box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.9);
   margin-right:10px;;
   padding:10px;
}

a {text-decoration:none; color:black; font-family:inherit; font-weight:bold; font-size:inherit;}
a:hover {text-decoration:underline;}
a.red {text-decoration:none; color:red; font-family:inherit; font-weight:bold; font-size:inherit;}
a.red:hover {text-decoration:underline;}
a.big:hover{color:#0033cc; text-decoration:none;}


img {padding:0px; border-width:0px;}
img.bogr{width:1024px;border-style: solid;border-width: 1px;border-color: green;margin:10px;}


div.jimage {top:20px; left:10px; background-color:white;}
div.jruler {
  text-align:left; 
  display:flex;
  flex-flow: row wrap;
  align-items:flex-start;
}

img.points {
  width:25px;
  height:15px;
  padding:5px;
}
h1 {
 color: #336;
 font-size: 20px;
}