:root {
  --red: #ff0000;
  --yellow: #ffff00;
  --blue: #0000ff;
  --white: #ffffff;
  --jp-red: #ffccc9;
  --dark-grey: #2e5339;

  --base-font-size: 16px;
  --text-scale-2x: 2;
  --text-scale-xl: 1.8;
  --text-scale-lg: 1.5;
  --text-scale-md: 1;
  --text-scale-sm: 0.8;
  --text-scale-xs: 0.5;

  --text-2x: calc(var(--base-font-size) * var(--text-scale-2x));
  --text-xl: calc(var(--base-font-size) * var(--text-scale-xl));
  --text-lg: calc(var(--base-font-size) * var(--text-scale-lg));
  --text-md: calc(var(--base-font-size) * var(--text-scale-md));
  --text-sm: calc(var(--base-font-size) * var(--text-scale-sm));
  --text-xs: calc(var(--base-font-size) * var(--text-scale-xs));

  --base-line-height: 1.5;
  --leading-loose: calc(var(--base-line-height) * 1.2);
  --leading-normal: var(--base-line-height);
  --leading-tight: calc(var(--base-line-height) * 0.8);

  --space-2xl: 32rem;
  --space-xl: 24rem;
  --space-lg: 16rem;
  --space-md: 12rem;
  --space-sm: 8rem;
  --space-xs: 4rem;
  --space-2xs: 2rem;
  --space: 1rem;
}

body {
  font-size: var(--text-md);
  line-height: var(--base-line-height);
}

#site-name {
  text-align: center;
}

#container {
  display: flex;
  flex-direction: column;
}

.fire {
  background-color: #ff0000;
  color: #ffff00;
}

.snow {
  background-color: #0000ff;
  color: #ffffff;
}

.jp-red {
  background-color: #ffccc9;
  color: #2e5339;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.apology {
  text-align: center;
}

.bg {
  position: fixed;
  z-index: -1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
}

.bg-blue {
  background-color: #0000ff;
  width: 50%;
  height: 100%;
}

.bg-red {
  background-color: #ff0000;
  width: 50%;
  height: 100%;
}

.split-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-title-row {
  justify-content: center;
  display: flex;
}

.split-title-left {
  display: flex;
  justify-content: flex-end;
  width: 50%;
  flex-grow: 1;
}

.split-title-right {
  display: flex;
  justify-content: flex-start;
  width: 50%;
  flex-grow: 1;
}

.hero {
  margin-top: 12.5%;
}

#gallery {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
}

.readable-background {
  background-color: rgba(256, 256, 256, 0.75);
}

.date-entries {
  list-style: none;
}

.date-entries > li {
  margin: 1rem;
}

.music-entries {
  list-style: none;
  padding: 0;
}

.music-entries > li {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-entries {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.game-entries > li {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.menu {
  width: 100%;
  padding: 0rem 1rem;
}

ul.menu-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  gap: 2rem;
}

.book {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

ul.book {
  padding: 0;
  list-style: none;
}

.book img {
  width: 400px;
}

.book .page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 600px) {
  .book img {
    width: 500px;
  }

  .book .page {
    padding: 2rem 8rem;
  }

  .book .page .page-text {
    width: 30ch;
  }
}

.book .page .page-text {
  width: 25ch;
  font-weight: 500;
  text-align: center;
}

.about-me-entries {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about-me-entries > li {
  padding: 1rem 2rem;
  text-align: center;
}