h1{
  text-align: center;
}
h2{
  padding-left: 50px;
  padding-right: 50px;
  font-size: 1.8em;
}
h3{
  padding-left: 50px;
  padding-right: 50px;
  font-size: 1.5em;
}
p{
  padding-left: 50px;
  padding-right: 50px;
  font-size: 1.4em;
}
body{
  background-image: url('pictures/background.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
}
canvas{
  padding: 0;
  margin: auto;
  display: block;
  border-style: solid;
  border-width: 10px;
  border-color: black;
  background-color: white;
}
iframe{
  padding: 0;
  margin: auto;
  display: block;
  width: 80%;
  height: 400px;
}
img{
  display: block;
  width: 10%;
  height: 10%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0.2em 0.2em 0.2em black;
}
figcaption{
  padding-top: 0.5em;
  font-size: 0.6em;
  text-align: center;
}
figure{
  transition: .2s;
}
figure:hover{
  transform: scale(2);
  background-color: rgba(255, 255, 255, 0.7);
}

.velkyNazev{
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.1em black;
  color: white;
  font-family: 'VT323', monospace;
  font-size: 5em;
  cursor: pointer;
}
.horniLista{
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.horniLista a{
  flex-basis: 100%;
  background-color: rgb(120, 120, 120);
  transition: transform .2s;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-family: 'VT323', monospace;
  font-size: 2em;
  color: rgb(102, 0, 51);
  text-decoration: none;
  box-shadow: 0em 0.1em 0.1em black;
}
.horniLista a:hover{
  transform: scale(1.1);
  background-color: rgb(180, 180, 180);
  font-family: 'VT323', monospace;
}
.spodniLista{
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.spodniLista a{
  flex-basis: 100%;
  transition: transform .2s;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  font-family: 'VT323', monospace;
  color: rgb(102, 0, 51);
  font-size: 1.5em;
  text-decoration: none;
  box-shadow: 0em 0.1em 0.1em black;
}
.spodniLista a:hover{
  transform: scale(1.1);
  font-family: 'VT323', monospace;
}
.obsahStranky{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  padding-top: 1em;
  padding-bottom: 2em;
  font-family: 'VT323', monospace;
  text-shadow: 0.05em 0.05em 0.05em rgb(120, 120, 120);
  box-shadow: 0.7em 0.7em 0.7em rgb(120, 120, 120);
}
.disclaimer{
  margin-top: 3em;
  font-size: 1em;
  text-align: justify;
  margin-left: 50%;
}
.externalUI{
  text-align: center;
  font-size: 1.5em;
}
.menu{
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  height: 160px;
  flex-basis: 25%;
}
.obtiznost{
  border: none;
  color: white;
  text-align: center;
  font-size: 1em;
  cursor: pointer;
  transition: transform .2s;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  font-family: 'VT323', monospace;
}
.obtiznost:hover{
  transform: scale(1.1);
}
.zdroj{
  margin-top: 3em;
  font-size: 1em;
  text-align: right;
}

.snakeVyberLista{background-color: rgb(120, 120, 240);}
.snakeVyberLista:hover{background-color: rgb(180, 180, 255);}
.fakeCanvasSnake{
  display: flex;
  align-items: center;
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 10px;
  border-color: black;
  background-color: white;
  padding-top: 0;
  margin-bottom: 2em;
}
.lehkaSnake{background-color: lightblue;}
.stredniSnake{background-color: blue;}
.tezkaSnake{background-color: darkblue;}

.tetrisVyberLista{background-color: rgb(120, 240, 120);}
.tetrisVyberLista:hover{background-color: rgb(180, 255, 180);}
.fakeCanvasTetris{
  display: flex;
  align-items: center;
  width: 240px;
  height: 360px;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 10px;
  border-color: black;
  background-color: white;
  padding-top: 0;
  margin-bottom: 2em;
}
.tetrisStart{background-color: green;}

.pac-manVyberLista{background-color: rgb(240, 240, 120);}
.pac-manVyberLista:hover{background-color: rgb(255, 255, 180);}
.pacManStart{background-color: yellow; color: black}
.fakePacManCanvas{
  display: flex;
  align-items: center;
  width: 560px;
  height: 560px;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 10px;
  border-color: black;
  background-color: blue;
  padding-top: 0;
  margin-bottom: 2em;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  width: 560px;
  height: 560px;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 10px;
  border-color: black;
}
.grid div {
  width: 20px;
  height: 20px;
}
.pac-dot {
  background-color: green;
  border: 5px solid white;
  box-sizing: border-box;
}
.wall {
  background-color: blue;
}
.power-pellet {
    background-color: green;
    border-radius: 10px;
}
.blinky {
    background-color: red;
}
.pinky {
    background-color: pink;
}
.inky {
    background-color: cyan;
}
.clyde {
    background-color: orange;
}
.pac-man {
    background-color: yellow;
    border-radius: 10px;
}
.scared-ghost {
    background-color: aquamarine;
}

@media (max-width: 1080px) {
  .horniLista{
    flex-direction: column;
    width: 100%;
  }
  .spodniLista{
    flex-direction: column;
    width: 100%;
  }
  .obsahStranky{
    width: 100%;
  }
  .disclaimer{
    padding-left: 50px;
    padding-right: 50px;
    margin-left: auto;
  }
}

#score{
  font-size: 3em;
  padding-bottom: 0;
}