/* General Body Styling */
:root {
  --dark-bg-color: #333;
  --light-bg-color: #f9f9f9;
  --hover-bg-color: #575757;
  --text-color: black;
}

* {
  /* margin: 0px; */
  /* padding: 0px; */
  box-sizing: border-box;
  scroll-padding-top: calc(60px);
  /* Adjust this value to match your sticky header's height */
}

body {
  margin: 0px;
  padding: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: background-image 3s ease-in-out;
  font-family: 'IBM Plex Sans', sans-serif;

  color: var(--text-color)
}

main {
  /* background-color: #0575b7; */
  /* background-color: #ffc603ff; */
  margin-right: auto;
  margin-left: auto;
  max-width: 21cm;
}

article {
  padding-top: 1vh;
  padding-left: 5%;
  padding-right: 15%;
  padding-bottom: 12vh;
  background-color: rgba(255, 255, 255, 0.9);
  scroll-padding-top: 70px;
  /* Adjust this value to match your sticky header's height */
}

/* article p:last-of-type { */
/*     margin-bottom: 0px; */
/*     padding-bottom: 1em; */
/* } */
header {
  background-color: rgba(255, 255, 255, 1);
}

footer {
  background-color: rgba(255, 255, 255, 0.5);
}

.empty {
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0);
}

h1,
h2,
h3 {
  clear: both;
  font-weight: normal;
}

h1 {
  font-size: xx-large;
}

h2 {
  font-size: x-large;
  padding-top: 1em;
}

h3 {
  font-size: larger;
  padding-top: .7em;
}

blockquote {
  border-left: 4px solid green;
  padding-left: 15px;
  color: #828282;
  font-style: italic;
}





.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 0.5em 1em; */
  top: 0;
  position: sticky;
}

.site-header a {
  text-decoration: none;
  padding: 0.5em 1em;
  color: var(--text-color)
}

.site-header nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.site-header nav ul li {
  margin: 0;
}

/* Hover effect for each menu item */
.site-header nav ul li a:hover,
.site-header nav ul li a:focus {
  /* background-color: green; */
}

.site-logo {
  /* background-color: green; */
  /* padding-top: 5px; */
  /* height: 60px; */
  /* width: 60px; */
}

.site-logo img {
  height: 60px;
  /* Adjust logo size as needed */
  width: auto;
  padding: 5px;
}


@media screen and (max-width: 650px) {
  .site-header nav ul {
    display: block;
  }

  .site-header {
    font-size: smaller;
  }

  .site-header a {
    padding: 0em 1em;
  }

  * {
    scroll-padding-top: calc(2em + 60px);
    /* Adjust this value to match your sticky header's height */
  }
}

/* ibm-plex-sans-jp-regular - japanese_latin_latin-ext */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/ibm-plex-sans-jp-v5-japanese_latin_latin-ext-regular.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}