/** 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: 38%;
	max-width: 640px;
	right: 3%;
	bottom: 12%;
	display: inline-block;
	padding: 0;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
	z-index: 2;
	background-color: rgba(0, 0, 0, 0.2);
}
.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-hero-copy {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	padding: 2rem 1.5rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

.homepage-hero-highlight {
	max-width: 520px;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #f5f1ea;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
	background: rgba(0, 0, 0, 0.35);
	border-radius: 24px;
	padding: 1.25rem 1.5rem;
}

.homepage-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'VSPencil', Arial, sans-serif;
	font-size: 1.1rem;
	padding: 0.9rem 1.75rem;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: none;
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.steam-cta {
	background: linear-gradient(135deg, #1b2838 0%, #3b6d9a 100%);
	color: #ffffff;
	box-shadow: 0 18px 35px rgba(20, 60, 100, 0.45);
}

.steam-cta:hover {
	box-shadow: 0 22px 40px rgba(20, 60, 100, 0.55);
}

.patreon-cta {
	background: linear-gradient(135deg, #ff6b6b 0%, #ff884d 100%);
	color: #ffffff;
	box-shadow: 0 18px 35px rgba(220, 70, 40, 0.45);
}

.patreon-cta:hover {
	box-shadow: 0 22px 40px rgba(220, 70, 40, 0.55);
}

.homepage-video-container img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.homepage-video-prompt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	color: #ffffff;
	z-index: 5;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.homepage-video-prompt.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.video-play-button {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: rgba(0, 0, 0, 0.7);
	border: 3px solid rgba(255, 255, 255, 0.8);
	border-radius: 999px;
	color: #ffffff;
	font-family: 'VSPencil', Arial, sans-serif;
	font-size: 1.2rem;
	padding: 0.65rem 1.8rem;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	pointer-events: auto;
}

.video-play-button:hover {
	transform: translateY(-2px) scale(1.02);
	background: rgba(0, 0, 0, 0.85);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
}

.video-play-icon {
	font-size: 1.6rem;
	line-height: 1;
}

.video-caption {
	max-width: 340px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #f5f1ea;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

@media screen and (max-width: 1200px) {
	.homepage-video-container {
		width: 45%;
		bottom: 8%;
	}
}

@media screen and (max-width: 992px) {
	.homepage-video-container {
		position: relative;
		width: 90%;
		right: auto;
		bottom: auto;
		margin: 2.5rem auto 0;
	}
	.homepage-hero-copy {
		padding-top: 3rem;
	}
	.homepage-video-prompt {
		gap: 0.5rem;
	}
}

@media screen and (max-width: 768px) {
	.homepage-hero-highlight {
		font-size: 1rem;
		padding: 1rem 1.25rem;
	}
	.cta-button {
		font-size: 1rem;
		padding: 0.8rem 1.5rem;
	}
	.homepage-video-container {
		width: 100%;
	}
	.video-play-button {
		font-size: 1.05rem;
		padding: 0.6rem 1.4rem;
	}
}
.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%;
    max-width: 980px;
}
.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;
}
.homepage-health-section .professional-use-link {
    padding-top: 1em;
    padding-bottom: 1em;
}
.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;
}