/*
This file is part of MunHammer's website.

MunHammer's website is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

MunHammer's website is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with Foobar. If not, see <https://www.gnu.org/licenses/>.
*/
:root {
  color-scheme: light dark;
  font-family:
    Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  --light: rgb(215 192 235);
  --dark: rgb(103 80 134);
  line-height: 1.7em;
}

p {
  font-family: "Sour Gummy";
}

.body-font {
  font-family: "Sour Gummy";
}

body {
  padding: 0;
  margin: 0;
}

header {
  padding: 1em 2em 8em;
  margin: 0 0 -13em;
  line-height: 1.2em;
  font-family:
    Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
    sans-serif;
  font-weight: bold;
}

header nav a {
  margin: 5% 5em 5% 0;
  font-size: 1.4em;
}

#content {
  padding: 5em 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
}

main {
  padding: 0 0 0 9em;
  width: 40em;
  font-size: 1.03em;
}

#tableOfContents {
  padding: 1em 0 0 3em;
}

#tableOfContents nav div h4 {
  padding: 0 0 0 1.5em;
}

#tableOfContents nav div h3 {
  padding: 0 0 0 0.5em;
}

footer {
  margin: 0;
  padding: 1em;
}

footer nav {
  display: flex;
}

footer nav div {
  margin: auto 3em auto 1em;
}

footer nav div ul {
  list-style: none;
  padding-left: 0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.favicon {
  height: 1em;
  margin: 0;
  padding: 0;
}

main h2,
main h3 {
  display: flex;
}

main h2 .section,
main h3 .section {
  display: none;
  padding: 0 1em;
}

main h2:hover .section,
main h3:hover .section {
  display: block;
}

@media (prefers-color-scheme: dark) {
  body {
    color: var(--light);
    background: var(--dark);
  }

  header {
    background: linear-gradient(180deg in oklab, rgb(60 0 80), transparent 90%);
  }

  footer {
    background-color: rgb(40 0 60);
    color: rgb(135 112 160);
  }

  a:visited {
    color: rgb(0, 202, 219);
  }

  a {
    color: rgb(0, 102, 219);
  }

  main a {
    color: rgb(56, 158, 255);
  }

  h2,
  h3,
  h4 {
    color: var(--light);
  }
}

@media (prefers-color-scheme: light) {
  body {
    color: var(--dark);
    background: var(--light);
  }

  header {
    background: linear-gradient(
      180deg in oklab,
      rgb(155 132 180),
      var(--light) 99%
    );
  }

  footer {
    background-color: rgb(175 152 200);
    color: rgb(60 0 80);
  }

  a:visited {
    color: rgb(0, 92, 109);
  }

  a {
    color: rgb(0, 0, 109);
  }

  main a:visited {
    color: rgb(0, 62, 79);
  }
}

@media (max-width: 768px) {
  #tableOfContents {
    display: none !important;
  }

  h1 {
    text-align: center;
  }

  main {
    padding: 1em;
  }
}