@view-transition {
    navigation: auto;
}

* {
    font-family:
        Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
        "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
    font-weight: normal;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100dvh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    /*background-color: red;*/
}

body::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    /*background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');*/
    background-image: url(https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&dl=max-bender-1YHXFeOYpN0-unsplash.jpg&w=1920);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    z-index: -1;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: center;
    gap: 1rem;
}

#content {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

button {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    /*background-color: #1a1a1a;*/
    cursor: pointer;
    transition: border-color 0.25s;
}
button:hover {
    border-color: #646cff;
}
button:focus,
button:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
    :root {
        color: #213547;
        background-color: #ffffff;
    }
    a:hover {
        color: #747bff;
    }
    button {
        background-color: #f9f9f9;
    }
}

.glassy {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(14.2px);
    -webkit-backdrop-filter: blur(14.2px);
    border: 1px solid rgba(255, 255, 255, 0.39);
}
.glassy:hover {
    border: 1px solid rgba(255, 255, 255, 0.39);
}
.sensor {
    width: 95dvw;
    height: 25dvh;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    outline: dimgray solid;
    touch-action: none;
    box-sizing: border-box;
}

#wind div {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--width);
    transform: rotate(var(--swipe));
    transform-origin: bottom left;
}

.raindrop {
    background-color: transparent;
    position: absolute;
    left: var(--x);
    top: 0px;
}

@keyframes rain-fall {
    from {
        top: -30px;
    }
    to {
        top: var(--y);
    }
}

.raining {
    will-change: transform;
    animation-name: rain-fall;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    /*animation-timing-function: linear;*/
    /*animation-timing-function: ease-in;*/
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}

temp-sensor {
    display: block;
    --temperature-gradient: linear-gradient(
        to right in oklab,
        oklab(68% 0.23 0.14),
        oklab(80% 0.13 0.18) 21%,
        oklab(100% -0.17 0.5),
        oklab(90% -0.05 -0.1) 93%
    );

    --radius: 24cqh;
    --row1: 20%;
    --row2: 80%;

    /* Constants for the Color Stops */
    --CA: oklab(68% 0.23 0.14);
    --CB: oklab(80% 0.13 0.18);
    --CC: oklab(100% -0.17 0.5);
    --CD: oklab(90% -0.05 -0.1);

    /* Calculated 10 colors using color-mix(in oklab, ...) */
    --c1: var(--CA); /* T=0 (0%) */
    --c2: color-mix(in oklab, var(--CB) 52.91%, var(--CA)); /* T=1 (11.11%) */
    --c3: color-mix(in oklab, var(--CC) 3.39%, var(--CB)); /* T=2 (22.22%) */
    --c4: color-mix(in oklab, var(--CC) 34.26%, var(--CB)); /* T=3 (33.33%) */
    --c5: color-mix(in oklab, var(--CC) 65.12%, var(--CB)); /* T=4 (44.44%) */
    --c6: color-mix(in oklab, var(--CC) 95.99%, var(--CB)); /* T=5 (55.56%) */
    --c7: color-mix(in oklab, var(--CD) 26.85%, var(--CC)); /* T=6 (66.67%) */
    --c8: color-mix(in oklab, var(--CD) 57.72%, var(--CC)); /* T=7 (77.78%) */
    --c9: color-mix(in oklab, var(--CD) 88.58%, var(--CC)); /* T=8 (88.89%) */
    --c10: var(--CD); /* T=9 (100%) */

    --grid1: var(--c10);
    --grid2: var(--c10);
    --grid3: var(--c10);
    --grid4: var(--c10);
    --grid5: var(--c10);
    --grid6: var(--c10);
    --grid7: var(--c10);
    --grid8: var(--c10);
    --grid9: var(--c10);
    --grid10: var(--c10);

    --hdr-gradient1: radial-gradient(
        farthest-corner circle at 10% var(--row1) in oklab,
        var(--grid1),
        transparent var(--radius)
    );
    --hdr-gradient2: radial-gradient(
        farthest-corner circle at 30% var(--row1) in oklab,
        var(--grid2),
        transparent var(--radius)
    );
    --hdr-gradient3: radial-gradient(
        farthest-corner circle at 50% var(--row1) in oklab,
        var(--grid3),
        transparent var(--radius)
    );
    --hdr-gradient4: radial-gradient(
        farthest-corner circle at 70% var(--row1) in oklab,
        var(--grid4),
        transparent var(--radius)
    );
    --hdr-gradient5: radial-gradient(
        farthest-corner circle at 90% var(--row1) in oklab,
        var(--grid5),
        transparent var(--radius)
    );
    --hdr-gradient6: radial-gradient(
        farthest-corner circle at 10% var(--row2) in oklab,
        var(--grid6),
        transparent var(--radius)
    );
    --hdr-gradient7: radial-gradient(
        farthest-corner circle at 30% var(--row2) in oklab,
        var(--grid7),
        transparent var(--radius)
    );
    --hdr-gradient8: radial-gradient(
        farthest-corner circle at 50% var(--row2) in oklab,
        var(--grid8),
        transparent var(--radius)
    );
    --hdr-gradient9: radial-gradient(
        farthest-corner circle at 70% var(--row2) in oklab,
        var(--grid9),
        transparent var(--radius)
    );
    --hdr-gradient10: radial-gradient(
        farthest-corner circle at 90% var(--row2) in oklab,
        var(--grid10),
        transparent var(--radius)
    );
}

temp-sensor.glassy {
    display: flex;
    align-items: center;
    justify-content: center;
    outline: dimgray solid;
    user-select: none;
    -webkit-user-select: none;

    background:
        var(--hdr-gradient1), var(--hdr-gradient2), var(--hdr-gradient3),
        var(--hdr-gradient4), var(--hdr-gradient5), var(--hdr-gradient6),
        var(--hdr-gradient7), var(--hdr-gradient8), var(--hdr-gradient9),
        var(--hdr-gradient10);
}

temp-sensor:focus {
    outline: none;
    box-shadow: 0 0 5px #ccc;
}

#metrics {
    width: 85dvw;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 1rem;
    margin-block-end: 1rem;
    padding-inline: 1rem;
}