/* Takhle se dělá více řádkový 

komentář
menu pro nápovědu Ctrl + Space
komentář
*/

body {
display: grid;
grid-template-columns: auto 120px;
}

h1, h2 {
color: white;
background-color: black;
}

table {
border: 1px solid black;
border-collapse: collapse;
}
td {
text-align: center;
width: 8%;
}
th, tr:nth-child(odd)  {
background-color: #DDD0DD;
}
th {
background-color: #DDDDDD;
}
@font-face {
  font-family: "ancient";
  src: url("../font/ancient.ttf") format("truetype");
}
@font-face {
  font-family: "enchanting";
  src: url("../font/minecraft-enchantment.ttf") format("truetype");
}
header, footer {
background-color: #FF0000;
color: #00FFFF;
}
nav a {
color: white;
background-color: black;
display: inline-block;
text-decoration: none;
border: 3px outset lime;
padding: 2px 10px;
width: 70px;
margin: 10px;
}

nav a:hover {
color: black;
background-color: white;
border: 3px outset magenta;
}
nav a:active {
color: orange;
background-color: white;
border: 3px inset yellow;
margin: 15px;
}

header {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start:1;
grid-row-end:2;
}

section {
grid-column: 1 / 2; // 1 / span 1
grid-row:2 / 3; // 2 / span 1
}

nav {
grid-column: 2 / 3;
grid-row:2 / 3;
}

footer {
grid-column: 1 / 3;
grid-row:3 / 4;
}

header, section, nav, footer {
border: 2px solid blue;
}

body {
font-family: "ancient";
}