/* Shared Blu background for every full page. Edit the colors here. */
:root {
    /* Safari uses this solid color around the Dynamic Island and browser edges. */
    --page-bg-edge: #dcecf5;
    --page-bg-base: #f8fafb;
    --page-bg-sky: rgb(156 201 232 / 0.65);
    --page-bg-teal: rgb(71 117 137 / 0.2);
    --page-bg-ice: rgb(204 223 235 / 0.8);
    --page-bg-height: 100%;

    background-color: var(--page-bg-edge);
}
body {
    box-sizing: border-box;
    min-height: 100svh;
    /* Paint to the screen edges; keep content clear of the iPhone sensor area. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    background-color: var(--page-bg-edge);
    /* Each "at X% Y%" moves a cloud: X is left/right, Y is up/down. */
    background-image:
        /* Match Safari's solid edge color, then blend into the cloud layers. */
        linear-gradient(var(--page-bg-edge), transparent 180px),
        radial-gradient(ellipse 65% 24% at 90% 10%, var(--page-bg-sky), transparent 80%),
        radial-gradient(ellipse 60% 25% at 5% 35%, var(--page-bg-teal), transparent 80%),
        radial-gradient(ellipse 55% 18% at 40% 0%, var(--page-bg-ice), transparent 85%),
        /* Lower clouds keep the background colored all the way to the footer. */
        radial-gradient(ellipse 65% 28% at 85% 75%, var(--page-bg-sky), transparent 80%),
        radial-gradient(ellipse 60% 22% at 5% 100%, var(--page-bg-teal), transparent 85%),
        linear-gradient(var(--page-bg-base), var(--page-bg-base));
    background-size: 100% var(--page-bg-height);
    background-repeat: no-repeat;
}