@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;600&family=Zen+Kaku+Gothic+New:wght@900&display=swap');
*{
  font-family: 'Noto Sans JP', sans-serif;
    font-family: "Zen Old Mincho", serif;
}

.dark{
  filter: invert(1);
}
.light{
  filter: invert(0);
}


nav#site-navigation,  nav#site-navigation.light {
    background: rgba(255,255,255,0.8);
/* background: linear-gradient(to bottom, #ffffffd6, #ffffffdb, #ffffffb3, #ffffff1f); */
}

nav#site-navigation.dark  {
  /* dark mode color invert */
    background: rgba(255,255,255,0.6);
  /* background: rgba(0,0,0,0.6); */
}





div#navbarSupportedContent ul li {
  text-align: right;
  padding: 0.3em;
}


button.navbar-toggler {
  border:none;
}
.header-simple{
  position:fixed;
  top:0;
  z-index:100;
  width:100%;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-family: 'Noto Sans JP', sans-serif;
  backdrop-filter: blur(2px);
}


.header-simple .site-branding {
  width: 30%;
  max-width: 300px;
}
@media only screen and (max-width: 600px) {

  .header-simple .site-branding {
    width: 68%;
    max-width: 500px;
  }

  div#navbarSupportedContent.show{
    /* text-shadow: 1px 1px 3px white; */
  }
}

.header-simple .site-branding img {
  max-width: 75%;
  max-height: 100%;
  width: 15rem;
  height:4em;
  transition: all  0.7s linear;
  object-fit: contain;
}
.header-simple .site-branding img.scroll {
  width: 7rem;
}

.header-simple.scroll .site-branding img {
  height: 2.5em;
}

.header-simple .navbar-collapse {
  font-size:large;
}
.header-simple .navbar-collapse li{
  padding:0.1em 0.2em;
  font-weight:bold;
  border-bottom: 0px;
  position:relative;
}

.header-simple .navbar-collapse li a{
  text-decoration:none;
  color:black;
}

@media (min-width:781px){
  .header-simple .navbar-collapse li a{
    padding: 0.2rem 0.5rem;
    font-family: "Zen Kaku Gothic New", serif;
    font-size: 1.3rem;
  }
}
/*
.navbar-collapse li:hover{
  border-bottom: 2px solid black;
  transition: width 0.5s linear;
}
*/

.header-simple .navbar-collapse li:before{
  content:"";
  width:0%;
  bottom:0;
  left:0;
  height:3px;
  background:#000000;
  position:absolute;
  transition: all 0.2s linear;
}

.header-simple .navbar-collapse li:hover:before{
  width:100%;
}
/*
.hero-section {
  background: url("https://codingyaar.com/wp-content/uploads/body-bg.jpg")
  no-repeat;
  background-size: cover;
  height: 100vh;
  background-position-x: center;
}
*/
.navbar-toggler-beforemenu{
  word-spacing:-0.2em;
  font-weight:bold;
}
.navbar-toggler-beforemenu:before{
  content: "Menu";
  display:inline-block;
  letter-spacing:-0.05em;
}


.groundcontent{
  min-height: 100vh;
}