/* globalni nastaveni pro cele stranky */
* {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;

  /* zajisti neposkakovani menu pri existenci scrollbaru */
  scrollbar-gutter: stable both-edges;

  /* promenne pro dalsi pouziti */
  --header-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
  --logo-color: rgb(166, 38, 31);
}

img {
  filter: drop-shadow(var(--header-shadow));
}

/*
  fixed pozice zajisti, ze menu zustava na miste i pri scroll zbytku okna
  background kryje scrollovatelnou oblast zajizdejici pod menu
  (vyžaduje main na zindexu -1, což ale dělá chyby jinde - vyřeším později)
*/
header {
  position: fixed;
  width: 90%;
  left: 5%;
  top: 0px;
  padding-top: 8px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1));
}

header hr {
  height: 1px;
  border: none;
  background: black;
  filter: drop-shadow(var(--header-shadow));
  position: relative;
  top: 48px;
  margin: 0;
  z-index: 1;
}

/*
  relativni pozice posune logo nad hr
  radius odstrani klikani v rozich (u kulateho obrazku)
  block + 0 + auto vystredi obrazek v nadrazenem divu
*/
.logo img {
  position: relative;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  z-index: 3;
}

/* 
  zajisti ze dite odkazu (obrazek loga) se stane ditetem predka odkazu (div loga)
  to zjednodusi vystredeni loga a schova klikaci cast odkazu
*/
.logo a {
  display: contents;
}

.logo img:hover {
  filter: sepia(1) brightness(0.8) drop-shadow(var(--header-shadow));
}

nav {
  position: absolute;
  top: 32px;
  width: 42%;
  z-index: 4;
  filter: drop-shadow(var(--header-shadow));
}

nav a {
  text-decoration: none;
  color: black;
}

#selected {
  color: var(--logo-color);
}

nav ul {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  font-size: large;
  padding-left: 2px;
  padding-right: 2px;
}

nav li:hover {
  border-bottom: 3px solid var(--logo-color);
}

.motto {
  position: absolute;
  text-align: right;
  width: 100%;
  bottom: 16px;
  z-index: 2;
  filter: drop-shadow(var(--header-shadow));
}

/* hlavní obsah stránky */
main {
  position: relative;
  width: 90%;
  left: 5%;
  top: 100px;
}