#navigation .menu-level-1 {
  background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.9);
  transition: background-color 0.3s;
  border-radius: 1rem;
}

#navigation .menu-level-1 > li:hover {
  background-color: hsla(var(--color-primary-hover-h), var(--color-primary-hover-s), var(--color-primary-hover-l), 0.9);
  border-radius: 1rem;
}

#navigation .menu-level-1 > li{
  margin: 0.5rem 0.5rem;
}

#navigation .menu-level-1 > li > a > b{
  font-size: larger;
  font-weight: 600;
}

#navigation .menu-level-1 > li > a{
  padding: 1rem 1rem;
}

#navigation .menu-level-2 > li {
  background-color: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.9);
  transition: background-color 0.3s;
  border: none;
}

#navigation .menu-level-2 > li:hover {
  background-color: hsla(var(--color-secondary-hover-h), var(--color-secondary-hover-s), var(--color-secondary-hover-l), 0.9);
}

#navigation .menu-level-2 > li:last-child {
  border-radius: 0 0 1rem 1rem;
}

#navigation .menu-level-2 {
  border: none;
  background-color: initial;
}

#navigation .menu-level-2 > li > a{
  color: white;
  font-weight: 800;
}

h1.header-title span{
  padding: 2rem 0;
 	font-family: 'Montserrat';
  color: var(--color-primary);
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
  font-weight: 700;
  font-size: xx-large;
  overflow: visible;
}


@media (min-width: 992px) {

  #navigation > div.menu{
    display: flex;
    justify-content: center;
    max-width: 100%;
  }
  
  #navigation > div.menu > .menu-level-1 {
    width: fit-content;
  }

#navigation .menu-level-2 {
  top: calc(100%);
}

#navigation .menu-level-2 > li > a::before{
display: none;
}

h1.header-title {
  padding: 0!important;
}
h1.header-title span{
  font-size: 6rem;
}

body.in-index h1.header-title span {
  font-size: 8rem;
}

body.in-index h1.header-title span:after {
  content: 'GRAVÍRUJEME VZPOMÍNKY, KTERÉ PŘETRVAJÍ.';
  font-size: 2rem;
  position: relative;
  display: block;
    text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
}

@media (max-width: 992px) {
.unveiled .navigation-in {
  background-color: var(--color-primary);
  
}
.navigation-window-visible .navigation-in b, .navigation-window-visible .navigation-in span {
  color: white!important;
}

#navigation .menu-level-2 {
  padding: 0 1rem 1rem 1rem;
}

}