:root {--main-color: #d32d41;}
body {background-color: #fafafa; background-image: radial-gradient(#666 0.5px, #fafafa 0.5px); background-size: 10px 10px; font-family: sans-serif; line-height: 1.4; margin: 0; padding-bottom: 4rem;}
header, footer, main {background-color: #fff; padding: 0.5rem 1rem;}
nav ul, main, footer {margin: 0 auto; max-width: 55rem;}
main {padding-bottom: 2em;}
footer {border-width: 3px 0; border-style: solid; border-color: var(--main-color); color: #444; font-size: 0.8rem;}
header h1 {font-size: 1.4rem; text-align: center;}
a, h1, h2, h3 {color: var(--main-color);}
nav {background-color: var(--main-color); border: 1px solid var(--main-color); color: #fff; font-size: 0.9rem; padding: 0 1em; position: sticky; text-align: left; top: 0;}
nav a {color: rgba(255, 255, 255, 0.8); display: inline-block; padding: 0.7em 1em; text-decoration: none;}
nav a:not([href]) {cursor: pointer;}
nav a:not([href]):after {content: " ▾";}
body:not(.js) nav li:hover ul {display: block;}
nav a:hover {color: #fff; text-decoration: underline;}
nav ul {padding: 0;}
nav li {display: inline-block; list-style-type: none; margin: 0; padding: 0;}
nav > ul > li:first-child a {color: #fff; font-size: 1rem; padding-left: 0;}
nav li ul {background-color: var(--main-color); display: none; position: absolute;}
nav li ul li {display: block;}
img {border: 1px solid #ccc; max-width: 100%;}
#menu {box-sizing: border-box; display: none; height: 1em; padding: 0; position: absolute; right: 1em; text-decoration: none; top: 1.1em; width: 1em;}
#menu:before {background: currentColor; box-shadow: 0 -0.3em, 0 0.3em; height: 0.15em; width: 100%;}
#menu:before, #menu:after {content: ''; display: block; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%);}
.mi {display: block;}
@media (max-width: 55rem) {
  nav {position: static;}
  nav li {display: block;}
  nav li ul {padding-left: 1em; position: static;}
  .ukazat {display: block !important;}
  .skryt {display: none !important;}
}
@media (min-width: 55rem) {
  [id] {scroll-margin-top: 3em;}
}
