@charset "UTF-8";
:root {
  --body-bg:#f6edd8;
  --cassiopeia-color-primary: #643240;
  --navbar-brand-color: #643240;
  --navbar-brand-hover-color: #643240;
}
.brand-logo > img {
  height: 6em; width: auto;
  margin: 1em 0em;
}
.container-footer {
  background-image: linear-gradient(180deg, var(--body-bg) 0%, var(--cassiopeia-color-primary) 10%);  
}
.container-footer .grid-child{
  background-color: linear-gradient(180deg, var(--body-bg) 0%, var(--cassiopeia-color-primary) 10%);  
}
.container-header {
      background-color: linear-gradient(180deg, var(--cassiopeia-color-primary) 3em, var(--body-bg) 4em);
      background-image: linear-gradient(180deg, var(--cassiopeia-color-primary) 3em, var(--body-bg) 4em);
      color: 643240 !important;
    }
    h1, h2, h3, h4, h5, h6 {
      color: #643240;
    }
    .h1, .h2, .h3, .h4, .h5, .h6 {
      color: #643240;
    }
    a, a:hover, a:focus {
      color: #643240;
    }
    .btn-info {
        background-color: #643240;
        border-color: #30638d;
        color: #fff;
    }
    .btn-primary, .btn-primary:focus, .btn-primary:hover {
        background-color: #643240;
        border-color: var(--cassiopeia-color-hover);
    }

    .btn-check:focus + .btn-info, .btn-info:focus, .btn-info:hover {
        background-color: #643240;
        border-color: #264f71;
        color: #fff;
    }
figure.shifayo > a > img, figure.ThaiYoga > a > img, figure.Yogakurse > a > img {
  height: auto;
  width: 24em;
  /*max-hight: 24em;*/
  margin: 1em auto;
}
.container-header .navbar-brand, .container-header .site-description {
  color: #643240 !important;
  font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight:bold !important;
  font-size: 2rem !important;
  letter-spacing: 0.2em !important;
  text-align: center !important;
}

.container-header .mod-menu>li.active:after,.container-header .mod-menu>li:hover:after {
    background: transparent;
}
.container-header .mod-menu>li.current:after, .container-header .mod-menu>li.parent:has(.mod-menu__sub.current):after {
    background: #fff;
    left: 0;
    right: 2px;
}
.container-header .mod-menu>li:hover:after {
    background: #f6edd8;
}
  .container-header .mod-menu :where(.mod-menu__sub:not(.mod-menu__sub *)) {
    background-color:#643240;
  }
.container-header .mod-menu .parent > ul {
    color: white;
  }
.container-header .mod-menu .mod-menu__sub .current a {
  text-decoration:underline;
}
ul.mod-menu, ul.mod-menu__sub {
      background-color:#643240;
}