:root {
  --W: 800px;
  --text: #e7eeeb;
  --textinv: #111815;
  --background: #0e110f;
  --border: #f38cee;
  --shadow: #302833;
  --title: #ffa6ff;
  --nav: #e8eaed;
}

:root.light {
  --text: #111815;
  --textinv: #e7eeeb;
  --background: #f6f8f7;
  --border: #730c6e;
  --shadow: #aba8b3;
  --title: #9c079c;
  --nav: #171512;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
  font-family: 'XITS';
  src: url('/style/xits/XITS-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'XITS';
  src: url('/style/xits/XITS-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'XITS';
  src: url('/style/xits/XITS-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'XITS';
  src: url('/style/xits/XITS-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'XITSMath';
  src: url('/style/xits/XITSMath-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'XITSMath';
  src: url('/style/xits/XITSMath-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(/style/icons.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.container {
    width: 100%;
    max-width: var(--W);
    margin: 0 auto;
}

.flexCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: var(--nav);
}

.sitelogo {
  user-select: none;
  font-size: 1.5em;
}

.sitelogo {
  user-select: none;
  font-size: 1.5em;
}

.sitelogo:link, .sitelogo:hover, .sitelogo:visited {
  color: var(--nav);
}

.katex-html {
    display: none;
}

html {
  background-color: var(--background);
}

a {
  text-decoration: none;
}

p {
  font-family: 'XITS', serif;
  color: var(--text)
}

#dark-mode-toggle {
  color: var(--nav)
}

math {
  font-family: 'XITSMath', 'XITS', serif;
}