/* <meta name="color-scheme" id="coloror" content="light dark" /> */

:root {
    /*https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme*/
    color-scheme: normal;
    color: hsl(240, 5%, 4%);
    --bg1: hsl(220, 13%, 82%);
    --bg2: hsl(220, 65%, 65%);
}

body {
    background-image: 
        repeating-radial-gradient(
            circle at -20%,
            var(--bg1),
            var(--bg1) 100px,
            var(--bg2) 100px,
            var(--bg2) 130px,
            var(--bg1) 130px
        );

    background-attachment: fixed;
}

body > header {
    backdrop-filter: blur(21px);
}
body > :not(header) {
    background-color: #0004;
    backdrop-filter: blur(13px);
}

a, [role="menuitem"] {
    text-decoration: none;
    color: hsl(220, 81%, 69%);
}
span [role="menuitem"] {
    color: hsl(220, 81%, 69%);
    border-color: hsl(220, 78%, 55%);
    text-shadow: 0 0 0.2em hsl(92, 81%, 69%);
}

h2 {
    border-top: solid 3px hsl(92, 78%, 55%);
}
h3 {
    color: hsl(220, 90%, 60%);
}

main > header, h2, strong, th {
    color: white;
}

li::marker {
    color: hsl(220, 10%, 50%);
}
details > summary  {
    color: whitesmoke;
    background: linear-gradient(to right, hsl(220, 70%, 41%), transparent);
}
details > :not(summary) {
    border-inline-start: solid 3px hsl(220, 70%, 41%);

}


blockquote > * {
    border-color: hsl(92, 60%, 50%);
}


th {
    border-bottom: 2px solid hsl(220, 20%, 50%);
}
tr:not(:last-child) > td {
    border-bottom: 1px solid hsl(220, 20%, 40%);
}