:root.light,
:root.dark {
  /* unify colors since the game is always dark mode */
  --text-primary: #0f0f0f;
  --text-primary-alt: #3f3f3f;
  --text-secondary: #fafafa;
  --text-secondary-alt: rgba(250, 250, 250, 0.5); /* half opacity */

  /* --color-bg-primary: #0a0a0a; */
  --color-bg-primary: #111111;
  --color-bg-secondary: #14171a;
  /* --color-bg-highlight: #23272a; */
  --color-bg-highlight: #121314;
  --color-border: #3f3f3f;
  --color-borderBlended: #6e6e6e;

  --footer-bgColor: #23282d;
  --footer-textColor: var(--text-secondary);
  --footer-borderColor: var(--color-border);

  --icon-color: var(--text-secondary);

  --nav-textColor: var(--text-secondary);
  --nav-textColor-alt: var(--text-secondary-alt);
  --nav-bgColor: rgb(35, 40, 45);
  --nav-borderColor: var(--color-border);
  --nav-iconColor: var(--nav-textColor);

  --nav-btn-bgColor: transparent;
  --nav-btn-bgColor-alt: rgba(88, 97, 106, 0.5);

  --nav-dropdown-borderColor: var(--color-borderBlended);
  --nav-dropdown-bgColor: var(--text-primary);
  --nav-dropdown-textColor: var(--text-secondary);
  --nav-dropdown-iconColor: var(--nav-dropdown-textColor);
  --nav-dropdown-iconColor-alt: var(--text-secondary-alt);

  --header-dropdown-borderColor: var(--nav-dropdown-borderColor);
}

#main-game-container {
  width: 100%;
  height: 100%;
  font-family: "Noto Sans", sans-serif;
  background-color: #121212;
  color: white;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-items: flex-start;
}

h1 {
  font-weight: 700;
}

h2 {
  font-weight: 600;
}

button {
  background-color: #222222;
  border-color: rgb(136, 136, 136);
  font-weight: 400;
  color: white;
}

main {
  width: 100%;
  padding: 0;
  margin: 0;
}

main,
#before-play-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

main > p {
  font-weight: 500;
}

#top-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(136, 136, 136);
}

#before-play-container {
  margin-top: 2rem;
  max-width: 750px;
}

#play-button {
  width: 200px;
  height: 100px;
  margin-top: 3rem;
}

footer {
  width: 100%;
  padding: 0.75rem;
  border-top: 1px solid rgb(136, 136, 136);
}

#copyright-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 600;
}

.logo {
  margin-left: 0.8rem;
  margin-right: 0.8rem;
  max-height: 3rem;
  display: inline;
}