body {

    margin: 0;

    font-family: "Segoe UI", Arial, sans-serif;

    /* dark beer-glass gradient */

    background:
        radial-gradient(circle at 50% -40%, #041739, #01030b 90%);

    color: #d4af37;

    overflow: hidden;

    height: 100vh;

}

.container {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

}

.logo {

    width: 150px;

    margin-top: 10px;
    margin-bottom: 15px;

    /* warm subtle glow */

    filter:
        drop-shadow(0 0 14px rgba(255, 200, 120, 0.35)) drop-shadow(0 0 30px rgba(255, 190, 110, 0.16));

}

.title {

    font-size: 64px;

    margin: 0;

    background: linear-gradient(90deg,
            #f5e7a5,
            #d4af37,
            #fff4c6,
            #d4af37);

    background-size: 200%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shimmer 7s linear infinite;

    /* subtle warm reflection */

    text-shadow:
        0 2px 2px rgba(255, 240, 210, 0.25),
        0 10px 26px rgba(255, 185, 90, 0.18);

}

@keyframes shimmer {

    from {
        background-position: 0%
    }

    to {
        background-position: 200%
    }

}

.teaser {

    font-size: 20px;

    font-weight: 500;

    color: #9fb4ff;

    margin-top: 10px;

    letter-spacing: 2px;

}

#bubbleCanvas {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

}