/*@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');*/
@font-face {
  font-family: Pacifico;
  src: url('/fonts/Pacifico-Regular.ttf') format("truetype");
}

:root {
  --bg: #141820;
  --field: #313b4d;
  --text: #99ccff;
  --formula: #63b8ff;
  --explenation: #ff7263;
}

.formula3 .katex-display > .katex > .katex-html > .tag {
  position: relative !important;
  /*left: -4em !important;*/
  /*right: 15em;*/
  float: right;
}

@media (min-width: 1280px) {
  .katex-display > .katex > .katex-html > .tag {
    position: absolute !important;
    right: 1rem !important;
  }
}

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

.subtopic {
  background-color: var(--field);
  border-radius: 4px;
  padding: 2em;
  margin-left: 1.1em;
  margin-right: 1.1em;
}

.subtopicTop {
  background-color: var(--field);
  border-radius: 4px 4px 0px 0px;
  padding: 2em;
  margin-left: 1.1em;
  margin-right: 1.1em;
}

.subtopicMid {
  background-color: var(--field);
  padding: 2em;
  margin-left: 1.1em;
  margin-right: 1.1em;
}

.subtopicBottom {
  background-color: var(--field);
  border-radius: 0px 0px 4px 4px;
  padding: 2em;
  margin-left: 1.1em;
  margin-right: 1.1em;
}

.topicheadline {
  color: var(--text);
  font-size: 2em;
  font-family: 'Pacifico', cursive;
  background-color: var(--bg);
  margin-left: 0.8em;
}

.description {
  color: var(--text);
  text-align: center;
}

.formula {
  color: var(--formula);
  font-weight: bold;
}

.formula2 span{
  color: var(--formula);
  font-weight: bold;
  /*text-align: left;*/
}

.formula3 span{
  color: var(--formula);
  font-weight: bold;
  /*text-align: left;*/
}

.explenation {
  color: var(--explenation);
}