style.css

:root {
  --text-primary: #FFF;
  --text-secondary: #E52B50;
  --text-tertiary: #B31837;
  --text-link: #0069C2;
  --text-visited: #551A8B;

  --background-primary: #FBE1E6;
  --background-secondary: #FDEDF0;
  --background-accent: #E52B50;

  --header-background-primary: #333;
  --header-text-primary: #f2f2f2;

  --z-index-main-header: 100;
  --gutter: 0;
}

body {
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  font-family: Verdana, sans-serif;
  background-color: var(--background-primary);
}

*,
::before,
::after {
  box-sizing: border-box;
}

/* SECTION: Header and Navigational Elements */

/* The sticky <header>. */
.top-navigation {
  background-color: var(--header-background-primary);
  position: sticky;
  top: -1px;
  width: 100%;
  z-index: var(--z-index-main-header);
}

/* Organizational alignment container. */
.top-navigation .container {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  gap: var(--gutter);
}

.top-navigation .main-nav {
  margin-right: auto;
  order: 0;
  width: max-content;
}

ul.main-menu {
  align-items: center;
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0 auto 0 0;
  padding: 0;
  width: 100%;
}

ul.main-menu .main-menu-entry-container {
  flex-shrink: 0;
  position: relative;
}

.main-menu-entry-container .main-menu-entry {
  color: var(--header-text-primary);
  display: inline-flex;
  padding: 14px 16px;
  text-decoration: none;
}

.main-menu-entry-container .submenu {
  background-color: var(--header-background-primary);
  display: none;
  list-style: none;
  padding: 0 .5rem 0.5rem;
  position: absolute;
  top: 100%;
  width: max-content;
  z-index: var(--z-index-main-header);
}

.main-menu-entry-container:hover .submenu {
  display: block;
}

.submenu li {
  align-items: center;
  width: 100%;
}

.submenu li>a {
  align-items: center;
  color: var(--header-text-primary);
  display: inline-block;
  padding: 0.15rem;
  text-decoration: none;
  width: 100%;
}

.main-menu a:is(:hover, .active) {
  background-color: var(--background-accent);
  color: var(--header-text-primary);
}

.coat-of-arms-container {
  height: 0px;
  width: fit-content;
  overflow: visible;
  order: 1;
}

.coat-of-arms {
  height: 128px;
  width: 128px;
  z-index: var(--z-index-main-header);
}

/* SECTION: Main content style rules. */

/* Wraps the .main-content and any nonspecific <aside> content. */
.main-wrapper {
  display: grid;
  gap: 2em;
  grid-template-columns: 72ch calc(10em + 30px);
  justify-content: center;
  margin: 2em auto 0;
  max-width: 102ch;
  position: relative;
  width: 100%;
}

/* The main content of the page. Probably a <main> element. */
.main-content {
  margin: auto;
  width: 100%;
}

.main-content p,
.main-content ul {
  max-width: 72ch;
  margin: auto;
  margin-bottom: 1em;
}

.main-content h1 {
  margin: 0%;
  margin-bottom: 1em;
}

.main-content :is(h1, h2, h3, h4) {
  color: var(--text-secondary);
  text-align: center;
}

/* SECTION: Limited-application rules. */

.rule101 {
  font-size: 16px;
  color: var(--text-tertiary);
  margin: 0 auto;
}

.rule101 pre {
  background: none !important;
  text-align: center;
}

/* SECTION: Chat widget */

.chats {
  background-color: var(--background-secondary);
  height: auto;
  margin: 0;
  padding: 30px;
  width: 100%;
}

.chats>h3 {
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
}

.chats .button {
  border-color: var(--background-accent);
  border-radius: 10px;
  background-color: var(--background-accent);
  color: var(--header-text-primary);
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  width: 100%;
}

.chats .button:hover {
  background-color: var(--background-accent);
  color: var(--header-text-primary);
}

/* Written for the herald's pages, fix if it breaks some other table */

.main-content table,
.main-content td,
.main-content th {
  border: 0px solid;
}

.main-content table {
  margin: auto;
}

.main-content table tr {
  background-color: var(--background-secondary);
  height: 3vh;
}

.main-content blockquote,
.main-content pre {
  max-width: 66ch;
  padding-left: 1ch;
  padding-right: 1ch;
  background: var(--background-secondary);
  margin: auto;
}

/* Adjust elements to small screens */
@media screen and (max-width:73em) {
  .chats {
    width: 100%;
    text-align: center;
  }

  .main-wrapper {
    grid-template-columns: 90%;
  }

  .chats .button {
    width: 45%;
    font-size: 20px;
  }

  .rule101 {
    margin-left: 1%;
    margin-right: 1%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: 15px;
    overflow: scroll;
  }

  .coat-of-arms {
    height: 64px;
    width: 64px;
  }
}