/** Homepage */
.homepage-main-section {
    width: 100%;
    margin: 0;
    padding-bottom: 35%;
    background-size: cover;
    border-image-width: 20px;
    min-height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.5));
}
.homepage-main-section .home-header-arrows {
    position: absolute;
    left: 5%;
    bottom: -5%;
    width: 7%;
}
.homepage-main-section .masked-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-image: url("/paper/illustrations/capsule.webp");
    background-size: cover;
    background-repeat: no-repeat;
    mask-image: url('/paper/mask/home-header.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: 50% 100%;
    -webkit-mask-image: url('/paper/mask/home-header.svg');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 100%;
}

.homepage-main-text {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.homepage-video-container {
    position: absolute;
    aspect-ratio: 16/9;
    width: 30%;
    max-height: 30%;
    right: 3%;
    bottom: 15%;
    display: inline-block;
    padding: 0;
}
.homepage-video-container iframe {
    width: 100%;
    height: 100%;
}
.homepage-video-container-inner {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-image: url('/paper/elements/patch-video.png') 50;
    border-image-outset: 10px;
    border-image-width: 80px;
    pointer-events: none;
}
.homepage-description-section, .homepage-news-section, .homepage-features-section,
.homepage-pictures-section, .homepage-faq-section, .homepage-health-section {
    padding: 25px;
}

.homepage-description-section p {
    position: relative;
}
.homepage-description-section p::after {
    content: ' ';
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: -1em;
    width: 2em;
    height: 2em;
    background-image: url("/paper/elements/stars-desc.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.news-container {
    position: relative;
    border: 3px solid #B69881;
    border-radius: 40px;
    background: rgba(219, 193, 175, 0.2);
    padding: 30px 30px 0;
    margin: 2em 2em 0.1em;
}
.news-container::before {
    content: ' ';
    display: inline-block;
    width: 1.7em;
    aspect-ratio: 40/85;
    background-image: url("/paper/elements/stars-news-before.svg");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: -2.5em;
    top: -0.5em;
}
.news-container::after {
    content: ' ';
    display: inline-block;
    width: 2.5em;
    aspect-ratio: 65/85;
    background-image: url("/paper/elements/stars-news-after.svg");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: -3em;
    bottom: 1.5em;
}
.news-container .article {
    display: inline-block;
    width: 100%;
    background: url('/paper/elements/bg-article.png') repeat;
    border-image: url('/paper/elements/patch-article.png') 55;
    border-image-outset: 15px;
    border-image-width: 70px;
    color: #916E53;
    text-decoration: none;
    font-family: 'VSPencil', Arial, sans-serif;
    text-align: center;
}
.news-container .article a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
.news-container .article img {
    padding: 4px;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    width: 100%;
}
.news-container h2 {
    font-size: 1.7em;
    display: inline-block;
    font-family: 'VSPencil', Arial, sans-serif;
    padding: 0;
    margin: 0 8px;
    line-height: 1.6em;
    max-width: 100%;
}
.news-container p {
    font-family: 'montserrat', Arial, sans-serif;
    margin: 0;
    padding: 0 10px 10px;
    line-height: 1em;
}
.news-container .see-more, .news-container .see-more:hover, .news-container .see-more:active, .news-container .see-more:visited {
    text-decoration: none;
    color: #916E53;
    font-family: 'VSPencil', Arial, sans-serif;
    display: inline-block;
    background-image: url("/paper/lines/see-more-outline.svg");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    font-size: 1.5em;
    padding: 0.4em;
}
.support-us-note {
    display: inline-block;
    background-image: url("/paper/elements/support-us-note.png");
    background-size: contain;
    background-position: 50% 50%;
    aspect-ratio: 1 !important;
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: -20px;
}
.support-us-content {
    font-family: 'VSPencil', Arial, sans-serif;
    color: #876852;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
    padding: 10%;
}
.support-us-content strong {
    font-family: 'VSFont', "Arial Black", sans-serif;
}
.support-us-content .steam-link,
.support-us-content .patreon-link {
    display: inline-block;
    aspect-ratio: 270/70;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    text-decoration: none;
    color: #876852;
    width: 70%;
    font-size: 1.5em;
}
.support-us-content .steam-link {
    background-image: url("/paper/elements/support-steam-link.svg");
}
.support-us-content .patreon-link {
    background-image: url("/paper/elements/support-patreon-link.svg");

}
.homepage-features-section {
    position: relative;
}
.feature-block::before {
    content: ' ';
    display: inline-block;
    aspect-ratio: 1;
    width: 1.5em;
    position: absolute;
    left: -1.2em;
    top: -1.2em;
    background-image: url("/paper/elements/stars-features-before.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.homepage-features-section::before {
    content: ' ';
    display: inline-block;
    aspect-ratio: 0.9;
    width: 10em;
    max-width: 25%;
    position: absolute;
    top: -4em;
    right: 2em;
    background-image: url("/paper/elements/before-features.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.homepage-features-section::after {
    content: ' ';
    display: inline-block;
    aspect-ratio: 1;
    width: 3em;
    position: absolute;
    bottom: -2em;
    right: 30%;
    background-image: url("/paper/elements/stars-features-after.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.homepage-features-section .feature-block {
    display: inline-block;
    position: relative;
    border: 3px solid #B69881;
    border-radius: 40px;
    background: rgba(219, 193, 175, 0.2);
    padding: 30px;
    margin: 5px;
    color: #916E53;
}
.homepage-health-section {
    width: 100%;
    text-align: center;
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding-bottom: 12vw;
    overflow-x: hidden;
}
.homepage-health-section .masked-image-top,
.homepage-health-section .masked-image-center,
.homepage-health-section .masked-image-bottom {
    position: absolute;
    display: inline-block;
    background-image: url("/paper/elements/blue.jpg");
    background-repeat: repeat;
    background-attachment: local;
    background-position-y: 0;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.homepage-health-section .masked-image-top {
    top: 0;
    left: 0;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-image: url('/paper/mask/health-top.svg');
    mask-repeat: no-repeat;
    mask-position: 50% 0;
    -webkit-mask-image: url('/paper/mask/health-top.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 0;
}
.homepage-health-section .masked-image-bottom {
    bottom: 0;
    left: 0;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-image: url('/paper/mask/health-bottom.svg');
    mask-repeat: no-repeat;
    mask-position: 50% 100%;
    -webkit-mask-image: url('/paper/mask/health-bottom.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 100%;
}
.homepage-health-section .masked-image-center {
    top: 17vw;
    left: 0;
    height: calc(100% - 28vw);
    background-position-y: -17vh;
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-image: url('/paper/mask/black.svg');
    -webkit-mask-image: url('/paper/mask/black.svg');
    mask-repeat: repeat;
    -webkit-mask-repeat: repeat;
}
.homepage-health-content {
    z-index: 1;
    position: relative;
    padding-top: 10%;
}
.homepage-health-section p {
    padding-left: 10%;
    padding-right: 10%;
    color: white;
    font-size: 1em;
    font-family: 'montserrat', Arial, sans-serif;
}
.homepage-health-section h1 {
    color: white;
    text-shadow: #0E1B31 0 0 10px;
}
.health-element {
    position: relative;
    display: inline-block;
    width: 90%;
    height: 100%;
    background: #FFF7F3;
    color: #597298;
    border-radius: 30px;
    box-shadow: #0E1B31 0 2px 20px;
    padding: 5px;
    margin-bottom: 20px;
}
.health-element-first::before {
    content: ' ';
    display: inline-block;
    width: 3em;
    height: 3em;
    background: url("/paper/elements/home-health-left.svg") no-repeat;
    background-size: contain;
    position: absolute;
    top: -4em;
    left: -4em;
}
.health-element-first::after {
    content: ' ';
    display: inline-block;
    width: 3em;
    height: 3em;
    background: url("/paper/elements/home-health-middle.svg") no-repeat;
    background-size: contain;
    position: absolute;
    top: -1.5em;
    right: -4em;
}
.health-elements-row {
    position: relative;
}
.health-elements-row::after {
    content: ' ';
    display: inline-block;
    width: 8em;
    height: 8em;
    background: url("/paper/elements/home-health-middle-right.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: -2em;
    right: -5em;
}
.health-element-last::before {
    content: ' ';
    display: inline-block;
    width: 5em;
    height: 5em;
    background: url("/paper/elements/home-health-plus.svg") no-repeat;
    background-size: contain;
    position: absolute;
    top: calc(50% - 2.5em);
    right: -6em;
}
.health-element-last::after {
    content: ' ';
    display: inline-block;
    width: 4em;
    height: 4em;
    background: url("/paper/elements/home-health-bottom-right1.svg") no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 1em;
    right: -6em;
}
.health-element h2 {
    font-size: 1.5em;
}
.health-element p {
    color: #597298;
    font-family: 'montserrat', Arial, sans-serif;
}
.health-arrows {
    display: inline-block;
    position: absolute;
    left: 0;
    top: -20px;
    width: 100%;
    aspect-ratio: 12 !important;
}
.health-left-arrow {
    height: 100%;
    position: absolute;
    left: 20px;
    top: 0;
}
.health-right-arrow {
    height: 100%;
    position: absolute;
    right: 20px;
    top: 0;
}
.homepage-pictures-background {
    text-align: center;
    color: white;
    background: url('/paper/illustrations/forest.webp') no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    aspect-ratio: 1920/1800;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-image: url('/paper/mask/home-photos.svg');
    -webkit-mask-image: url('/paper/mask/home-photos.svg');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    padding-top: 13vw;
    padding-bottom: 13vw;
    position: relative;
}
.homepage-pictures-stars {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/paper/elements/home-photos-stars.svg") no-repeat;
    background-size: contain;
}
.homepage-pictures-section {
    filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.5));
    padding: 0;
}
.homepage-pictures-container {
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.homepage-pictures-container::before {
    content: ' ';
    display: inline-block;
    aspect-ratio: 1;
    width: 3em;
    position: absolute;
    bottom: 0;
    left: 25%;
    background-image: url("/paper/elements/stars-pictures-bottom-left.svg");
    background-repeat: no-repeat;
    background-size: contain;
}
.homepage-pictures-container::after {
    content: ' ';
    display: inline-block;
    aspect-ratio: 2.2;
    width: 14em;
    position: absolute;
    bottom: -3em;
    right: 2em;
    background-image: url("/paper/elements/pictures-after-right.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.homepage-pictures-section h1 {
    color: white;
    font-size: 1.7em;
    padding: 0.5em;
    display: inline-block;
}
.homepage-pictures-section .carousel img {
    border-radius: 2.5em;
}
.homepage-pictures-section .carousel-item {
    text-align: center;
    width: 100%;
}
.homepage-pictures-section .carousel-indicators [data-bs-target] {
    border: 0;
    border-radius: 0.7em !important;
    aspect-ratio: 1 !important;
    width: 1.4em !important;
    height: 1.4em !important;
    position: relative;
    top: 3em;
}
.homepage-pictures-section .carousel-control-next {
    right: -16%;
    opacity: 1;
}
.homepage-pictures-section .carousel-control-prev {
    left: -16%;
    opacity: 1;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 4em !important;
}
.carousel-control-next-icon {
    background: url("/paper/icons/next.svg");
}
.carousel-control-prev-icon {
    background: url("/paper/icons/prev.svg");
}
.homepage-pictures-container .carousel-control-next-icon {
    background: url("/paper/icons/next-white.svg");
}
.homepage-pictures-container .carousel-control-prev-icon {
    background: url("/paper/icons/prev-white.svg");
}
.faq-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 15px solid;
    border-image: url('/paper/elements/patch-faq.svg');
    border-image-repeat: stretch round;
    border-image-slice: 12.5% fill;
}
.faq-container .accordion-item {
    border: 0;
    background: none;
}
.faq-container h2 {
    width: 100%;
    text-align: left;
}
.faq-container button {
    text-align: left;
    background: none;
    border: 0;
    width: 100%;
    color: #916E53;
    font-family: 'VSPencil', Arial, sans-serif;
    text-decoration: none;
}
.faq-container button:not(.collapsed) i {
    color: #A9B08C;
    transform: rotate(90deg);
}
.faq-container button i {
    color: #9EB3C1;
    float: right;
}
.faq-container .accordion-collapse .answer-part {
    color: white;
    font-family: 'montserrat', Arial, sans-serif;
    border: 35px solid #FFFFFF05;
    border-image-source: url('/paper/elements/patch-faq-question.svg');
    border-image-repeat: stretch;
    border-image-slice: 35% 25% 25% 50% fill;
}
.faq-container .accordion-collapse a, .faq-container .accordion-collapse a:hover, .faq-container .accordion-collapse a:active, .faq-container .accordion-collapse a:visited {
    color: white;
    text-decoration: underline;
}
.faq-separator {
    display: inline-block;
    width: 92%;
    height: 4px;
    background: url("/paper/lines/faq-between.png") repeat-x;
    background-size: cover;
}

/** the game */
.the-game h1 {
    margin: 0;
    display: inline-block;
    background-image: url("/paper/elements/our-values-title.svg");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding: 0.5em;
    z-index: 2;
}
.the-game h1 {
    margin: 0;
    display: inline-block;
    background-image: url("/paper/elements/our-values-title.svg");
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding: 0.5em;
    z-index: 2;
}
.values-container {
    background-image: url("/paper/elements/values-bg-top.svg"), url("/paper/elements/values-bg-middle.svg"), url("/paper/elements/values-bg-bottom.svg");
    background-size: contain, contain, contain;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 10% top, 10% center, -10% bottom;
}
.value-container, .value-container-even {
    position: relative;
    border: 30px solid;
    border-image: url('/paper/elements/patch-values-odd-2.svg');
    border-image-repeat: stretch stretch;
    border-image-slice: 45 45 fill;
    padding: 0;
    padding-top: 3em;
    padding-bottom: 0.5em;
    text-align: center;
    margin-bottom: 2em;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
}
.value-container h2, .value-container-even h2 {
    position: relative;
    padding-bottom: 0.1em;
    color: #876852;
}
.value-container p, .value-container-even p {
    font-family: 'montserrat', Arial, sans-serif;
    color: #876852;
}
.value-container h2::before {
    content: ' ';
    display: inline-block;
    background: url("/paper/elements/values-line-blue.svg") no-repeat;
    background-size: contain;
    aspect-ratio: 128/6;
    width: 4em;
    position: absolute;
    bottom: 0;
    left: calc(50% - 2em);
}
.value-container-even h2::before {
    content: ' ';
    display: inline-block;
    background: url("/paper/elements/values-line-green.svg") no-repeat;
    background-size: contain;
    aspect-ratio: 128/6;
    width: 4em;
    position: absolute;
    bottom: -0.05em;
    left: calc(50% - 2em);
}
.value-container-even {
    border-image-source: url('/paper/elements/patch-values-even-2.svg');
}
.value-container img, .value-container-even img {
    position: absolute;
    width: 6em;
    left: calc(50% - 3em);
    top: -4em;
}
.value-container p, .value-container-even p {
    font-family: 'montserrat', Arial, sans-serif;
}
.the-game h1 {
    padding: 1em 1.5em;
}