/* part i stole from nycki */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1, 'cv06' 1, 'cv08' 1, 'cv11' 1;
  font-weight: 400;
  font-size: 12pt;

  --color-bg:     #202020;
  --color-text:   #ffffff;
  --color-accent: #c0c0c0;
  --color-gray:   #808080;

  --color-red:    #ff4040;
  --color-yellow: #ffc040;
  --color-green:  #40ff80;
  --color-blue:   #4080ff;
  --color-purple: #8040ff;
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, Inter, sans-serif; }
}

/* big pieces of styling */
body {
  max-width: 60em;
  min-height: 90vh;
  padding: 2rem 4rem;
  margin: 0 auto 0;
  background: linear-gradient(180deg, #303030 0%, #101010 100%);
  background-attachment: fixed;
  color: var(--color-text);
  display: grid;
  grid-template-rows: auto 1fr auto;
  text-shadow: #00000080 1px 2px 1px;
}
main {
  flex-grow: 1;
}

/* tables */
table.table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  /*border-collapse: collapse;*/
}
table.table td, table.table th {
  padding: 0.25em;
  box-shadow: 0px 5px 5px #10101080, inset 0px 1px 1px #ffffff40, inset 0px -1px 1px #00000040;
  border-radius: 5px;
}
table.table th {
  color: var(--color-accent);
  font-weight: 500;
}
table.table tr:nth-child(odd) {
  background: linear-gradient(180deg, #303030, #202020);
}
table.table tr:nth-child(even) {
  background: linear-gradient(180deg, #404040, #303030);
}

/* color classes */
.c-accent { color: var(--color-accent); }
.c-red    { color: var(--color-red);    }
.c-yellow { color: var(--color-yellow); }
.c-green  { color: var(--color-green);  }
.c-blue   { color: var(--color-blue);   }
.c-purple { color: var(--color-purple); }

.a-red    { --color-accent: var(--color-red);    }
.a-yellow { --color-accent: var(--color-yellow); }
.a-green  { --color-accent: var(--color-green);  }
.a-blue   { --color-accent: var(--color-blue);   }
.a-purple { --color-accent: var(--color-purple); }

/* custom classes in alphabetical order */
.align-middle { text-align: center; }
.button {
  background: linear-gradient(180deg, #404040 0%, #303030 50%, #404040 100%);
  padding: 5px;
  box-shadow: 0px 5px 5px #10101080, inset 0px 1px 1px #ffffff40, inset 0px -1px 1px #00000040;
  border-radius: 5px;
}
.button:hover {
  background: linear-gradient(180deg, #383838 0%, #282828 50%, #383838 100%);
  padding: 5px;
  box-shadow: inset 0px 1px 1px #80808040, inset 0px -1px 1px #00000040;
  border-radius: 5px;
}
.spoiler {
  background: linear-gradient(180deg, #202020, #181818);
  box-shadow: inset 0px -1px 1px #ffffff40, inset 0px 1px 1px #00000040;
  padding: 0em 0.1em 0em 0.1em;
}
.spoiler:not(:hover) {
  color: transparent;
  text-shadow: none;
}
.tile {
  background: linear-gradient(180deg, #383838, #202020);
  padding: 8px 16px 8px 16px;
  box-shadow: 0px 5px 5px #10101080, inset 0px 1px 1px #ffffff40, inset 0px -1px 1px #00000040;
  border-radius: 5px;
  margin: 1em auto 1em auto;
}
/*.web-button { margin: 0.25em; }*/

/* html elements in alphabetical order */
a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
blockquote, details {
  margin: 0px auto;
  background: linear-gradient(180deg, #383838, #202020);
  border-left: 4px solid var(--color-accent);
  padding: 8px 16px 8px 16px;
  box-shadow: 0px 5px 5px #10101080, inset 0px 1px 1px #ffffff40, inset 0px -1px 1px #00000040;
  border-radius: 5px;
}
blockquote *, details * {
  margin: 0px auto;
}
code {
  font-family: "JetBrains Mono", monospace;
  font-size: 11pt;
  padding: 1pt 2pt 1pt 2pt;
  background: linear-gradient(180deg, #181818, #101010);
  box-shadow: inset 0px -1px 1px #ffffff40, inset 0px 1px 1px #00000040;
  border-radius: 5px;
}
footer {
  background: linear-gradient(180deg, #383838 0%, #303030 49%, #282828 51%, #202020 100%);
  padding: 8px 16px 8px 16px;
  box-shadow: 0px 5px 5px #10101080, inset 0px 1px 1px #ffffff40, inset 0px -1px 1px #00000040;
  border-radius: 5px;
}
h1 { font-weight: 250; }
h2 { font-weight: 300; }
h3 { font-weight: 350; }
h1, h2, h3 { margin: 0px; }
h2 a, h3 a { color: var(--color-text); }
hr {
  border: 2px solid var(--color-accent);
  border-radius: 2px;
}
hr.bigseparator {
  border: 2px solid var(--color-accent);
}
nav {
  background: linear-gradient(180deg, #383838 0%, #303030 49%, #282828 51%, #202020 100%);
  padding: 8px 16px 8px 16px;
  box-shadow: 0px 5px 5px #10101080, inset 0px 1px 1px #ffffff40, inset 0px -1px 1px #00000040;
  border-radius: 5px;
}
ol, ul {
  padding-left: 1em;
}
.tile ol, .tile ul { margin: 0px }