html,
body {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    background-color: #0E0E0E;
    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

.gloock-regular {
    font-family: "Gloock", serif;
    font-weight: 400;
    font-style: normal;
}

.playfair-display {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
}

html, body.impressum {
    overflow: scroll !important;
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;

    &.impressum {
        flex-direction: column;
        justify-content: flex-start;
        align-items: baseline;
        height: 50px;
    }

    .header:has(.hamburger.open) .impressum {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .header {
        position: absolute;
        top: 20px;
        left: 20px;
        width: calc(100vw - 40px);
        display: flex;
        justify-content: space-between;
        z-index: 2;

        .hamburger {
            cursor: pointer;

            &.open {
                margin-top: 12.5px;
                height: 15px;
            }
        }

        .impressum {
            color: white;
            text-decoration: none;
            position: absolute;
            margin-top: 7.5px;
            margin-left: 35px;
            opacity: 0;
            visibility: hidden;
            transform: translateX(-100%);
            transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
            cursor: pointer;
        }

        .details {
            display: flex;
            gap: 20px;
            width: 250px;
            justify-content: right;

            .text {
                text-align: right;
                white-space: nowrap;
                font-size: 16px;
                line-height: 1.2;
            }

            .qr {
                width: 35px;
                height: 35px;
            }
        }
    }

    .background {
        position: absolute;
        display: flex;
        height: 100vh;
        width: 100vw;
        background-image: url(media/background.png);
        background-position: center;
        background-size: cover;
        -webkit-mask-image: radial-gradient(black, transparent);
        mask-image: radial-gradient(black, transparent 80%);
    }

    .semicircle {
        position: absolute;
        left: 20px;

        &.right {
            left: unset;
            right: 20px;
            rotate: 180deg;
        }
    }

    .plus {
        position: absolute;
        bottom: 20px;
        left: 20px;

        &.right {
            left: unset;
            right: 20px;
        }
    }

    .design {
        position: absolute;
        bottom: 20px;
        opacity: 0.5;
    }

    .stats {
        display: flex;
        flex-direction: row;
        gap: 90px;
        z-index: 1;
        position: absolute;
        bottom: 20px;

        .stat {
            display: flex;
            flex-direction: column;
            align-items: center;

            .number {
                font-weight: 600;
                font-size: 50px;
            }

            .text {
                font-weight: 300;
                font-size: 25px;
                text-align: center;
            }
        }
    }

    .centre {
        z-index: 1;
        width: 57.7vw;
        display: flex;
        flex-direction: column;
        gap: 15px;
        max-width: 840px;

        .star {
            position: absolute;
            margin-top: -490px;
            margin-left: -400px;
            z-index: -1;
            opacity: 0.6;
        }

        .miobrand {
            width: 540px;
            margin-left: -80px;
        }

        .text {
            font-size: 35px;
            font-family: "Playfair Display";
            white-space: nowrap;
            align-self: flex-end;
            margin-top: -145px;
            text-align: right;
            width: calc(57.7vw - 150px);
            text-wrap: unset;

            &.mobile {
                display: none;
            }
        }

        .buttons {
            font-size: 22px;
            font-weight: 400;
            align-self: flex-end;

            .button {
                font-style: italic;

                &.highlight {
                    font-style: normal;
                    border: solid 2px rgba(255, 255, 255, 0.2);
                    border-radius: 70px;
                    padding: 6px 20px;
                    transition: background-color 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
                    cursor: pointer;
                }

                &.highlight:hover {
                    background-color: rgba(255, 255, 255, 0.113);
                }
            }
        }
    }
}

.legal {
    padding-inline: 50px;
}

h1 {
    margin-bottom: -3px;
}

h2 {
    margin-bottom: -10px;
}

@media (max-width: 855px) {
    body {
        overflow: hidden !important;
        height: 100svh;
    }

    .details {
        display: none;
    }

    .hero {
        overflow: hidden;

        .header {
            position: absolute;
            top: 20px;
            width: calc(100vw - 40px);
            display: flex;
            justify-content: space-between;

            .details {
                display: none;
            }
        }

        .background {
            position: absolute;
            display: flex;
            height: 70vh;
            width: 100vw;
            background-image: url(media/background.png);
            background-position: 50% 0%;
            background-size: cover;
            -webkit-mask-image: radial-gradient(black, transparent 70%);
            mask-image: radial-gradient(black, transparent 70%);
            top: -20vh;
        }

        .centre {
            align-items: center;

            .star {
                display: none;
            }

            .miobrand {
                width: 500px;
                margin-left: -80px;
                margin-bottom: 15px;
                /* margin-top: -15vh; */
            }

            .text {
                display: none;

                &.mobile {
                    position: relative;
                    display: unset;
                    width: unset;
                    font-size: 20px;
                    /* margin-top: -300px; */
                }
            }

            .buttons {
                font-size: 15px;
                font-weight: 400;
                align-self: flex-end;

                .button {
                    font-style: italic;

                    &.highlight {
                        font-style: normal;
                        border: solid 1px rgba(255, 255, 255, 0.2);
                        border-radius: 70px;
                        padding: 4px 13px;
                    }
                }
            }
        }

        .semicircle {
            display: none;
        }

        .plus {
            display: none;
        }

        .design {
            width: 40vw;
            max-width: 261px;
        }

        .stats {
            display: flex;
            flex-direction: row;
            gap: 90px;
            z-index: 1;
            position: absolute;
            bottom: 20px;

            .stat {
                .number {
                    font-size: 25px;
                }

                .text {
                    font-size: 15px;
                }
            }
        }
    }
}