@charset "utf-8";

:root{
  --theme-main-hue: 280;
  --theme-sub-hue: 30;
  --theme-accent-hue: 30;
  --menu-icon-current-color   : #d00;
  --menu-icon-current-bg-color: #fff;
  --header-chroma: 0.04;
  --h2-color    : oklch(88% 0.03 var(--theme-sub-hue));
  --h3-color    : oklch(92% 0.01 var(--theme-sub-hue));
}
@media screen {
  .night {
    --menu-icon-bg-color: oklch(35% 0.04 var(--theme-menu-hue));
    --h2-color: oklch(40% 0.02 var(--theme-sub-hue));
    --h3-color: oklch(35% 0.01 var(--theme-sub-hue));
  }
}
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-sword.png);
  background-blend-mode: normal, normal;
  .night & {
    background-blend-mode: hard-light, normal;
  }
  @media screen and (width <= 735px){
    background-size: auto, 80%;
  }
}