/* Homepage: the greeting animation on a white card, "Moin" stuck on its corner like a sticker */

.greeting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-height) - var(--nav-top) - 8px);
    min-height: calc(100svh - var(--nav-height) - var(--nav-top) - 8px);
    padding: 48px var(--gutter);
    box-sizing: border-box;
}

.greeting_card {
    position: relative;
    padding: clamp(16px, 3vw, 28px);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    background-color: #FFFFFF;  /* the animation has a white background, in both themes */
    box-shadow: 10px 10px 0 var(--ink);
}

.greeting h1 {
    position: absolute;
    top: -36px;
    left: -40px;
    z-index: 1;
    margin: 0;
    padding: 4px 22px 10px;
    border: var(--line) solid #111111;
    border-radius: var(--radius);
    background-color: var(--yellow);
    box-shadow: 5px 5px 0 #111111;
    color: var(--on-fill);
    font-family: var(--font-display);
    font-size: clamp(56px, 9vw, 96px);
    font-weight: normal;
    line-height: 0.95;
    rotate: -6deg;
}

/* The animation is 383px wide: on small phones it shrinks with the screen, on short screens with the height */
.greeting img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - var(--nav-height) - 200px);
    max-height: calc(100svh - var(--nav-height) - 200px);
    width: auto;
    height: auto;
}

/* Phones: centred in the space above the tab bar */
@media screen and (max-width: 760px) {
    .greeting {
        min-height: 100%;
        padding-top: 40px;
    }

    .greeting_card {
        box-shadow: 6px 6px 0 var(--ink);
    }

    .greeting h1 {
        left: -14px;
        top: -40px;
    }

    .greeting img {
        max-height: calc(100svh - var(--bottom-bar) - 220px);
    }
}