@font-face {
    font-family: "Rose Gard";
    src: url("../rose_gard.otf") format("opentype");
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.app {
    position: relative;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    background: var(--body-bg);
    --shrubbery-scale: 1.5;
    --shrubbery-blur: 0.5px;
    --scene-bg-blur: 2px;
    --vine-left-scale: 0.92;
    --vine-right-scale: 0.82;
    --vine-left-top: 0;
    --vine-left-right: -24vw;
    --vine-right-top: 0;
    --vine-right-right: -7vw;
    --scene-bg-tint: rgba(0, 0, 0, 0.32);
}

.scene-bg,
#scene {
    position: absolute;
    inset: 0;
}

.scene-bg {
    z-index: 1;
    background-image:
        linear-gradient(var(--scene-bg-tint), var(--scene-bg-tint)),
        url("../images/tree_background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(var(--scene-bg-blur));
    transform: scale(1.02);
}

#scene {
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
}

.scene-title {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
    padding: 2rem;
    text-align: center;
}

.display-xl {
    margin: 0;
    color: var(--body-txt);
    font-family: "Rose Gard", serif;
    font-size: clamp(5rem, 18vw, 16rem);
    font-weight: 400;
    line-height: 0.9;
    text-shadow: 0 0.25rem 2rem rgba(0, 0, 0, 0.45);
}

.vine {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: contain;
    filter: blur(0.35px);
    transform-origin: right top;
}

.vine-left {
    top: var(--vine-left-top);
    right: var(--vine-left-right);
    width: min(58vw, 44rem);
    height: 150vh;
    background-image: url("../images/left_vine.png");
    opacity: 0.82;
    transform: scale(var(--vine-left-scale));
}

.vine-right {
    top: var(--vine-right-top);
    right: var(--vine-right-right);
    width: min(28vw, 20rem);
    height: 98vh;
    background-image: url("../images/right_vine.png");
    opacity: 0.92;
    transform: scale(var(--vine-right-scale));
}

.shrubbery {
    position: absolute;
    inset: -4px;
    z-index: 5;
    pointer-events: none;
    background-image: url("../images/shrubbery_trans.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(var(--shrubbery-blur));
    transform: scale(var(--shrubbery-scale));
    transform-origin: center bottom;
}

@media (max-width: 64rem) {
    .app {
        --shrubbery-scale: 1.1;
        --vine-left-scale: 1.05;
        --vine-right-scale: 0.98;
        --vine-left-top: 0;
        --vine-left-right: -30vw;
        --vine-right-top: 0;
        --vine-right-right: -12vw;
    }
}

@media (max-width: 48rem) {
    .app {
        --shrubbery-scale: 1.22;
        --shrubbery-blur: 0.8px;
        --vine-left-scale: 1.2;
        --vine-right-scale: 1.12;
        --vine-left-top: 0;
        --vine-left-right: -44vw;
        --vine-right-top: 0;
        --vine-right-right: -20vw;
    }
}

@media (max-width: 36rem) {
    .app {
        --shrubbery-scale: 1.35;
        --shrubbery-blur: 1px;
        --vine-left-scale: 1.38;
        --vine-right-scale: 1.28;
        --vine-left-top: 0;
        --vine-left-right: -58vw;
        --vine-right-top: 0;
        --vine-right-right: -30vw;
    }
}