@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
body {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

.page-main a {
  color: var(--link-color);
  text-decoration: none;
}

.storyblock {
  border: 2pt solid var(--sidebar-bg);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.storyblock p {
  padding-left: 1rem;
  padding-right: 1rem;
}

.block-heading {
  padding: 1rem;
  background-color: var(--sidebar-bg);
}

.quoteblock {
  font-family: "kalam", cursive;
  font-weight: normal;
  font-style: normal;
}
.quoteblock p {
  margin: 1rem;
}

.strict-centered-text {
  font-size: 125%;
  min-height: 4.5em;
  line-height: 4.5em;
  text-align: center;
  vertical-align: middle;
}
.strict-centered-text p {
  line-height: 1.5em;
  display: inline-block;
  text-align: center;
  margin: 0;
}

body {
  overflow: hidden;
  height: 100vh;
}

.page-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow-y: hidden;
  color: var(--text-color);
  background-color: var(--main-bg);
}

.page-sidebar {
  z-index: 1;
  position: relative;
  width: 18rem;
  min-width: 18rem;
  height: 100%;
}

@media (max-width: 768px) {
  .page-sidebar {
    position: absolute;
  }
  .page-sidebar:not(.active) {
    transform: translateX(-15rem);
    transition: transform 0.5s ease;
  }
  .page-sidebar.active {
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
  .page-main {
    margin-left: 2.5rem;
  }
}
.sidebar-content {
  width: 100%;
  height: 100%;
  padding: 3rem;
  overflow-y: scroll;
}

.page-main {
  flex-grow: 1;
  overflow-y: scroll;
  padding: 3rem;
}

.character-wrapper {
  max-width: 40rem;
  margin: auto;
}

.modal {
  --bs-modal-bg: var(--modal-bg);
  --bs-border-color: var(--modal-border-color);
}

.article_art {
  display: block;
  margin: 1rem;
  max-width: 12rem;
}

.artice_art_end {
  clear: right;
}

/** 
 * Fields
 */
@media (max-width: 576px) {
  .article_art {
    margin: auto;
  }
}
@media (min-width: 576px) {
  .article_art {
    float: right;
  }
}
.page-sidebar {
  color: var(--text-color);
  background-color: var(--sidebar-bg);
}

.sidebar-toggler {
  position: absolute;
  right: -1.25rem;
  top: 3rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 2pt solid var(--main-bg);
  background-color: var(--sidebar-bg);
  border-radius: 50%;
}

@media (min-width: 768px) {
  .sidebar-toggler {
    display: none;
  }
}
.sidebar-content > ul {
  list-style: none;
  padding-inline-start: 0;
}
.sidebar-content > ul > li > a {
  font-weight: bold;
}
.sidebar-content > ul ul {
  list-style: none;
  padding-inline-start: 1rem;
}

.page-sidebar a {
  color: var(--sidebar-link-color);
  text-decoration: none;
}
.page-sidebar a.active {
  color: var(--sidebar-link-color-active);
}

.gallery {
  --entries-per-row: 2;
  --gap: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.gallery_entry {
  width: calc((100% - (var(--entries-per-row) - 1) * var(--gap)) / (var(--entries-per-row)));
  cursor: pointer;
}
.gallery_entry:hover img {
  box-shadow: 0px 0px 10px 2px var(--link-color);
}
.gallery_entry img {
  border: 2pt solid var(--main-bg);
  width: 100%;
}
.gallery_entry figcaption {
  text-align: center;
  padding: 0.25rem;
}

.gallery_instructions {
  text-align: center;
  font-style: italic;
  opacity: 0.5;
}

/** 
 * Gallery
 */
@media (max-width: 576px) {
  .gallery {
    --entries-per-row: 2;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .gallery {
    --entries-per-row: 3;
  }
}
@media (min-width: 768px) {
  .gallery {
    --entries-per-row: 4;
  }
}
.list_list {
  --entries-per-row: 2;
  --gap: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.list_heading {
  font-weight: bold;
}

.list_list_entry {
  width: calc((100% - (var(--entries-per-row) - 1) * var(--gap)) / (var(--entries-per-row)));
}

/** 
 * Fields
 */
@media (max-width: 576px) {
  .list_list {
    --entries-per-row: 1;
  }
}
@media (min-width: 576px) {
  .list_list {
    --entries-per-row: 2;
  }
}
.field_list {
  --entries-per-row: 2;
  --gap: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.field_label {
  font-weight: bold;
}

.field_entry {
  width: calc((100% - (var(--entries-per-row) - 1) * var(--gap)) / (var(--entries-per-row)));
}

@media (max-width: 576px) {
  .field_list {
    --entries-per-row: 1;
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .field_list {
    --entries-per-row: 2;
  }
}
@media (min-width: 768px) {
  .field_list {
    --entries-per-row: 3;
  }
}
a.call-to-action, .call-to-action {
  display: block;
  width: 15rem;
  background: #697AD2;
  color: var(--main-bg);
  text-align: center;
  padding: 0.75rem;
  margin: auto;
  border-radius: 2rem;
  --bs-btn-hover-border-color: var(--main-bg): ;
}

.btn-container:has(.kofi-button) {
  width: 100%;
  margin-bottom: 1rem;
  text-align: center;
}

:root {
  --main-bg: #02020A;
  --sidebar-bg: #0b0b1e;
  --text-color: #E1E2EF;
  --link-color: #D09494;
  --sidebar-link-color: #B497D6;
  --sidebar-link-color-active: rgb(101, 69, 190);
  --modal-bg: var(--sidebar-bg);
  --modal-border-color: var(--main-bg);
}

/*# sourceMappingURL=main.css.map */