/*Font: Playwrite HR*/
@font-face {
    font-family: Playwrite HR;
    src: url(/resources/fonts/Playwrite_HR/PlaywriteHR-VariableFont_wght.ttf);
  }

  /*Font: Playpen Sans*/
  @font-face {
    font-family: Playpen Sans;
    src: url(/resources/fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf);
  }

  /*standards/defaults*/
  :root {
    --transDur: 0.25s;

    --main-bg-color: light-dark(rgb(245, 245, 245), rgb(51, 51, 51));
    --main-bg-color-inverted: light-dark(rgb(51, 51, 51), rgb(245, 245, 245));
    --main-te-color: var(--main-bg-color);
    --main-te-color-inverted: var(--main-bg-color-inverted);

    --primary-color: rgb(0, 168, 0);
    --primary-color-whitened: rgb(96, 192, 76);

    --nav-a-color: rgb(224, 159, 63);
    --article-header-color: rgb(255, 191, 63);

    --theme-toggle: light-dark(rgb(251, 237, 182), rgb(4, 52, 73));
    --theme-circle: light-dark(rgb(244, 202, 37), rgb(37, 182, 244));

    --light: rgb(245, 245, 245);
    --dark: rgb(51, 51, 51);
    --red: rgb(168, 0, 0);

    color-scheme: light;
  }

  * {
    word-wrap: break-word;
    color: var(--main-te-color);
    font-family: "Playpen Sans", cursive, sans-serif;
    font-size: max(1.2svw, 20px);
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    word-break: break-word;
  }

  ::view-transition-old(root) {
    -webkit-animation: calc(2 * var(--transDur)) ease-in both move-out;
    animation: calc(2 * var(--transDur)) ease-in both move-out;
  }

  ::view-transition-new(root) {
    -webkit-animation: calc(2 * var(--transDur)) ease-in both move-in;
    animation: calc(2 * var(--transDur)) ease-in both move-in;
  }

  html {
    background-color: var(--main-bg-color);
  }

  body {
    min-width: 100%;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  body>*:not(.content, .content *) {
    position: relative;
    z-index: 3;
  }

  a {
    text-decoration: none;
  }

  a.extern {
    color: var(--red) !important;
  }

  /*colors*/
  .red {
    color: var(--red);
  }

  .yellow {
    color: yellow;
  }

  .green {
    color: green;
  }

  .blue {
    color: blue;
  }

  /*property classes*/
  .align-self_normal {
    align-self: normal !important;
  }

  .flex-direction_row-reverse {
    flex-direction: row-reverse !important;
  }

  .text-align_start {
    text-align: start !important;
  }

  .text-align_center {
    text-align: center !important;
  }

  /*.article-regular*/
  .article-regular {
    -webkit-border-radius: max(min(3vw, 25px), 10px);
    -moz-border-radius: max(min(3vw, 25px), 10px);
    background-color: var(--primary-color);
    border-radius: max(min(3vw, 25px), 10px);
    display: inline-block;
    overflow: hidden;
    position: relative;
    transition: var(--transDur);
    z-index: 2;
  }

  .article-regular:hover {
    --color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 1.5svw 0.5svw var(--color);
    z-index: 3;
  }

  .article-regular a {
    text-decoration: underline;
  }

  .article-regular a.extern {
    color: inherit !important;
  }

  .article-regular ul {
    list-style: url("/resources/svg/flower.svg") inside;
    text-align: start;
    width: 100%;
  }

  .article-regular ul li::marker {
    font-size: 1.5em;
  }

  .article-regular>.article-content {
    padding: max(1svw, 10px);
    text-align: center;
  }

  .article-regular>.article-content .headline {
    color: var(--article-header-color);
    font-family: "Playwrite HR", cursive, sans-serif;
    font-size: max(1.75svw, 28px);
    font-weight: bolder;
    margin: 5px 0;
    text-align: center;
  }

  .article-regular.with_side_element {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .article-regular.with_side_element>.side_element {
    -o-object-fit: cover;
    min-height: 100%;
    object-fit: cover;
    width: 45svw;
  }

  /*.button*/
  .button {
    -webkit-border-radius: 10000px;
    -moz-border-radius: 10000px;
    background-color: var(--main-te-color);
    border: max(0.25rem, 4px) solid;
    border-color: var(--main-te-color);
    border-radius: 10000px;
    color: var(--primary-color);
    display: inline-block;
    font-size: max(1.5svw, 24px);
    font-weight: 550;
    margin: 10px 0;
    padding: max(0.15svw, 10px) max(0.8svw, 15px);
    text-align: center;
    text-decoration: none !important;
    transition: var(--transDur) ease-in-out;
  }

  .button:is(:hover, :focus) {
    background-color: transparent;
    color: var(--main-te-color);
  }

  /*.content*/
  .content {
    background-color: var(--primary-color-whitened);
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: max(1.5svw, 15px);
    padding: max(1.5svw, 12.5px);
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .content * {
    -webkit-animation: linear animate-in-and-out;
    animation-timeline: view();
    animation: linear animate-in-and-out;
  }

  /*.footer*/
  .footer {
    background-color: var(--main-bg-color);
    color: var(--primary-color);
    font-size: max(0.85svw, 16px);
    font-weight: 600;
    padding: max(0.4svw, 5px);
    text-align: center;
  }

  .footer a {
    color: var(--primary-color);
    font-size: max(0.85svw, 16px);
    font-weight: 600;
    text-decoration: underline;
  }

  .footer>div {
    align-items: center;
    color: inherit;
    display: flex;
    font-size: 1.5em;
    justify-content: center;
    overflow: visible;
  }

  /*.menu*/
  .menu {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    height: 1em;
    margin-left: auto;
    position: relative;
    width: 1.2em;
  }

  .menu span {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    background-color: var(--main-bg-color-inverted);
    border-radius: 1em;
    height: max(0.4em, 6px);
    position: absolute;
    right: 0;
    transition: var(--transDur) ease;
    width: 100%;
  }

  .menu span.top {
    top: 0;
  }

  .menu span.middle {
    top: 50%;
    translate: 0 -50%;
  }

  .menu span.bottom {
    top: 100%;
    translate: 0 -100%;
  }

  .menu .menu-check {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: none;
    visibility: hidden;
  }

  .menu-check:checked~span.top {
    right: 50%;
    rotate: -45deg;
    top: 50%;
    translate: 50% -50%;
  }

  .menu-check:checked~span.middle {
    opacity: 0;
  }

  .menu-check:checked~span.bottom {
    right: 50%;
    rotate: 45deg;
    top: 50%;
    translate: 50% -50%;
  }

  /*.theme*/
  .theme {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    user-select: none;
  }

  .theme * {
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    cursor: pointer;
    user-select: none;
  }

  .theme__icon-part {
    box-shadow: 0.4em -0.4em 0 0.5em var(--light) inset;
  }

  .theme__icon,
  .theme__icon-part,
  .theme__icon-sunray {
    position: absolute;
  }

  .theme__circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    aspect-ratio: 1 / 1;
    background-color: var(--theme-circle);
    border-radius: 50%;
    content: "";
    height: 2.5em;
    left: 0;
    margin: 0.25em;
    position: absolute;
    top: 0;
    transition: var(--transDur);
  }

  .theme__icon {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    transition-duration: var(--transDur);
    width: 100%;
  }

  .theme__icon>.theme__icon-part {
    border-radius: 50%;
    height: 0.7em;
    left: 50%;
    top: 50%;
    transition: transform var(--transDur) ease-in-out;
    translate: -50% -50%;
    width: 0.7em;
  }

  .theme__icon-sunray {
    aspect-ratio: 1 / 1;
    display: grid;
    height: 100%;
    left: 0;
    place-content: center;
    place-items: center;
    top: 0;
  }

  .theme__icon-sunray>.theme__icon-part {
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    background-color: var(--light);
    border-radius: 0.2em;
    height: 0.45em;
    top: 50%;
    transform: translateY(0.5em);
    transform-origin: 50% 0;
    transition: opacity var(--transDur) ease-in-out,
      transform var(--transDur) ease-in-out;
    width: 0.2em;
  }

  .theme__icon-part:nth-child(2) {
    transform: rotate(45deg) translateY(0.5em);
  }

  .theme__icon-part:nth-child(3) {
    transform: rotate(90deg) translateY(0.5em);
  }

  .theme__icon-part:nth-child(4) {
    transform: rotate(135deg) translateY(0.5em);
  }

  .theme__icon-part:nth-child(5) {
    transform: rotate(180deg) translateY(0.5em);
  }

  .theme__icon-part:nth-child(6) {
    transform: rotate(225deg) translateY(0.5em);
  }

  .theme__icon-part:nth-child(7) {
    transform: rotate(270deg) translateY(0.5em);
  }

  .theme__icon-part:nth-child(8) {
    transform: rotate(315deg) translateY(0.5em);
  }

  .theme__label,
  .theme__toggle,
  .theme__toggle-wrap {
    position: relative;
  }

  .theme__toggle,
  .theme__circle {
    display: block;
  }

  .theme__toggle {
    -webkit-border-radius: 25% / 50%;
    -moz-border-radius: 25% / 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--theme-toggle);
    border-radius: 25% / 50%;
    height: 3em;
    transition: background-color var(--transDur) ease-in-out,
      transform var(--transDur) ease-in-out,
      -webkit-filter var(--transDur) ease-in-out;
    transition: background-color var(--transDur) ease-in-out,
      transform var(--transDur) ease-in-out, -webkit-filter var(--transDur) ease-in-out;
    transition: background-color var(--transDur) ease-in-out,
      transform var(--transDur) ease-in-out, filter var(--transDur) ease-in-out;
    transition: background-color var(--transDur) ease-in-out,
      transform var(--transDur) ease-in-out, filter var(--transDur) ease-in-out,
      -webkit-filter var(--transDur) ease-in-out;
    width: 6em;
  }

  .theme__toggle:focus {
    outline: transparent;
  }

  .theme__toggle:checked {
    background-color: var(--theme-toggle);
  }

  .theme__toggle:checked~.theme__circle {
    background-color: var(--theme-circle);
    transform: translateX(3em);
  }

  .theme__toggle:checked~.theme__circle>.theme__icon>.theme__icon-part {
    box-shadow: 0.125em -0.125em 0 0.125em var(--light) inset;
    transform: scale(2.15);
  }

  .theme *:is(:hover, :focus) .theme__toggle,
  .theme__toggle:is(:hover, :focus) {
    -webkit-filter: drop-shadow(0 0 0.2em var(--main-bg-color-inverted));
    filter: drop-shadow(0 0 0.2em var(--main-bg-color-inverted));
  }

  .theme__toggle:checked~.theme__circle>.theme__icon>.theme__icon-sunray>.theme__icon-part {
    opacity: 0;
  }

  .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(2) {
    transform: rotate(45deg) translateY(0.8em);
  }

  .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(3) {
    transform: rotate(90deg) translateY(0.8em);
  }

  .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(4) {
    transform: rotate(135deg) translateY(0.8em);
  }

  .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(5) {
    transform: rotate(180deg) translateY(0.8em);
  }

  .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(6) {
    transform: rotate(225deg) translateY(0.8em);
  }

  .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(7) {
    transform: rotate(270deg) translateY(0.8em);
  }

  .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(8) {
    transform: rotate(315deg) translateY(0.8em);
  }

  .theme__toggle:checked~.theme__icon .theme__icon-part:nth-child(9) {
    transform: rotate(360deg) translateY(0.8em);
  }

  .theme__toggle:is(:hover, :focus) {
    overflow: visible;
  }

  /*.top_bar*/
  .top_bar {
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
  }

  .top_bar,
  .top_bar * {
    background-color: var(--main-bg-color);
    color: var(--primary-color);
  }

  .top_bar>.top {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: max(6.25px, min(15px, 1.25svw)) max(10px, min(25px, 2svw));
  }

  .top_bar>.top>.logo-and-title {
    display: flex;
    flex-wrap: nowrap;
    gap: max(10px, min(25px, min(2svw, 2vh)));
    justify-content: flex-start;
  }

  .top_bar>.top>.logo-and-title>h1 {
    font-family: "Playwrite HR", cursive, sans-serif;
    font-size: max(5.7svw, 20px);
    font-weight: bolder;
    text-align: left;
  }

  .top_bar>.top>.logo-and-title>h1>span {
    font-family: "Playwrite HR", cursive, sans-serif;
    font-size: 1em;
    font-weight: bolder;
    text-align: left;
  }

  .top_bar>.top>.logo-and-title>#icon {
    pointer-events: none;
    width: calc(max(5.7svw, 20px) * 1.25);
  }

  .top_bar>.top>.menu {
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    appearance: none;
    cursor: pointer;
    display: none;
    font-size: max(8svw, 20px);
    font-weight: bold;
    margin-left: auto;
    user-select: none;
    visibility: hidden;
  }

  .top_bar>.navigation {
    text-align: center;
    width: 100%;
  }

  .top_bar>.navigation>.link-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 5px max(15px, 7.5svw);
    justify-content: center;
    padding: 0.25svw;
  }

  .top_bar>.navigation>.link-wrapper>a {
    color: var(--nav-a-color);
    font-size: max(1.2svw, 20px);
    font-weight: 600;
    transition-duration: var(--transDur);
  }

  .top_bar>.navigation>.link-wrapper>a:is(:hover, :focus) {
    transform: scale(1.05);
  }

  .top_bar>#flowers {
    align-self: center;
    height: max(4svw, 25px);
    max-width: 80svw;
  }

  /*media queries*/
  @media (max-width: 992px) {

    /*.article-regular*/
    .article-regular.with_side_element {
      align-items: center;
      flex-direction: column !important;
    }

    .article-regular.with_side_element>.side_element {
      width: 100%;
    }
  }

  @media (max-width: 576px) {

    /*standards/defaults*/
    * {
      font-size: max(3.9svw, 10px);
    }

    /*.article-regular*/
    .article-regular .headline {
      font-size: max(5.5svw, 20px);
    }

    /*.button*/
    .button {
      border-width: calc(3px + 0.125rem);
      font-size: calc(10px + 2.5svw);
      padding: calc(5px + 0.75svw) calc(7.5px + 1.5svw);
    }

    /*.footer*/
    .footer,
    .footer a {
      font-size: max(3.5svw, 8px);
    }

    /*.top_bar*/
    .top_bar {
      -webkit-user-select: none;
      -ms-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    .top_bar>.top {
      padding: 2svw 4svw;
    }

    .top_bar>.top>.logo-and-title {
      gap: 0;
      justify-content: center;
      padding: 0;
    }

    .top_bar>.top>.logo-and-title>h1 {
      font-size: max(10svw, 20px);
    }

    .top_bar>.top>.logo-and-title>h1>span {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      display: none;
      visibility: hidden;
    }

    .top_bar>.top>.logo-and-title>#icon {
      width: calc(max(10svw, 20px) * 1.25);
    }

    .top_bar>.top>.menu {
      display: inline-block;
      visibility: visible;
    }

    .top_bar>.navigation {
      z-index: -1;
    }

    .top_bar>.navigation>.link-wrapper {
      border-radius: 0 0 4svw 4svw;
      box-sizing: border-box;
      flex-direction: column;
      gap: 2px;
      overflow: hidden;
      padding-bottom: 0.5em;
      position: absolute;
      transition: translate var(--transDur) ease-in-out;
      translate: 0 -100%;
      width: 100svw;
    }

    .top_bar>.navigation>.link-wrapper>a {
      align-self: center;
      font-size: max(5svw, 20px);
    }

    .top_bar>#flowers {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      display: none;
      visibility: hidden;
    }

    .top_bar:has(> div > .menu > .menu-check:checked, > nav > div:is(:hover, :focus, :focus-within))>nav>div {
      translate: 0 0;
    }
  }

  @media (max-width: 300px) {

    /*standards/defaults*/
    * {
      font-size: 10px;
    }

    /*.article-regular*/
    .article-regular {
      border-radius: 0;
    }

    .article-regular .headline {
      font-size: 8svw;
    }

    /*.content*/
    .content {
      gap: 10px;
      padding: 10px 0;
    }

    /*.top_bar*/
    .top_bar>.top>.logo-and-title>h1 {
      font-size: 12svw;
    }

    .top_bar>.top>.logo-and-title>#icon {
      width: calc(12svw * 1.25);
    }

    .top_bar>.top>.menu {
      font-size: 12svw;
    }

    .top_bar>.navigation>.link-wrapper>a {
      font-size: 8svw;
    }
  }

  @-webkit-keyframes move-out {
    from {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }

    to {
      -webkit-filter: blur(4px);
      filter: blur(4px);
      opacity: 0;
    }
  }

  @keyframes move-out {
    from {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }

    to {
      -webkit-filter: blur(4px);
      filter: blur(4px);
      opacity: 0;
    }
  }

  @-webkit-keyframes move-in {
    from {
      -webkit-filter: blur(4px);
      filter: blur(4px);
      opacity: 0;
    }

    to {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }

  @keyframes move-in {
    from {
      -webkit-filter: blur(4px);
      filter: blur(4px);
      opacity: 0;
    }

    to {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1;
    }
  }