#motto { /* text motivu - celý blok */
  padding-bottom: 250px;
  text-shadow: 3px 3px 10px black;
  font-weight: 10;
  font-family: tahoma;
}

#motto p#motto-title { /* text motivu, nadpis */
  text-shadow: 3px 3px 10px black;
  font-family: tahoma;
}

p#motto-text { /* text motivu - popis */
  font-weight: 10;
  font-family: tahoma;
}

h1 {
  font-family: tahoma;
  color: Black;
  font-size: 36pt;
  text-align: center;
}

h3 {
  text-shadow: 3px 3px 6px grey;
  color: #2D2A32;
  font-family: tahoma;
}

h2 {
  color: #210203;
  text-shadow: 2px 2px 10px grey;
}


.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 45% 45%;
  height: auto;
}
.grid-container:hover {
  color: #0099ff;
}
.grid-container-hacky {
  display: grid;
  justify-content: center;
  grid-template-columns: 15% 15% 15% 15% 15% 15%;
  height: auto;
}
.grid-container-hacky:hover {
  color: #0099ff;
}
.grid-container-hacky-head {
  display: grid;
  justify-content: center;
  grid-template-columns: 90%;
  height: auto;
}
.grid-item {
  text-align: center;
  background-color: #c4c4c4;
  border: 2px solid #ffffff;
  border-radius: 3px;
  font-family: tahoma;
}
.grid-item-head {
  text-align: center;
  background-color: #000000;
  border: 2px solid #ffffff;
  border-radius: 3px;
  color: #ffffff;
  font-family: tahoma;
  font-size: 20px;
}
.grid-item-head-hacky {
  text-align: center;
  background-color: #000000;
  border: 2px solid #ffffff;
  border-radius: 3px;
  color: #ffffff;
  font-family: tahoma;
  font-size: 20px;
}

@media only screen and (max-width: 650px) {
  #motto p#motto-title {font-size: 35pt;}	 	 
  #motto {padding-top: 100px;}

  .grid-item {
    font-size: 8px;
  }
  .grid-item-head {
    font-size: 10px;
  }
  .grid-item-head-hacky {
    font-size: 10px;
  }

}