/* Very awesome index.css :D */
:root {
    --primary-color-highlight: #56cec8;
    --primary-color: #d061d6;
    --expat-pastel-color-v1: #41ffcd;
}
@font-face {
    font-family: 'gochi';
    src: url('/resources/font/gochi.ttf');
}
*, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
}
::-webkit-scrollbar-track {
    background: #3b3b3b;
    /* background: linear-gradient( 180deg, #b3cbff, #b4ffd6, #fbfbb2, #ffc0bc, #febff2, #e7d0ff ) */
}
::-webkit-scrollbar {
    width: 11px;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border: 3px solid #3b3b3b;
    border-radius: 8px;
}
@media (max-width: 1420px) {
    header.cloud-navigation-wrapper { display: none!important; }
    .navigation-mid-container a { top: 0px!important; }
    .footer-fn .sections { flex-direction: column!important; gap: 12px; }
    .footer-fn .sections .mbdisplay { display: flex!important; }
}
.footer-fn .sections .mbdisplay { text-align:center; font-size: 14px; display: none; }
a {
    color: var(--primary-color-highlight);
    text-decoration: none;
}
.navigation-mid-container {
	display: flex;
	justify-content: center;
	position: relative;
	--height-icon: 300px;
	height: var(--height-icon);
}
.navigation-mid-container a { position: absolute; top: -88px; }
html, body {height: 100%;}
body {
    color: black;
    font-family: 'gochi', sans-serif;
    overflow-x: hidden;
    font-size: x-large;
}
body.body-nonscroll {
    display: flex;
    flex-direction: column;
}
.background-container-x {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -2;
    background: url('/resources/img/bg-2.png');
        background-size: auto;
    background-size: cover;
}
.cloud-booking {
    position: absolute;
    left: 30px;
    bottom: 150px;
    z-index: 100;
}
.form-field-booking {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    background: rgba(118, 29, 143, 0.2);
    height: 390px;
    border-radius: 8px;
    box-shadow: 0 0 5px 4px rgba(0, 0, 0, 0.04);
}
#conf-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

#ImageMenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}
#ImageMenu .wrapper {
    height: 80%;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ImageMenu .wrapper img {
    max-height: 80%;
    object-fit: contain;
    width: auto;
}

/* Navigation */
header.cloud-navigation-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    z-index: 100;
    position: relative;
}
header.cloud-navigation-wrapper > div { display: flex; }

.cloud-nav {
    background-image: url('/resources/img/cloud_single.png');
    background-size: cover;
    width: 210px;
    aspect-ratio: 1980/1080;
    transition: .2s transform, .3s filter;
    filter: drop-shadow(2px 2px 4px #0000001c);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
}
.cloud-nav:hover {
    transform: scale(1.08)!important;
    cursor: pointer;
    filter: drop-shadow(2px 2px 4px #0000003b);
}

/* Confetti part :D */

.confetti {
    opacity: 0.4;
    pointer-events: none;
    position: absolute;
    height: 32px;
    transition: transform 5s;
    width: 32px;
    border: none;
}

@keyframes fall-left {
    0% { transform: rotate( 0deg ) }
    100% { transform: rotate( 360deg ) }
}
@keyframes fall-right {
    0% { transform: rotate( 0deg ) }
    100% { transform: rotate( -360deg ) }
}

.fall-left {
    animation: fall-left ease-in-out forwards;
}

.fall-right {
    animation: fall-right ease-in-out forwards;
}

/* impressum */
#blogx {
    padding: 0 10%;
    color: var(--primary-color);
    text-shadow: 1px 1px 1px #000000b8;
    min-height: 190px;
}

#blogx h1,
#blogx h2,
#blogx h3,
#blogx h4,
#blogx h5 {
    margin: 12px 0;
}

#blogx span {
    margin: 8px 0;
}

/* footer */
.footer-fn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
	overflow: hidden;
}
.footer-fn .sections { position: absolute;bottom: 20px;z-index: 100;padding: 0 8%;display: flex;justify-content: space-between;flex-direction: row;width: 100%;color: #747275;align-items: center; }
/* art-page */
.art-section {
    background: rgb(96 92 92 / 20%);
    min-height: 320px;
    margin-top: 22px;
    backdrop-filter: blur(8px);
    border-radius: 10px;
    display: flex;
    padding: 12px 18px;
    max-width: 1520px;
    flex-direction: column;
}
.shx-collection {
    max-width: 100%;
    overflow-x: scroll;
    height: 100%;
    overflow-y: hidden;
    padding-bottom: 4px;
    max-height: 180px;
    display: flex;
    width: 100%;
    height: 180px;
}

.shx-collection::-webkit-scrollbar {
    height: 8px
}
.shx-collection::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.shx-collection img {
    height: 100%;
    object-fit: cover;
    width: auto;
    margin-left: 10px;
    opacity: .6;
    max-height: 150px;
}

.shx-collection img:first-child {
    margin-left: 0px;
}

.shx-collection img:hover {
    opacity: 1;
    cursor: pointer;
}

.shx-collection::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 8px;
    border: none;
}

.art-section .section-image-big {
    width: 100%;
    object-fit: contain;
    height: 100%;
}
.art-section .section-image-big:hover { cursor: pointer; }
.art-section .upper-container {
    justify-content: space-between;
    display: flex;
    margin-bottom: 42px;
}

.button-arts-adopts {
    border: none;
    padding: 4px 30px;
    border-radius: 4px;
    font-size: 1rem;
    height: 32px;
    color: #fff;
    background: linear-gradient(180deg,#e672ce,#de3cae);
    box-shadow: inset 0 2px 0 0 #e672ce,0 0 6px 0 rgba(0, 0, 0, 0.34);
    position: absolute;
    bottom: 10px;
    right: 12px;
}
.button-arts-adopts:hover {
    background: linear-gradient(180deg,#fd96e8,#fd72d3);
    box-shadow: inset 0 2px 0 0 #fd96e8,0 0 6px 0 rgba(0, 0, 0, 0.34);
    cursor: pointer;
}