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

:root {
    --color-light: #eeeeee;
    --color-dark: #1a1a1a;
    --bg-color: var(--color-light);
    --fg-color: var(--color-dark);

    color-scheme: light dark;
    background-color: var(--bg-color);
    color: var(--fg-color);
}

.wrapper {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: clip;
}

h1, p {
    filter: drop-shadow(0 0 0.0625em var(--bg-color));
}

h1 {
    line-height: 1.1;
}

p {
    margin-block-start: 0.5em;
}

main {
    --shadow-size: 0.625em;
    --shadow-intensity: 0.7;
    --shadow-offset: 0em;
    --bg-blur: 0.25em;

    --_shadow-offset: var(--shadow-offset);

    transition: scale 200ms ease;

    max-width: 90%;
    text-align: center;
    font-family: "Michroma", sans-serif;
    padding: 1.5em 1.5em;
    border-radius: 2em;
    box-shadow: inset var(--_shadow-offset) var(--_shadow-offset) var(--shadow-size) 0 hsl(from var(--fg-color) h s l / var(--shadow-intensity));
    backdrop-filter: blur(var(--bg-blur));
}

@media(min-width: 700px) {
    main {
        font-size: 1.5em;
    }
}

@media(min-width: 980px) {
    main {
        font-size: 2em;
        max-width: 80%;
    }
}

main:hover {
    scale: 1.05;
    cursor: default;
}

.bubble {
    --bubble-base-duration: 300s;

    --bubble-animation-duration: calc(var(--bubble-base-duration) / var(--bubble-speed));
    --bubble-speed: calc(var(--bubble-size) / 9);
    --bubble-blur: calc(6.5em / var(--bubble-size));

    position: absolute;
    width: calc(var(--bubble-size) * 1em);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 100%, var(--bubble-bg), white 150%);
    border-radius: 100vh;
    transform: translate(-50%, -50%);
    left: var(--bubble-start-x);
    box-shadow: 0 0 var(--bubble-blur) 0 var(--bubble-bg);
    opacity: var(--bubble-opacity);
    animation:
        float-up var(--bubble-animation-duration) infinite linear,
        float-side var(--bubble-animation-duration) infinite ease-in-out;
    animation-delay: calc(-1 * var(--bubble-animation-duration) * var(--bubble-animation-offset-percent) * 0.01);
}

.bubble:nth-child(1) {
    --bubble-size: 50;
    --bubble-bg: #4fc1eb;
    --bubble-start-x: -20vw;
    --bubble-animation-offset-percent: 80;
    --bubble-sideways-float: 5em;
    --bubble-opacity: 0.4;
}

.bubble:nth-child(2) {
    --bubble-size: 20;
    --bubble-bg: #6c4b9f;
    --bubble-start-x: 20vw;
    --bubble-animation-offset-percent: 30;
    --bubble-sideways-float: 5em;
    --bubble-opacity: 0.8;
}

.bubble:nth-child(3) {
    --bubble-size: 10;
    --bubble-bg: #7475c9;
    --bubble-start-x: 40vw;
    --bubble-animation-offset-percent: 60;
    --bubble-sideways-float: 2em;
    --bubble-opacity: 0.6;
}

.bubble:nth-child(4) {
    --bubble-size: 30;
    --bubble-bg: #7669be;
    --bubble-start-x: 60vw;
    --bubble-animation-offset-percent: 90;
    --bubble-sideways-float: -1em;
    --bubble-opacity: 0.8;
}

.bubble:nth-child(5) {
    --bubble-size: 13;
    --bubble-bg: #56b1f0;
    --bubble-start-x: 80vw;
    --bubble-animation-offset-percent: 0;
    --bubble-sideways-float: -3em;
    --bubble-opacity: 0.6;
}

.bubble:nth-child(6) {
    --bubble-size: 35;
    --bubble-bg: #60378c;
    --bubble-start-x: 115vw;
    --bubble-animation-offset-percent: 40;
    --bubble-sideways-float: -8em;
    --bubble-opacity: 0.5;
}

@keyframes float-up {
    0%   { top: calc(100vh + 1em * var(--bubble-size) / 2); }
    100% { top: calc(-1em * var(--bubble-size) / 2); }
}

@keyframes float-side {
    0%   { left: calc(var(--bubble-start-x) - var(--bubble-sideways-float)); }
    50%  { left: calc(var(--bubble-start-x) + var(--bubble-sideways-float)); }
    100% { left: calc(var(--bubble-start-x)); }
}

@media(prefers-color-scheme: dark) {
    :root {
        --bg-color: var(--color-dark);
        --fg-color: var(--color-light);
    }

    main {
        --_shadow-offset: calc(var(--shadow-offset) * -1);
    }
}