@font-face {
  font-family: KyratextFriendly;
  src: url(/_assets/fonts/kyratext-friendly.woff);
}
@font-face {
  font-family: ZillaSlab;
  src: url(/_assets/fonts/ZillaSlab/ZillaSlab-Medium.woff);
}
@font-face {
  font-family: ZillaSlabBold;
  src: url(/_assets/fonts/ZillaSlab/ZillaSlab-Bold.woff);
}
body {
  font-family: "ZillaSlab", serif;
  font-size: larger;
  color: #c7dcd0;
  background-color: #252321;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "KyratextFriendly", sans-serif;
}

h1, h2 {
  text-shadow: 5px 5px #252321;
  margin-top: 0;
}

a {
  color: #e59180;
}

figcaption {
  text-align: center;
  font-size: smaller;
  font-style: italic;
}

hr {
  color: #444036;
}

.content {
  max-width: 1400px;
  margin: auto;
}

.section--content {
  padding: 0 0 1.5rem 0;
}

.section--label {
  font-size: xx-small;
  font-weight: bold;
  color: #c7dcd0;
  background-color: #444036;
  border-radius: 0 0 5px 0;
  width: fit-content;
  text-transform: uppercase;
  padding: 0.5em 1em 0.5em 0.5em;
}

.undecorated-list {
  padding-left: 0;
}
.undecorated-list li {
  list-style: none;
  padding-bottom: 1em;
}

.code-block {
  display: block;
  background-color: #252321;
  border: 2px solid #444036;
  border-radius: 5px;
  padding: 0.5em;
}

.bold-dl dt {
  font-weight: bold;
}
.bold-dl dd {
  margin-bottom: 1em;
}

.date {
  font-style: italic;
}

@media (max-width: 800px) {
  .desktop-only {
    display: none !important;
  }
}
@media (min-width: 801px) {
  .mobile-only {
    display: none !important;
  }
}
.header--home {
  color: #c7dcd0;
  background-color: #444036;
  margin-top: 2rem;
  padding: 0.5rem 1rem;
  height: 1rem;
  width: 33%;
  min-width: 200px;
  border-radius: 10px 10px 0 0;
}
.header--home .site-logo--container {
  display: block;
  position: relative;
  top: -1.7rem;
  height: 4rem;
}
.header--home .site-logo {
  height: 4rem;
}

.header--spacer {
  height: 1rem;
  border: 2px #444036 solid;
  border-radius: 0 10px 0 0;
  border-bottom-style: none;
}

.page-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

@media (max-width: 800px) {
  .page-layout {
    flex-direction: column;
    align-items: stretch;
  }
}
.nav {
  flex: 0 0 150px;
  border-color: #444036;
  border: 2px #444036 solid;
  border-radius: 0 0 0 10px;
  border-right-style: none;
}

.nav--link-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 1.5rem 0;
}

.nav--link-list--spacer {
  flex: 0 0 40px;
  background-image: url("/_assets/images/patterns/dot.svg");
  background-repeat: space;
  background-size: 12px 12px;
  background-position: center;
  margin: 0 1.5rem;
}

.nav--link--container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.nav--link {
  width: 100%;
}

@media (max-width: 800px) {
  .nav {
    flex: 1 1 auto;
    border-radius: 0;
    border-right-style: solid;
    border-bottom-style: none;
  }
  .nav--link-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1.5rem;
  }
}
.link-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.5rem;
}
.link-list a {
  width: fit-content;
}

.main {
  flex: 1 1 800px;
  border-color: #444036;
  border: 2px #444036 solid;
}

@media (max-width: 800px) {
  .main {
    flex: 1 1 auto;
    border-bottom: none;
  }
}
.aux {
  flex: 0 0 250px;
  border-color: #444036;
  border: 2px #444036 solid;
  border-radius: 0 0 10px 0;
  border-left-style: none;
}

@media (max-width: 800px) {
  .aux {
    flex: 1 1 auto;
    border-radius: 0 0 10px 10px;
    border-left-style: solid;
  }
}
.aux--heading {
  font-size: medium;
  margin-bottom: 20px;
}

.aux--list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.aux--list li {
  margin-bottom: 0.5em;
}

.aux--button {
  margin-bottom: 20px;
}

.aux--icon {
  height: 1em;
  margin-right: 0.5em;
}

.gate-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.gate {
  border-color: #444036;
  border-style: solid;
  height: 6px;
  width: calc(1.5rem - 10px);
  box-sizing: border-box;
}

.gate-left {
  border-width: 2px 2px 2px 0;
  border-radius: 0 3px 3px 0;
  margin-right: 10px;
}

.gate-right {
  border-width: 2px 0 2px 2px;
  border-radius: 3px 0 0 3px;
  margin-left: 10px;
}

.panel--container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 1.5rem 0 0 0;
}

.panel {
  background-color: #332f2b;
  border: 2px solid #444036;
  border-radius: 5px;
  padding: 1em;
  flex-grow: 1;
}

.link-button {
  display: inline-block;
  color: #423a31;
  background-color: #cec0b3;
  border: 2px solid #968278;
  position: relative;
  top: -4px;
  left: -4px;
  box-shadow: 1px 1px 0 0 #968278, 2px 2px 0 0 #968278, 3px 3px 0 0 #968278, 4px 4px 0 0 #968278;
  box-sizing: border-box;
  padding: 0.7em 0.4em 0.4em;
  font-family: "KyratextFriendly", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}
.link-button:hover, .link-button:focus {
  color: #968278;
  border-color: #9babb2;
  background-color: #c7dcd0;
  box-shadow: 1px 1px 0 0 #9babb2, 2px 2px 0 0 #9babb2, 3px 3px 0 0 #9babb2, 4px 4px 0 0 #9babb2;
}
.link-button:active {
  top: 0;
  left: 0;
  box-shadow: none;
}

.button-red {
  color: #7a3b4f;
  background-color: #e59180;
  border: 2px solid #a94b54;
  box-shadow: 1px 1px 0 0 #a94b54, 2px 2px 0 0 #a94b54, 3px 3px 0 0 #a94b54, 4px 4px 0 0 #a94b54;
}

.button-orange {
  color: #8f5252;
  background-color: #f7cf91;
  border: 2px solid #cc8257;
  box-shadow: 1px 1px 0 0 #cc8257, 2px 2px 0 0 #cc8257, 3px 3px 0 0 #cc8257, 4px 4px 0 0 #cc8257;
}

.button-yellow {
  color: #585833;
  background-color: #e4e99c;
  border: 2px solid #8b863a;
  box-shadow: 1px 1px 0 0 #8b863a, 2px 2px 0 0 #8b863a, 3px 3px 0 0 #8b863a, 4px 4px 0 0 #8b863a;
}

.button-green {
  color: #3f5b74;
  background-color: #aad795;
  border: 2px solid #488885;
  box-shadow: 1px 1px 0 0 #488885, 2px 2px 0 0 #488885, 3px 3px 0 0 #488885, 4px 4px 0 0 #488885;
}

.button-blue {
  color: #3e3b66;
  background-color: #6fb0b7;
  border: 2px solid #4a5786;
  box-shadow: 1px 1px 0 0 #4a5786, 2px 2px 0 0 #4a5786, 3px 3px 0 0 #4a5786, 4px 4px 0 0 #4a5786;
}

.button-purple {
  color: #4b1f50;
  background-color: #b8a3ba;
  border: 2px solid #8e5294;
  box-shadow: 1px 1px 0 0 #8e5294, 2px 2px 0 0 #8e5294, 3px 3px 0 0 #8e5294, 4px 4px 0 0 #8e5294;
}

.button-pink {
  color: #753c54;
  background-color: #e799ab;
  border: 2px solid #a24b6f;
  box-shadow: 1px 1px 0 0 #a24b6f, 2px 2px 0 0 #a24b6f, 3px 3px 0 0 #a24b6f, 4px 4px 0 0 #a24b6f;
}

table, th, td {
  border-collapse: collapse;
}

th, td {
  background-color: #444036;
  border: 2px solid #332f2b;
  border-collapse: collapse;
  padding: 0 1em;
}

th {
  text-align: left;
  font-weight: bold;
  background-color: #252321;
}

table {
  margin-bottom: 1em;
}

.banner {
  display: block;
  width: 100%;
}

.banner--container {
  position: relative;
  background: url("/_assets/images/patterns/plus.svg");
  background-size: 32px;
  background-repeat: space;
  border: 2px solid #444036;
  border-radius: 5px;
  overflow: visible;
}

.banner--icon {
  position: absolute;
  top: 10%;
  left: 10%;
  height: 80%;
}

.banner--home-overlay {
  z-index: 100;
  position: absolute;
  height: 150%;
  right: 0%;
  bottom: -27%;
}

.image {
  max-width: 100%;
}

.image--primary {
  display: block;
  width: 100%;
  max-height: 90vh;
}

.image--primary--container {
  border: 2px solid #444036;
  border-radius: 5px;
  overflow: hidden;
}

.image--body {
  max-width: 100%;
  display: block;
  margin: auto;
  margin-bottom: 0.5em;
}

.wedding-painting {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  margin-bottom: 2rem;
}

.pixel {
  display: block;
  height: auto;
}

.about--columns {
  display: flex;
}

.flag-container {
  padding: 0.2em 0;
  display: flex;
  gap: 0.1em;
}

@media (min-width: 801px) {
  .about--columns .about--image {
    height: 512px;
  }
}
@media (max-width: 800px) {
  .about--columns {
    flex-direction: column-reverse;
  }
  .about--columns .about--image {
    width: 100%;
  }
}
.card-wide {
  flex: 0 0 auto;
}
.card-wide .card--link--title {
  text-align: left;
}
.card-wide .card--description p {
  margin: 0;
}
.card-wide img {
  max-width: 100%;
}

.card-thumbnail {
  flex: 0 0 30%;
}

@media (max-width: 800px) {
  .card-thumbnail {
    flex: 0 0 230px;
  }
}
.card {
  background-color: #252321;
  border-radius: 5px;
  padding: 0.5em;
}

.card--link {
  color: #423a31;
  display: block;
  box-sizing: border-box;
  text-decoration: none;
  border: 2px solid #968278;
  background-color: #cec0b3;
  padding: 0.3em;
  position: relative;
  top: -4px;
  left: -4px;
  box-shadow: 1px 1px 0 0 #968278, 2px 2px 0 0 #968278, 3px 3px 0 0 #968278, 4px 4px 0 0 #968278;
}
.card--link:focus-within, .card--link:hover {
  color: #968278;
  border: 2px solid #9babb2;
  background-color: #c7dcd0;
  text-decoration: none;
  box-shadow: 1px 1px 0 0 #9babb2, 2px 2px 0 0 #9babb2, 3px 3px 0 0 #9babb2, 4px 4px 0 0 #9babb2;
}
.card--link:active {
  top: 0;
  left: 0;
  box-shadow: none;
}

.card--link--image {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0.3em;
  border: 2px solid #252321;
}

.card--link--title {
  font-family: "ZillaSlabBold", serif;
  text-align: center;
  margin: 0;
}

.card--description {
  padding-top: 0.5em;
}

.card--date {
  padding-top: 0.5em;
  color: #6fb0b7;
}

.card-wide--container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.5em;
}

.card-thumbnail--container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.5em;
}

.timeline-container {
  background: #252321;
  border-radius: 5px;
  padding: 0 1rem;
}

.timeline {
  margin-left: 2rem;
  border-left: 4px solid #9babb2;
  padding: 1rem 0 1rem 1rem;
}
.timeline .bullet-point {
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid #9babb2;
  border-radius: 50%;
}
.timeline h3 {
  font-family: "ZillaSlab", serif;
  margin: 0;
}
.timeline .timeframe {
  font-size: medium;
  font-style: italic;
}
.timeline ul {
  margin-bottom: 0;
}

.timeline-item {
  position: relative;
  background: #444036;
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.9rem;
  top: 1.2rem;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  border: 4px solid #9babb2;
  background: #252321;
  border-radius: 50%;
}

.comic--nav-panel {
  text-align: center;
}

.comic--nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  flex-grow: 1;
}

.link-button--comic {
  display: block;
  font-size: 2em;
  padding: 0 1em;
}

/*! 
* @package IcoFont 
* @version 1.0.1 
* @author IcoFont https://icofont.com 
* @copyright Copyright (c) 2015 - 2023 IcoFont 
* @license - https://icofont.com/license/
*/
/*
* Trimmed down by Kyratech.
*/
@font-face {
  font-family: "IcoFont";
  font-weight: normal;
  font-style: "Regular";
  src: url("/_assets/fonts/icofont.woff2") format("woff2"), url("/_assets/fonts/icofont.woff") format("woff");
}
[class^=icofont-], [class*=" icofont-"] {
  font-family: "IcoFont" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.icofont-rounded-double-left:before {
  content: "\ea97";
}

.icofont-rounded-double-right:before {
  content: "\ea98";
}

.icofont-rounded-left:before {
  content: "\ea9d";
}

.icofont-rounded-right:before {
  content: "\eaa0";
}

.icofont-listine-dots:before {
  content: "\ef74";
}

.games--silly--container {
  display: flex;
  align-items: center;
}

.games--silly {
  margin: 0.2em;
  padding: 0.2em 0.5em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 80%;
}

.games--silly--no {
  color: #b5ae9a;
  background: #504e41;
}
.games--silly--no .games--silly--square {
  background: #b5ae9a;
}

.games--silly--yes {
  position: relative;
  left: 2em;
  color: #504e41;
  background: #b5ae9a;
}
.games--silly--yes .games--silly--square {
  background: #504e41;
}

.games--silly--square {
  display: block;
  width: 0.8em;
  height: 0.8em;
}

.game--ranking-list--item {
  background: #444036;
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem 0;
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
}

.game--ranking-list--aside {
  background: #444036;
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem 0;
}

.game--ranking-list--item--img {
  flex: 0 0 auto;
}
.game--ranking-list--item--img img {
  border-radius: 5px;
}

.game--ranking-list--item--desc {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: #332f2b;
  border-radius: 5px;
}

.game--ranking-list--item--text {
  flex: 1 1 auto;
}
.game--ranking-list--item--text blockquote {
  font-style: italic;
}

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