/*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(168, 0, 0);
    --primary-color-whitened: rgb(192, 96, 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(3.8svw, 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(3.8svw, 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;
    }
}