@font-face {
  font-family: 'NiokiBG';
  src: url('/font/NiokiBG.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'NiokiBG';
  src: url('/font/NiokiBG-Bold.otf') format('opentype');
  font-weight: bold;
  font-display: swap;
}

@font-face {
  font-family: 'NiokiBG';
  src: url('/font/NiokiBG-Italic.otf') format('opentype');
  font-style: italic;
  font-display: swap;
}

:root{
  --serif-font-stack: DejaVu Serif, Georgia, serif;
  --sans-font-stack: NiokiBG, Noto Sans, Helvetica, Arial, sans-serif;
  --mono-font-stack: Consolas, Monaco, monospace;
  --color-blue-1: #140505;
  --color-blue-2: #290a0a;
  --color-blue-3: #3d0f0f;
  --color-blue-4: #771d1d;
  --color-blue-5: #b12c2c;
  --color-blue-6: #d45151;
  --color-blue-7: #e28b8b;
  --color-blue-8: #f1c5c5;
  --color-gray-1: #333333;
  --color-gray-2: #666666;
  --color-gray-3: #999999;
  --color-gray-4: #BBBBBB;
  --color-gray-5: #EEEEEE;
  --color-green-1: #517442;
  --color-green-2: #78a366;
  --color-green-3: #9ac788;
  --color-green-4: #bfe0b2;
  --color-violet-1: #2c134b;
  --color-violet-2: #633A96;
  --color-violet-3: #9e6eda;
  --color-violet-4: #caaaf1;
  --color-violet-5: #e6d5fc;
  --color-text: #000000;
  --color-back: #FFFFFF;
  --border-radius: 3px;
  scrollbar-gutter: stable;
}

body {
  background-color: var(--color-blue-3);
  background-image: url('/img/bgnoise.png');
  background-attachment: fixed;
  font-family: var(--sans-font-stack);
  margin: 0;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em 2em 2em 2em;
  background-color: var(--color-back);
  color: var(--color-text);
  border-radius: var(--border-radius);
  box-shadow: 0 0 5px #0009;
}

h1 {
  margin-top: 0;
}

.problem > header > h2 {
  font-size: 1em;
  margin: 0;
}

p {
  line-height: 1.4em;
  margin: 0.5em 0;
}

a {
  color: var(--color-blue-4);
  text-decoration: none;
}

a:hover {
  color: var(--color-blue-5);
  text-decoration: underline;
}

hr {
  border-style: solid;
  color: var(--color-text);
  border-width: 0 0 1px 0;
}

table {
  margin: 2em auto 2em auto;
  border-collapse: collapse;
  border: 1px solid #000;
}

th {
  font-weight: bold;
  background-color: var(--color-gray-5);
  border: 1px solid #000;
  padding: 0.5em 1em;
}

td {
  border: 1px solid #000;
  padding: 0.4em 1em;
  overflow: auto;
}

ol {
  margin: 0.5em 0;
}

li {
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}

pre {
  background-color: var(--color-gray-5);
  color: var(--color-text);
  font-size: 0.9em;
  font-family: var(--mono-font-stack);
  overflow-x: auto;
  padding: 1em;
  border-radius: var(--border-radius);
}

code, kbd {
  background-color: var(--color-gray-5);
  color: var(--color-text);
  font-size: 0.9em;
  font-family: var(--mono-font-stack);
  padding: 0 0.2em;
  border-radius: var(--border-radius);
}

body > header {
  color: #FFF;
  padding: 0 calc((100% - 800px)/2 - 0.5em);
  padding-top: 2em;
}

body > header > nav {
  display: flex;
  justify-content: flex-start;
  user-select: none;
}

footer {
  text-align: center;
  font-size: 1em;
  margin: 0;
  color: #DDD;
  padding: 2em 0 4em 0;
  text-shadow: 0 0 5px #000;
  user-select: none;
}

footer a {
  color: #FFF;
}

footer a:hover {
  color: #FFF;
}

figure {
  margin: 2em 0 2em 0;
}

figure img {
  display: block;
  max-width: 100%;
  margin: auto;
}

figcaption {
  display: block;
  max-width: 600px;
  text-align: center;
  font-style: italic;
  font-size: 0.9em;
  margin: 0.5em auto 1em auto;
}

figure > table {
  margin-bottom: 0;
}

main *:focus {
  outline: 1px solid var(--color-blue-6);
  background-color: #EEE;
}

*::selection {
  background-color: var(--color-blue-4);
  color: #FFF;
}

*:target {
  background-color: #FFF;
  animation: target_animation 1s linear;
  animation-timing-function: ease-in;
}

@keyframes target_animation {
  from {background-color: var(--color-blue-4);}
  to {background-color: #FFF;}
}

form {
  margin: 1em 0;
  border-radius: var(--border-radius);
  background-color: var(--color-gray-5);
  padding: 0.5em;
}

form > h2:first-child, form h3:first-child {
  margin-top: 0;
}

textarea, input, select, button {
  border: 1px solid var(--color-gray-2);
  font-family: var(--sans-font-stack);
  max-width: 100%;
}

textarea:focus, input:focus, select:focus, button:focus {
  border: 1px solid var(--color-blue-5);
  background-color: var(--color-gray-5);
}

textarea {
  padding: 0.5em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

button {
  cursor: pointer;
}

/* CLASSES */

.command-block {
  margin: 1em 0;
  border-radius: var(--border-radius);
  background-color: var(--color-gray-5);
  padding: 0.5em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

#title {
  display: block;
  margin: 2rem auto;
  text-align: center;
  color: #FFFFFF;
  user-select: none;
  text-shadow: 0 0 5px #000;
  font-size: 2em;
  font-weight: bold;
  position: relative;
  transition: ease-in-out 0.2s top, ease-in-out 0.2s text-shadow;
  top: 0;
}

#title:hover {
  top: -5px;
  text-decoration: none;
  text-shadow: 0 2px 5px #000;
}

.menuItem {
  display: block;
  text-shadow: 0 0 5px #000;
  padding: 0.5em;
  margin: 0;
  color: #FFF;
  position: relative;
  top: 0;
  transition: ease-in-out 0.2s top;
}

.menuItem:hover {
  color: #FFF;
  text-decoration: none;
  top: -2px;
  text-shadow: 0 2px 5px #000;
}

.activeMenuItem {
  background-color: var(--color-back);
  text-shadow: none;
  color: var(--color-text);
  position: static;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.activeMenuItem:hover {
  background-color: var(--color-back);
  color: var(--color-text);
  position: static;
  text-shadow: none;
}

#menuSwitch {
  display: none;
  cursor: pointer;
}

.tableList {
  margin: 1em 0;
}

.tableListHeader {
  display: flex;
  flex-direction: row;
  padding: 0.5em 0.5em;
}

.tableListRow {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  padding: 0.5em 0.5em;
  background-color: var(--color-gray-5);
}

.tableListRow:first-of-type {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.tableListRow:last-child {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.tableListRow:visited {
  background-color: var(--color-violet-5);
  color: var(--color-violet-1);
}

.tableListRow:hover {
  text-decoration: none;
  background-color: rgb(207, 207, 207);
}

.tableListRow:visited:hover {
  background-color: var(--color-violet-4);
  color: var(--color-violet-1);
}

.tableListHeader > div, .tableListRow > div {
  padding: 0 0.5em;
}

.examListType {
  width: 2em;
  flex-shrink: 0;
}

.examListSubject {
  width: 15em;
  flex-shrink: 0;
}

.examListDate {
  font-family: var(--mono-font-stack);
  width: 7em;
}

.examListModules {
  flex-grow: 10;
  text-align: right;
}

#examTitle {
  font-weight: normal;
  text-align: center;
  font-size: 1em;
  margin: 1em 1em;
}

#examTitle .class {
  display: block;
  font-size: 2em;
  font-weight: bold;
  font-variant-caps: small-caps;
}

.problems {
  margin: 2em 0;
}

.problem {
  overflow-x: auto;
}

.problem + .problem {
  margin-top: 1em;
}

.problem > header {
  background-color: var(--color-gray-5);
  padding: 0.2em 0.5em;
  border-radius: var(--border-radius);
}

.formRow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0.5em 0;
}

.formRowGroup {
  margin-right: 1em;
}

.formRowElement {
  margin-right: 0.5em;
}

.verticalRowSpacer {
  margin-left:auto;
}

.problemEntry {
  margin: 1em 0 1em 0;
  background-color: var(--color-gray-5);
  padding: 0.5em;
  border-radius: var(--border-radius);
}

.problemEntry header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0.5em;
}

button, .button {
  cursor: pointer;
  border-radius: var(--border-radius);
  border: none;
  transition: 0.2s background-color;
  font-size: 1em;
}

.button:hover, .button:active, .button:focus, button:hover, button:active, button:focus {
  border: none;
  text-decoration: none;
  outline: none;
}

.button + .button {
  margin-left: 0.5em;
}

.bigButton {
  background-color: var(--color-blue-4);
  color: #FFF;
  padding: 0.5em 1em;
}

.bigButton:hover {
  background-color: var(--color-blue-3);
  color: #FFF;
}

.bigButton:active, .bigButton:focus {
  background-color: var(--color-blue-2);
}

.smallButton {
  background-color: #0002;
  color: #000;
  padding: 0.2em 0.5em;
}

.smallButton:hover {
  background-color: var(--color-gray-3);
  color: #000;
}

.smallButton:active, .smallButton:focus {
  background-color: var(--color-gray-2);
}

.saved {
  background-color: var(--color-green-4);
  color: #000;
}

.saved:hover {
  background-color:var(--color-green-3);
}

.breadcrumb {
  background-color: var(--color-gray-5);
  padding: 0.2em;
  border-radius: var(--border-radius);
  margin: 0 0 1em 0;
}

.controlPanel {
  display: flex;
  flex-direction: row;
}

.controlPanel > nav {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  background-color: var(--color-gray-5);
  padding: 0;
  border-radius: var(--border-radius);
  margin-right: 0.5em;
}

.controlPanel > nav > a {
  padding: 0.2em 0.2em;
}

.controlPanel > nav > a:hover {
  background-color: var(--color-gray-4);
}

.controlPanel > nav > div {
  margin-top: 0.5em;
  padding: 0.2em 0.2em;
}

.controlPanel > div {
  width: 100%;
}

.success {
  background-color: var(--color-green-4);
  border: 1px solid var(--color-green-2);
  padding: 0.5em 0.5em;
  border-radius: var(--border-radius);
  margin: 0.5em 0;
}

.error {
  background-color: var(--color-violet-4);
  border: 1px solid var(--color-violet-2);
  padding: 0.5em 0.5em;
  border-radius: var(--border-radius);
  margin: 0.5em 0;
}

.bookmarkRibbon {
  border: 0.5em solid var(--color-gray-4);
  border-top: 0;
  border-bottom: 0.4em solid transparent;
  min-height: 0.7em;
  width: 0;
  margin-top: -0.2em;
  margin-right: 0.5em;
  transition: min-height 0.2s ease-in-out;
  float: right;
}

.bookmarkRibbon:hover {
  border-left-color: var(--color-gray-3);
  border-right-color: var(--color-gray-3);
  min-height: 1.2em;
}

.bookmarkRibbonSaved {
  border-left-color: var(--color-blue-4);
  border-right-color: var(--color-blue-4);
  min-height: 1.2em;
}

.bookmarkRibbonSaved:hover {
  border-left-color: var(--color-blue-3);
  border-right-color: var(--color-blue-3);
  min-height: 1.2em;
}

@media screen and (max-width: 900px) and (min-width: 701px) {
  main {
    padding: 2em 1em;
    border-radius: 0;
  }

  #title {
    margin: 1rem 0;
  }
}

@media screen and (max-width: 700px) {
  main {
    padding: 1em 0.5em;
    width: auto;
    overflow-x: auto;
    border-radius: 0;
  }

  p {text-align: left;}

  blockquote {margin-left: 0;}

  ul, ol {
    list-style-position: inside;
    padding-left:0;
  }

  li ul, li ol {
    padding-left: 1em;
  }

  body > header > nav {
    flex-direction: column;
  }

  #title {
    margin: 0.5rem 0;
  }

  .menuItem {
    display: none;
    border-radius: 0;
  }

  #menuSwitch {
    display: block;
  }

  .examListSubject {
    display: none;
  }

  .controlPanel {
    flex-direction: column;
  }

  .controlPanel > nav {
    width: 100%;
    margin: 0 0 1em 0;
  }

  .controlPanel > nav > div {
    display: none;
  }
}