@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/jost/Jost-VariableFont_wght.ttf") format("truetype");
}
@font-face {
    font-family: "Jost";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/jost/Jost-Italic-VariableFont_wght.ttf") format("truetype");
}

.great-vibes-regular {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    font-family: "Jost", sans-serif;
}

body {
    width: 100%;
    height: 100%;
    background-color: #529AD9;
    display: flex;
    justify-content: center;
}

.container {
    background-color: #F2F6F6;
    max-width: 1480px;
}

.header {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 45rem;
    background-color: #F2F6F6;
}

.greeting {
    width: 40%;
    height: 100%;
    background-color: #46518C;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header__image {
    position: absolute;
    top: 0;
    left: 40%;
    width: 60%;
    height: 100%;
    background-image: url("img/Hintergrund.png");
    background-position: left center;
    padding-top: 15rem;
}

.header__heading {
    text-align: center;
    z-index: 1;
    color: #F2F6F6;
    font-weight: 400;
    margin-bottom: 1rem;
    font-size: 5rem;
    line-height: 92%;
    font-family: "Great Vibes", cursive;
}

.highlight {
    color: #8C2730;
}

.header__celebrate {
    margin-top: 1.5rem;
    width: 15rem;
    height: 2.5rem;
    outline: none;
    border-radius: 10000px;
    cursor: pointer;
    z-index: 1;
    color: #ffffff;
    border: 0.1rem solid #ffffff;
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
    transition: scale ease-in-out 0.35s, background-color 0.3s ease;
}

.header__celebrate:hover {
    scale: 1.05;
}

.content {
    width: 100%;
    height: 45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: #F2F6F6;
}

.content__heading {
    font-family: "Great Vibes", cursive;
    color: #46518C;
    font-size: 2rem;
}

.content__heading-extra {
    text-align: center;
    font-size: 1.1rem;
    color: #F2F6F6;
}

.content__text {
    width: 100%;
    line-height: 1.5rem;
    text-align: center;
    color: #46518C;
}

.content__box {
    margin-top: 2rem;
    padding: 1rem;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.offers {
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #A7CBD9;
}

.offers__horizontal {
    display: grid;
    grid-template-columns: 1fr 2rem 1fr;
    grid-template-rows: 1fr 2rem 1fr;
    padding: 2rem;
    margin-top: 2rem;
}

.offers__horizontal-holder {
    display: flex;
    flex-direction: column;
}

.image__holder {
    width: 30rem;
    height: 30rem;
    border-radius: 0.2rem;
    margin-top: 0.5rem;
}

.image__holder-image {
    width: 100%;
    cursor: pointer;
    height: 100%;
}

.offers__horizontal-first {
    grid-column: 1 ;
}

.offers__horizontal-second {
    grid-column: 3;
}

.offers__horizontal-third {
    grid-column: 1;
    grid-row: 3;
}

@keyframes firework {
    0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
    50% { width: 0.5vmin; opacity: 1; }
    100% { width: var(--finalSize); opacity: 0; }
}

.firework,
.firework::before,
.firework::after
{
    --initialSize: 0.5vmin;
    --finalSize: 45vmin;
    --particleSize: 0.2vmin;
    --color1: yellow;
    --color2: khaki;
    --color3: white;
    --color4: lime;
    --color5: gold;
    --color6: mediumseagreen;
    --y: -30vmin;
    --x: -50%;
    --initialY: 60vmin;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, var(--y));
    width: var(--initialSize);
    aspect-ratio: 1;
    background:
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
            radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
            radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
            radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
            radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
            radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
            radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
            radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
            radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
            radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
            radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
            radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
            radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
            radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
            radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
            radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
            radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
            radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
            radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
            radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
            radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
            radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%;
    background-size: var(--initialSize) var(--initialSize);
    background-repeat: no-repeat;
}

#firework1 {
    --color1: pink;
    --color2: violet;
    --color3: fuchsia;
    --color4: orchid;
    --color5: plum;
    --color6: lavender;
}

#firework3 {
    --color1: cyan;
    --color2: lightcyan;
    --color3: lightblue;
    --color4: PaleTurquoise;
    --color5: SkyBlue;
    --color6: lavender;
}

.firework::before {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
    transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
}

.firework::after {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
    transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
}

.firework:nth-child(2) {
    --x: 30vmin;
    --finalSize: 40vmin;
    left: 30%;
    top: 60%;
}

.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
    --color1: pink;
    --color2: violet;
    --color3: fuchsia;
    --color4: orchid;
    --color5: plum;
    --color6: lavender;
}

.firework:nth-child(3) {
    --x: -30vmin;
    --y: -50vmin;
    --finalSize: 35vmin;
    left: 70%;
    top: 60%;
}

.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
    --color1: cyan;
    --color2: lightcyan;
    --color3: lightblue;
    --color4: PaleTurquoise;
    --color5: SkyBlue;
    --color6: lavender;
}

/* Dies ist der EINZIGE Selektor, der die Animation auslösen darf */
.firework.animate-firework,
.firework.animate-firework::before,
.firework.animate-firework::after {
    animation: firework 3s ease-in-out forwards;
}

.footer {
    width: 100%;
    height: 20rem;
    background-color: #46518C;
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__heading {
    color: #8C2730;
    text-align: center;
    font-size: 1.5rem;
    text-transform: uppercase;
}

.countdown {
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-unit {
    color: #F2F6F6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6rem;
    margin: 1rem;
}

.timer {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F2F6F6;
    color: #46518C;
    font-size: 2rem;
    border-radius: 0.2rem;
    margin-bottom: 0.5rem;
}

.footer__link {
    color: #8C2730;
    text-decoration: none;
    margin-top: 1.5rem;
}

@media only screen and (max-width: 92.438rem) {
    .greeting {
        width: 30%;
    }

    .header__image {
        width: 70%;
        left: 30%;
    }
}

@media only screen and (max-width: 81.25rem) {

    .header {
        justify-content: center;
    }

    .greeting {
        width: 35%;
        z-index: 2;
        background-color: rgba(70, 81, 140, 0.5);
    }

    .header__image {
        width: 100%;
        left: 0;
    }

    .content__box {
        width: 40%;
    }
}

@media only screen and (max-width: 75rem) {
    .greeting {
        width: 94%;
        z-index: 2;
        background-color: rgba(70, 81, 140, 0.5);
    }

    .offers__horizontal {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2rem 1fr 2rem 1fr;
        padding: 2rem;
        margin-top: 2rem;
    }

    .offers__horizontal-first {
        grid-column: 1 ;
        grid-row: 1
    }

    .offers__horizontal-second {
        grid-column: 1;
        grid-row: 3;
    }

    .offers__horizontal-third {
        grid-column: 1;
        grid-row: 5;
    }
}

@media only screen and (max-width: 50rem) {
    .content__box {
        width: 70%;
    }

    .greeting {
        width: 100%;
        z-index: 2;
        background-color: rgba(70, 81, 140, 0.5);
    }
}

@media only screen and (max-width: 35rem) {
    .image__holder {
        width: 18rem;
        height: 18rem;
    }

    .header__heading {
        font-size: 3rem;
    }

    .timer-unit {
        width: 4rem;
        margin: 0.5rem;
    }

    .timer {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.5rem;
    }

    .content__box {
        width: 90%;
    }

    .offers__horizontal {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2rem 1fr 2rem 1fr;
        padding: 1rem;
        margin-top: 2rem;
    }
}

@media only screen and (max-width: 25rem) {
    .content {
        height: 55rem;
    }
}