/* General Styles */
:root {
  --page-bg-lm: #ffffff;
  --page-text-lm: #1a1a1b;
  --output-bg-lm: #dfe6e9; 
  --link-text-lm: #2980b9;
  --link-text-hover-lm: #3498db;

  --page-bg-dm: #121213;
  --page-text-dm: #d7dadc;
  --output-bg-dm: #2d3436;

  --vertical-margin: 5vh;
  --standard-margin: 1em;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--page-bg-lm);
  color: var(--page-text-lm);
  margin-top: var(--vertical-margin);
  margin-bottom: var(--vertical-margin);
}

nav {
  background-color: var(--page-bg-lm);
}

a {
  color: var(--link-text-lm);
}
a:hover {
  color: var(--link-text-hover-lm);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--page-bg-dm);
    color: var(--page-text-dm);
  }

  body #output {
    background-color: var(--output-bg-dm);
  }

  nav {
    background-color: var(--page-bg-dm);
  }
}

body > * {
  width: min(90vw, 1000px);
}

header > h1,
.input-container label,
.input-container legend,
#search,
.showcase-text,
nav h2 {
  font-weight: 700;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

/* Header Styles */

header {
  position: relative;
  text-align: center;
  margin-bottom: var(--vertical-margin);
}

@media screen and (max-width: 650px) {
  header {
    text-align: right;
  }

  body header > h1 {
    margin-top: 0.3em;
    font-size: 1.2em;
  }
}

header > h1 {
  font-size: min(3em, 7vw);
}

header #menu-btn {
  position: absolute;
  left: 0;
  background-color: white;
  border: 0;
  padding: 8px;
  border-radius: 8px;
  transform: scale(0.8);
  cursor: pointer;
}
header #menu-btn:hover {
  background-color: #d7dadc;
}

header #menu-btn svg {
  margin-top: 2px;
  margin-bottom: -2px;
}

/* Nav Styles */

nav {
  z-index: 99;
  position: fixed;
  top: calc(var(--vertical-margin) * 2 + 50px);
  bottom: 0;
  left: -200vw;
  width: 400px;
  padding-left: max(5vw, calc(50vw - 500px));
  padding-top: var(--standard-margin);
  padding-right: var(--standard-margin);
  transition: 300ms all;
  box-sizing: content-box;
}

nav > h2 {
  margin-bottom: var(--vertical-margin);
}

nav > a {
  display: block;
  font-size: 1.2em;
  padding: 0.5em;
}

nav footer {
  width: calc(100% - max(5vw, calc(50vw - 500px)));
  position: absolute;
  bottom: var(--vertical-margin);
  margin: 0;
}

.words-4ch nav > a[href="/4"],
.words-5ch nav > a[href="/"],
.words-6ch nav > a[href="/6"],
.words-7ch nav > a[href="/7"],
.words-8ch nav > a[href="/8"] {
  color: inherit;
  text-decoration: none;
}

.show-nav nav {
  left: 0;
}

main,
#footer {
  transition: 250ms all;
}

.show-nav main,
.show-nav #footer {
  filter: blur(4px) brightness(75%);
}

/* Main Styles */

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--standard-margin);
}

/* Search Styles */

#output {
  min-width: 100%;
}

.input-container {
  width: 100%;
  margin-bottom: var(--standard-margin);
}

.input-container * {
  width: 100%;
}

.input-container label,
.input-container legend {
  font-size: 1.3em;
}

.input-container input[type=text] {
  font-size: 1.3em;
  padding: 0.4em;
}

.input-container span {
  display: block;
  margin-top: 0.2em;
  font-style: italic;
}

fieldset {
  border: 0;
}

.multi-input-container {
  align-self: center;
  margin-bottom: var(--vertical-margin);
}

.multi-input-container > div {
  display: flex;
  flex-direction: row;
}

.multi-input-container > div input[type=text] {
  width: max(4em, 25%);
  text-align: center;
}

#search {
  border-radius: 1em;
  cursor: pointer;
  color: black;
  border: 0;
  margin-top: var(--standard-margin);
  margin-bottom: var(--standard-margin);
  font-size: 1.5em;
  padding: 0.5em;

  transition: 250ms all;
  background-color: #cae9f5;
  width: 80%;
}
#search:hover {
  transform: scale(1.1);
  background-color: #afdceb;
  width: 85%;
}
#search:active {
  transform: scale(1.2);
  background-color: #86c5d8;
}

#matcher-6,
#matcher-7,
#matcher-8,
#includer-6,
#includer-7,
#includer-8,
.words-4ch #matcher-5,
.words-4ch #includer-5 {
  display: none;
}

.words-6ch #matcher-6,
.words-6ch #includer-6,
.words-7ch #matcher-6,
.words-7ch #matcher-7,
.words-7ch #includer-6,
.words-7ch #includer-7,
.words-8ch #matcher-6,
.words-8ch #matcher-7,
.words-8ch #matcher-8,
.words-8ch #includer-6,
.words-8ch #includer-7,
.words-8ch #includer-8 {
  display: block;
}

@media screen and (max-width: 600px) {
  .words-7ch .includer-inputs-container input[type=text],
  .words-8ch .includer-inputs-container input[type=text] {
    padding: 0.55em 0;
    font-size: 1em;
  }
}

/* Output Styles */

#output {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--output-bg-lm);
  scroll-margin: var(--standard-margin);
}

#output > span {
  display: block;
  margin: var(--standard-margin);
  width: 5em;
  text-align: center;
}

#output > span.error {
  width: 100%;
  color: #e74c3c;
}

/* Footer Styles */

#footer-marker {
  width: 0;
  height: 0;
}

footer {
  width: 250px;
  align-self: flex-start;
  margin-top: var(--vertical-margin);
  margin-bottom: var(--vertical-margin);
  margin-left: max(5vw, calc(50vw - 500px));
}
footer.floating {
  position: fixed;
  bottom: 0;
}

footer div {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  opacity: 0.6;
  transition: 250ms all;
}
footer div:hover {
  opacity: 1.0;
}

footer div span.item {
  flex: 1;
}

footer div span.divider {
  opacity: 0.4;
  margin-right: var(--standard-margin);
}