/* Splash image & abstract                                                   */
/* ========================================================================= */

#splash {
  background: var(--bg-secondary);
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0 0 2em 0;
}

#splash-text {
  flex-grow: 2;
  flex-shrink: 1;
  max-width: 40em;
  min-width: 16em;
  padding: 1em 5%;
}

#splash-img {
  flex-grow: 1;
  flex-shrink: 1;
  width: 25vw;
  max-width: 50em;
  margin: 1em;
}

#splash nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em 1.5em;
  margin: 0;
  padding: 0;
}

#splash nav li {
  display: inline-block;
}

#splash nav li a {
  color: var(--fg);
  font-weight: bold;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--accent-fg);
  text-underline-offset: .3em;
}

#splash nav li a:focus, #splash nav li a:hover {
  color: var(--accent-fg);
}

#splash h1 {
  font-size: 5rem;
}

a.link-standout {
  background: var(--accent-bg);
  color: var(--accent-text);
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
  margin: 2em auto;
  padding: 1em;
  text-align: center;
  text-decoration: none;
}

a.link-standout:focus, a.link-standout:hover {
  color: var(--accent-text);
  filter: brightness(110%);
}

/* Main content                                                              */
/* ========================================================================= */

main {
  padding: 0 2%;
}

.landing-intro {
  margin: auto;
  max-width: 40em;
  min-width: 16em;
  padding: 2em 5% 1em 5%;
}

.feature {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin: 2em 0;
}

:nth-child(odd of .feature) {
  flex-direction: row-reverse;
}

:nth-child(even of .feature) {
  flex-direction: row;
}

.feature-description {
  margin: 0 1em;
  max-width: 40em;
  min-width: 16em;
}

.feature-code {
  background-color: var(--bg-medium);
  border: 4px solid var(--accent-bg);
  font-family: var(--mono-font);
  font-size: var(--code-font-size);
  margin: 1em;
  max-width: 80ch;
  min-width: 16em;
  overflow-x: scroll;
  padding: .5em 1em;
}

.feature-code .sourceCode {
  min-width: 49ch;
}