/* =========================
   SECTION BASE
========================= */
main {
  background-color: var(--bg-base);
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  padding-top: 40px;
}

.section {
  padding: 80px 0;
}

.section:first-of-type {
  padding-top: 0;
  scroll-margin-top: 80px;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 40px;
}

.section-text {
  padding: 0;
  text-indent: 1em;
  line-height: 1.5;
}

.section-text a {
  text-decoration: underline;
}

.section-text a:hover {
  color: var(--base);
  transition: color 0.2s ease;
}

.section-text-middle {
  padding: 0;
  text-align: center;
  list-style: none;
  line-height: 1.5;
  text-indent: 0;
}

.section-text-middle a {
  text-decoration: underline;
}

.section-text-middle a:hover {
  color: var(--base);
  transition: color 0.2s ease;
}

.section-text-middle strong {
  color: var(--base);
  -webkit-text-stroke: 2px #333;
  text-stroke: 2px #333;
  paint-order: stroke;
}

.minor-note {
  opacity: 0.7;
  word-break: keep-all;
  padding-left: 1em;
  text-indent: -1em;
}

.last-updated-date {
  word-break: keep-all;
  text-align: right;
  margin: 0 5%;
  opacity: 0.7;
}

.max-size-img {
  max-width: 100%;
  max-height: calc(100svh - 100px);
  margin: 0 auto;
  display: block;
}

.max-size-img + .max-size-img {
  margin-top: 20px;
}

@media (max-width: 720px) {
  .section-text-middle {
    text-align: left;
    text-indent: 1em;
  }
}

/* =========================
   CONTENT NAV
========================= */
.content-nav-wrapper {
  display: flex;
  justify-content: center;
}

.content-nav {
  margin-top: 40px;
  border: 5px double var(--base);
}

.content-nav a:hover {
  text-decoration: underline;
  color: var(--base);
  transition: color 0.2s ease;
}

.nav-list-container {
  display: flex;
  justify-content: center;
  margin: 0 20px;
}

.nav-list-container ol {
  list-style-type: decimal;
  padding-left: 1rem;
}

.nav-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0px;
}

/* =========================
   TABLE
========================= */
table {
  border-collapse: separate;
  border-spacing: 0 15px;
}

th,
td {
  padding: 15px 30px;
}

th {
  border-right: 2px solid rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

td a {
  text-decoration: underline;
}

td a:hover {
  color: var(--base);
  transition: color 0.2s ease;
}

.table-container {
  display: flex;
  justify-content: center;
}

@media (max-width: 720px) {
  th,
  td {
    padding: 8px 15px;
  }
}