:root {
    /*https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme*/
    color-scheme: normal;
    color: hsl(220, 32%, 85%);
    --bg1: hsl(220, 10%, 18%);
    --bg2: hsl(220, 70%, 40%);
}

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);
    border-radius: 16px;
}

a {
    text-decoration: none;
    color: hsl(220, 100%, 60%);
}
[role="menuitem"], [role="menuitem"] > * {
    color: hsl(220, 100%, 70%);
}

.btn {
    color: hsl(220, 81%, 69%);
    border-color: hsl(220, 78%, 55%);
    text-shadow: 0 0 0.2em hsl(92, 81%, 69%);
}
.keywords > li {
    color: hsl(220, 100%, 80%);
    border-color: hsl(220, 100%, 50%);
}

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

code {
    border-color: hsl(220, 20%, 50%);
}

main > header, 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.example > summary  {
    color: whitesmoke;
    background: linear-gradient(to right, hsl(220, 40%, 41%), transparent);
}
details {
    border-inline-start-color: hsl(220, 70%, 41%);
}


blockquote {
    border-inline-start-color: hsl(92, 60%, 50%);
}
.alert-caution {
    border-inline-start-color: red;
}
.alert-caution > header {
    color: red;
}


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


.footnotes > hr {
    color: hsl(220, 20%, 50%);
}



article > header > h2 > a {
    color: hsl(92, 78%, 55%);
}