@layer base, bundles, modules;
@font-face {
  font-family: "Andada";
  src: url("fonts/AndadaPro-ExtraBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andada";
  src: url("fonts/AndadaPro-ExtraBoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Andada";
  src: url("fonts/AndadaPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andada";
  src: url("fonts/AndadaPro-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Super Organic";
  src: url("fonts/SuperOrganic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kabayan";
  src: url("fonts/Kabayan.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@layer base {
  * {
    box-sizing: border-box;
  }
  body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Lora;
    font-size: calc(12px + 0.390625vw);
    line-height: 1.35em;
    background-color: #DEDEDE;
    color: #212121;
    font-family: "Andada";
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: "Super Organic";
    margin-top: 3em;
    margin-bottom: 0em;
    line-height: 1.3em;
    font-weight: normal;
  }
  h1 + h2, h2 + h3, h3 + h4, h4 + h5 {
    margin-top: 0.5em;
  }
  img {
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 100%;
  }
  video, audio {
    max-width: 100%;
    width: 100%;
  }
  .margin-none {
    margin: 0;
  }
  .heading-large {
    font-size: 3.2em;
    margin: 0;
  }
  @media all and (max-width: 500px) {
    .heading-large {
      font-size: 2em;
    }
  }
  .heading-medium {
    font-size: 2em;
    margin: 0;
  }
  .limit-width {
    max-width: 640px;
  }
  .limit-width-small {
    max-width: 320px;
  }
  .require-width-small {
    min-width: 240px;
  }
  .hide-width-small {
    display: block;
  }
  @media all and (max-width: 750px) {
    .hide-width-small {
      display: none;
    }
  }
  @media all and (max-width: 750px) {
    .limit-width-small-screen {
      max-width: 320px;
      padding: 1em;
    }
  }
  @media all and (max-width: 750px) {
    .maximize-width-small-screen {
      width: 100%;
      max-width: 100%;
    }
  }
  .maximize-width {
    width: 100%;
  }
  .float-right {
    float: right;
  }
  .center-block {
    margin: auto;
  }
  .text-center {
    text-align: center;
  }
  .remove-list-styles, #TableOfContents ul {
    margin: 0;
    padding: 0;
  }
  .remove-list-styles li, #TableOfContents ul li {
    margin: 0;
    list-style: none;
  }
  .remove-link-styles, #TableOfContents a {
    text-decoration: none;
  }
  .remove-link-styles:visited, .remove-link-styles:active, .remove-link-styles:link, .remove-link-styles:hover, #TableOfContents a:visited, #TableOfContents a:active, #TableOfContents a:link, #TableOfContents a:hover {
    color: inherit;
  }
  #sidebar a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: black;
  }
  button, input {
    width: 100%;
    border: none;
    font-family: "Kabayan";
    padding: 1em;
    border-radius: 0.5em;
  }
  button {
    cursor: pointer;
    background-color: gray;
    color: #DEDEDE;
  }
  button:hover {
    background-color: #212121;
    color: #DEDEDE;
  }
}
@layer bundles {
  .thought-bubble, .thought-bubble-purple, .thought-bubble-green, .thought-bubble-gray,
  .thought-bubble-small {
    border-image-slice: 27 30 33 27 fill;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: repeat repeat;
    border-image-source: url(border-image-bubble-white.png);
    border-style: solid;
    padding: 2em;
    margin: 1em;
  }
  .thought-bubble-purple {
    border-image-source: url(border-image-bubble-purple.png);
  }
  .thought-bubble-gray {
    border-image-source: url(border-image-bubble-gray.png);
  }
  .thought-bubble-green {
    border-image-source: url(border-image-bubble-green.png);
  }
  .thought-bubble-small {
    padding: 1em;
    margin: 0;
    border-image-slice: 14 14 14 14 fill;
    border-image-source: url(border-image-bubble-small.png);
  }
}
@layer modules {
  .text-color-white {
    color: white;
  }
  .text-color-black {
    color: black;
  }
  .font-size-small {
    font-size: 0.75em;
  }
  .padding-small {
    padding: 0.5em;
  }
  .padding-sides-small {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  .flex-center {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 1em;
    flex-wrap: wrap;
  }
  .flex-no-gap {
    gap: 0;
  }
  .flex-equal-size {
    align-items: stretch;
  }
  .text-color-mid {
    color: #D6E1C9;
  }
  .text-color-green {
    color: #929C7B;
  }
  .text-color-gray {
    color: #666;
  }
  .text-case-upper {
    text-transform: uppercase;
  }
  .text-bold {
    font-weight: bold;
  }
  blockquote {
    border-left: 0.2em solid #83cf63;
    padding-left: 0.5em;
  }
  .font-accent {
    font-family: "Kabayan";
  }
  .font-body {
    font-family: "Andada";
  }
  .font-heading {
    font-family: "Super Organic";
  }
  .hover_invert {
    transition: filter 0.2s;
  }
  .hover_invert:hover {
    filter: invert();
  }
  .hover_lighten {
    transition: filter 0.2s;
  }
  .hover_lighten:hover {
    filter: brightness(130%);
  }
  .hover_popup {
    transition: transform 0.2s;
  }
  .hover_popup:hover {
    transform: scale(1.05);
  }
  .hover_underline:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
  .cursor-clickable {
    cursor: pointer;
  }
  .double-view {
    display: flex;
    width: 100%;
    align-content: center;
    align-items: stretch;
    justify-content: space-between;
  }
  .thought-bubble-footer {
    height: max(15vw, 100px);
    background-image: url(thought-bubble-footer.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: right;
    background-position-y: top;
  }
  .bg-header-full {
    background: linear-gradient(to bottom, transparent, #DEDEDE), url(hero-banner.webp);
    height: 40vw;
    background-size: contain;
    background-position-y: top;
    background-repeat: no-repeat;
    background-position-x: center;
  }
  .bg-header-small {
    background: linear-gradient(to bottom, transparent, #DEDEDE), url(small-header.webp);
    height: 3vw;
    background-size: contain;
    background-position-y: top;
    background-repeat: repeat-x;
    background-position-x: center;
  }
}