// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.yomogi-regular {
  font-family: "Yomogi", cursive;
  font-weight: 400;
  font-style: normal;
}

.hachi-maru-pop-regular {
  font-family: "Hachi Maru Pop", cursive;
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: 'Catrinity';
  src: url('fonts/Catrinity.otf') format('opentype');
  src: url('fonts/Catrinity.woff') format('woff');
}

@font-face {
  font-family: 'Nishiki-teki';
  src: url('fonts/Nishiki-teki/nishiki-teki.ttf') format('truetype');
  src: url('fonts/Nishiki-teki/nishiki-teki.woff') format('woff');
}

@font-face {
  font-family: 'FairFaxHD';
  src: url('fonts/KreativeCorp/FairfaxHD.ttf') format('truetype');
  src: url('fonts/KreativeCorp/FairfaxHD.woff') format('woff');
}

/* Apply styles for smaller screens */
@media only screen and (max-width: 600px) {
  body {
    /* Adjust styles for smaller screens */
    max-width: 100%; /* Allow content to expand to full width */
  }
}


.font-fairfaxhd {
  font-family: 'FairFaxHD', sans-serif;
  margin: auto;
  max-width: 512px;
}

marquee {
  font-family: 'Catrinity', sans-serif;
  size: .5em
  margin: auto;
  max-width: 512px;
}

h1 {
  font-family: 'Noto Sans JP', 'Catrinity', sans-serif; 
  margin: auto;
  max-width: 512px;
}

body {
  font-family: 'Noto Sans JP', 'Catrinity', sans-serif; 
  margin: auto;
  max-width: 512px;
  background-image: url('bg.png');
}

.font-catrinity{
  font-family: 'Catrinity', 'Noto Sans JP', sans-serif; 
  margin: auto;
  max-width: 512px;
}

.navbar {
  background-color: #313236;
  border-radius: 2px;
  max-width: 800px;
}

.navbar a {
  font-family: 'Nishiki-teki', sans-serif; /* Use Nishiki-teki font or fallback to sans-serif */
  color: #aaa;
  display: inline-block;
  font-size: 15px;
  padding: 10px;
  text-decoration: none;
}

.navbar a:hover {
  color: #ffffff;
}

.footer {
  display: block;
  font-family: 'FairFaxHD', sans-serif;
  padding: 1em;
  background-color: lavender;
  color: black;
}

footer {
  position: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: .5em;
  font-family: 'FairFaxHD', sans-serif;
}