@import();
/*
  CSSlint is outdated but there isn't an option
  to turn it off in p5.js so I just added a line
  to cause a fatal error at the beginning so it
  doesn't show the errors later on
*/
:root {
  font-size: 30px;
  --bg: white;
  --fg: #444;
  --inactive: #777;
  --accent: #ccf;
  --light-accent: #ddf;
  --active: #fae;
  --sparkle: #679ac1;
  --correct: #07b61b;
  --correct-bg: #88dd92;
  --warning: #ea8b8b;
  --shadow: #4448;
  --shadow2: #000;
  word-break: break-word;
}
:root.dark {
  --bg: #444;
  --fg: white;
  --inactive: #ccc;
  --accent: #88a;
  --light-accent: #558;
  --active: #a38;
  --sparkle: #99d3ff;
  --correct: #88dd92;
  --correct-bg: #07b61b;
  --warning: #f09999;
  --shadow: #4448;
  --shadow2: #000;
  word-break: break-word;
}
* {
  box-sizing: border-box;
  transition:
    background 0.2s,
    border-color 0.2s;
    opacity 0.3s,
    color 0.1s;
}

html {
  font-family: 'Cormorant', serif;
  font-variant-numeric: lining-nums;
}
span {
  display: inline-block;
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow-x: hidden;
  color: var(--fg);
}
.document, #interface {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}
#interface {
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 2em;
}
.document {
  background: var(--accent);
}
.document > div {
  display: block;
  width: 100%;
}
.text {
  text-align: left;
  padding: 1em;
  padding-left: 1em;
  padding-right: 1em;
  background: var(--bg);
  width: 75%;
  user-select: none;
  aspect-ratio: 1 / 1.414; /* A-series paper size! */
}
.menubar {
  height: 4em;
  min-height: 4em;
  background: var(--bg);
  border: var(--fg) solid;
  border-width: 0 0 1px 0;
  color: var(--fg);
}
.heading {
  margin-left: 0.5em;
  font-size: 1.5em;
}
.levelNum {
  font-weight: bold;
  user-select: none;
}
.title {
  font-style: italic;
  user-select: none;
  cursor: text;
}
.line {
  position: relative;
  cursor: pointer;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  padding: 0.1em;
  margin: 0.1em 0 0.1em -0.1em;
  border-radius: 0.1em;
}
.line:hover {
  background: var(--light-accent);
}
.line.selected, .line.selected:hover {
  background: var(--active);
  box-shadow: none;
  border-radius: 0.1em;
  outline: 0.05em solid;
}
.line.blank::after {
  content: "Blank";
  font-style: italic;
  color: var(--inactive);
}
.full[data-prefix] {
  margin-left: 0;
}
.page {
  overflow-x: hidden;
  overflow-y: scroll;
  text-align: center;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
}
.prefix {
  display: inline-block;
  width: 4em;
  color: var(--inactive);
  text-align: right;
  white-space: pre;
  margin-right: 1em;
}
.prefix::before {
  content: attr(data-prefix);
}
.prefix:not([data-prefix]) {
  display: none;
}
.title:hover {
  background: var(--light-accent);
}
.title:not([contenteditable]):empty::before {
  content: "Untitled";
  color: var(--inactive);
}
.title[contenteditable] {
  background: white;
}
#hidden, .hidden {
  display: none;
}
#menu {
  position: absolute;
  left: 100%;
  top: 50%;
  padding: 0.5em;
  transform: translate(10%, -50%);
  font-size: 0.75em;
  background: var(--light-accent);
  border-radius: 0.5em;
  z-index: 2;
  width: 10em;
  cursor: default;
}
#menu::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-95%, -50%);
  background: transparent;
  border-bottom: 0.5em solid transparent;
  border-top: 0.5em solid transparent;
  border-right: 0.5em solid var(--light-accent);
  z-index: 3;
  height: 0;
  width: 0;
}
.sparkles::before {
  content: "✨ ";
  color: transparent;
  text-shadow: 0 0 0 var(--sparkle);
}
.option {
  user-select: none;
}
.option:hover:not(.disabled), .option.override:hover {
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
}
.buttons {
  position: absolute;
  right: 0;
  top: 0;
}
.button {
  font-size: 0.75em;
  padding: 0.25em;
  margin: 0.25em;
  width: fit-content;
  background: var(--accent);
  border-radius: 0.5em;
}
.subtitle {
  font-size: 0.5em;
  font-style: italic;
  font-weight: bold;
  user-select: none;
  max-width: 50%;
}
.subtitle::before {
  content: attr(data-foreword);
  font-style: normal;
  font-weight: normal;
}
.subtitle::after {
  content: attr(data-afterword);
  font-style: normal;
  font-weight: normal;
}
.disabled:not(.override) {
  pointer-events: none;
  color: var(--inactive);
  transition: none;
}
.correct {
  color: var(--correct);
  font-weight: bold;
}
.correct::after {
  content: " ✓";
  line-height: 0;
}
.completed .menubar {
  background: var(--correct-bg);
}
.indialog {
  pointer-events: none;
}
#documents::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: var(--shadow);
  opacity: 0;
  transition: opacity 0.3s;
}
#documents.indialog::after {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
}
#winMessage, #pluginMessage, #dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: var(--light-accent);
  padding: 1em;
  border-radius: 1em;
  user-select: none;
  opacity: 0;
  box-shadow: 0 0 1em var(--shadow);
  transition: opacity 0.3s;
}
#dialog {
  font-size: 0.75em;
  height: 9em;
  width: 20em;
  overflow: scroll;
}
#winMessage:not(.visible), #pluginMessage:not(.visible), #dialog:not(.visible) {
  pointer-events: none;
}
.visible {
  opacity: 1 !important;
}
.red {
  background: var(--warning);
  color: var(--bg);
}
#tTitle {
  font-weight: bold;
  font-size: 2em;
}
hr {
  width: 100%;
}
#folder {
  width: calc(100% + 1em);
  transform: translate(0.5em, 0);
  text-align: center;
}
#previews {
  width: fit-content;
}
.exit {
  font-weight: bold;
  text-decoration: underline;
}

.buttons > div {
  text-align: right;
}

#pHeading {
  font-weight: bold;
  margin-bottom: -1.5em;
  transform: translate(-0.5em, 0)
}

.preview {
  position: relative;
  border: var(--outline) solid;
  border-width: 1px;
  background: var(--bg);
  width: 5em;
  aspect-ratio: 1 / 1.414;
  border-width: 4px;
  cursor: pointer;
  --outline: var(--light-accent);
  --preview-fg: var(--fg);
  margin-top: 2em;
  margin-right: 1em;
  user-select: none;
}

.preview:hover {
  border-width: 4px;
  padding: 0;
  --outline: var(--fg);
  --preview-fg: var(--bg);
}

.previewNum {
  width: 100%;
  height: 100%;
  font-size: 5em;
  text-align: center;
}

.previewTitle {
  position: absolute;
  bottom: 0;
  left: -4px;
  right: -4px;
  border: none;
  padding: 3px;
  font-size: 0.7em;
  transform: translate(0, 100%);
  background: var(--outline);
  color: var(--preview-fg);
}
.markDone {
  --outline: var(--correct-bg)
}
#gear {
  position: fixed;
  right: 1em;
  bottom: 1em;
  background: var(--accent);
  color: transparent;
  text-shadow: 0 0 0 var(--fg);
  padding: 0.25em;
  border-radius: 50%;
  user-select: none;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 0 0.5em var(--shadow);
}
#gear:hover {
  background: var(--fg);
  text-shadow: 0 0 0 var(--bg);
}
#settings {
  position: absolute;
  background: var(--bg);
  top: 0;
  left: 6em;
  bottom: 0;
  right: 0;
  padding: 1em;
  box-shadow: 0 0 2em var(--shadow2);
  z-index: 5;
  user-select: none;
  overflow-y: scroll;
  transition: transform 0.5s;
}
.offscreen {
  transform: translate(150%, 0);
}
.sHeading {
  font-weight: bold;
  font-size: 1em;
}
#sTitle {
  font-weight: bold;
  font-size: 1.5em;
}
#escapedialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  pointer-events: none;
}
#documents.indialog ~ #escapedialog {
  pointer-events: auto;
  z-index: 3;
}