@import "./normalize.css";
@font-face {
    font-family: 'NaiveInlineSansMedium';
    src: url("./font/NaiveInlineSansMedium.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: 'BellGothicLight';
    src: url("font/BellGothicLight.otf") format("opentype");,
    font-display: swap;
}

html {
    min-height: -webkit-fill-available; /* Chrome, Safari */
    min-height: fill-available;
    min-height: 100%;
}

body {
    overflow-x: hidden;
    /*overflow-y: hidden;*/
    display: flex;
    flex-direction: column;
    background: white;
}

:root {
    --bg-size: 190%;
    --font-size: 6.5lvw;
    --big-font-size: 60lvw;
    --color-red: #7c1324;
    --color-gold: #d9ab5d;
    --arrow-color: var(--color-gold);
    --img-size: 88lvw;
    --sig-size: 48lvw;
    --sig-margin: 0;
    --container-padding-x: 15px;
    --container-padding-y: 3rem;
    --section-height: 100lvh;
}

@supports (-webkit-touch-callout: none) {
    .parallax {
        background-attachment: scroll; /* Kein "fixed" */
    }

    .text-container {
        padding: var(--container-padding-y) var(--container-padding-x);
    }
}

@media screen and (min-width: 600px) {
    :root {
        --bg-size: 130%;
        --font-size: 5.5lvw;
        --big-font-size: 42lvw;
        --img-size: 50lvw;
        /*--sig-margin: -5lvh;*/
        --sig-size: 30lvw;
    }
}

@media screen and (min-width: 926px) {
    :root {
        --bg-size: contain;
        --font-size: 2.5rem;
        --big-font-size: 18rem;
        --img-size: 27rem;
        --sig-size: 15rem;
    }
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
}

.text-container {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: -webkit-fill-available; /* Chrome, Safari */
    min-height: fill-available;
    min-height: 100%;
    width: 100%;
    transition: background-size .3s ease-in;
}

#fire {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.parallax {
    min-height: -webkit-fill-available; /* Chrome, Safari */
    min-height: fill-available;
    min-height: 100lvh;
    background-image: url("img/punkte-gold.svg"), url("./img/bg-quadrat-neu-repeat.jpg");
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    background-attachment: scroll;
    background-size: var(--bg-size);
    transition: opacity .8s ease-out;

}

#50 {
    opacity: 1;
}

#fire {
    opacity: 0;
}

.space-between {
    justify-content: space-evenly;
}

p {
    text-align: center;
    display: block;
    margin: 0;
}

.naive-font {
    font-family: NaiveInlineSansMedium, serif;
}

.normal-font {
    font-family: BellGothicLight, serif;
}

.normal-font {

}

.text-gold {
    color: var(--color-gold);
}

.text-red {
    color: var(--color-red);
}

.normal-text {
    /*transform: translateY(-15%);*/
    font-size: var(--font-size);
}

.big-text {
    transform: translateY(-5lvh);
    -webkit-transform: translateY(-5lvh);
    font-size: var(--big-font-size);
}

.img-prosecco {
    width: var(--img-size);
    height: auto;
    transform: translate(-.3%); /* translate(-1.3%) */
    -webkit-transform: translate(-.3%);
}

.circle {
    border-radius: 50%;
}

.img-sig {
    width: var(--sig-size);
    height: auto;
    margin: var(--sig-margin);
}

.bg-punkte-gold {
    background-image: url("img/punkte-gold.svg"), url("./img/bg-quadrat-neu-repeat.jpg");
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    background-size: var(--bg-size);
    transition: opacity .8s ease-out;
    opacity: 1;
}

.bg-punkte-rot {
    background: url("img/punkte-rot.svg") no-repeat center scroll, white;
    background-size: var(--bg-size);
    transition: opacity .8s ease-out;
    opacity: 1;
}

.bg-red {
    background: url("./img/bg-quadrat-neu-repeat.jpg") repeat center scroll;
}

.active {
    z-index: 1;
    opacity: 1;
}

.arrow-wrapper {
    bottom: 10lvh;
    position: absolute;
    display: flex;
    width: 100lvw;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.second-pos {
    opacity: 0;
    top: 100lvh;
}

.third-pos {
    top: 200lvh;
}

section {
    min-height: -webkit-fill-available; /* Chrome, Safari */
    min-height: fill-available; /* Chrome, Safari */
    min-height: 100lvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

#information {
    z-index: 5;
    /*min-height: fit-content;*/
}

#arrow {
    transform: rotate(90deg) scale(5);
    -webkit-transform: rotate(90deg) scale(5);
    animation: up-down 4s ease-in-out infinite;
    position: absolute;
    stroke-width: 2.5px;
    stroke: var(--arrow-color);
    cursor: pointer;
}

@keyframes up-down {
    0%, 30%, 100% {
        bottom: 0;
    }
    15% {
        bottom: 3lvh;
    }
}

@-webkit-keyframes up-down {
    0%, 30%, 100% {
        bottom: 0;
    }
    15% {
        bottom: 3lvh;
    }
}