@font-face {
  font-family:verdana;
  src: url("font/VERDANA.ttf") format("truetype");
}




html {
  min-height: 99.5%;
  min-width: 99%;
  display: flex;
  font:inherit;
  font-family: verdana;
}

body {
  flex: 1;
  max-width: 99%;
}

.barvy{
  color:rgb(255, 0, 0);
  border: 2px solid rgb(255, 0, 0);
  background-color: rgb(0, 0, 0);
}




.hlavni {
  font:inherit;
  font-family: verdana;
  text-align: center;
  margin: auto;
  width: 100%;
  height: 100%;
  font-size:x-large;
}

@media (max-width: 1500px) {
  .hlavni {
    font:inherit;
    font-family: verdana;
    text-align: center;
    margin: auto;
    width: 100%;
    height: 100%;
    font-size:large;
  }
}




.vertikalni{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 40%;
}


.tlacitka1 {
  font:inherit;
  font-family: verdana;
  display: block;
  width: 20%;
  margin: auto;
}

#textInfo{
  width: 80%;
  margin: auto;
}

.tlacitkaInfo {
  font:inherit;
  font-family: verdana;
  display: block;
  min-height: 40px;
  width: 80%;
  margin: auto;
}

.tlacitka2 {
  font:inherit;
  font-family: verdana;
  width: 98%;
  margin: auto;
  min-height: 34px;
  text-align: center;
}


.tlacitka3 {
  font:inherit;
  font-family: verdana;
  width: 99%;
  margin: auto;
  min-height: 34px;
  text-align: left;
}


.tlacitka4 {
  font:inherit;
  font-family: verdana;
  width: 99%;
  margin: auto;
  min-height: 34px;
  text-align: left;
}

#vnitrni {
  width: 99.5%;
  padding: 5px;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-areas: "levo pravo"
}


.tlacitka{
font-size:smaller;
}

.tlacitka:disabled{
  opacity: 0.3;
}

.tlacitka:hover{
  border: 2px solid rgb(255, 255, 255);
}


.mrizka{
width: 99%;
height: 93vh;
  display: grid;
  margin:auto;
  grid-template-columns: 20% 30% 50%;
  grid-template-rows:  auto 45px 50px 32px 32px 32px;
  row-gap: 5px;
  grid-template-areas:  "postava konzole konzole" "tl1 konzole konzole" "konzole2 konzole2 konzole2"  "mz1 mz1 mz2" "mz3 mz3 mz4" "mz5 mz5 mz6" ;
}

#postava{
  grid-area: postava;
  width: 90%;
  margin: auto;
}



.cons {
  grid-area: konzole;
  height: 97%;
  width: 98%;
 padding: 6px;
  border: 2px solid;
  margin: auto;
    text-align: left;
    font-size:smaller;
}

.consMala {
  grid-area: konzole2;
  width: 99%;
 padding: 2px;
  border: 2px solid;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 5px;
    text-align: left;
}

.cons2 {
  grid-area: konzole;
  height: 96%;
  width: 97%;
  padding: 5px;
  border: 2px solid;
  margin: auto;
    text-align: left;
    font-size:smaller;
}



.mrizka2{
  width: 99%;
  height: 93vh;
    padding: 5px;
    display: grid;
    margin:auto;
    grid-template-columns: 50% 50%;
    grid-template-rows:  auto  32px;
    row-gap: 5px;
    column-gap: 5px;
    grid-template-areas:  "konzole obr"  "tl obr" ;
  }

  #obrazek{
    width: 95%;
    margin: auto;
    grid-area: obr;
  }



.dolu{
  vertical-align: bottom;
}

.nahoru{
  vertical-align: top;
}