@import "https://www.nerdfonts.com/assets/css/webfont.css";

/* makes sizing simpler */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
    margin: 0;
    padding: 0;
    /* font: inherit; */
}

/* dark mode user-agent-styles */
/* improves punctuation in supported browsers */
html {
    color-scheme: dark light;
    hanging-punctuation: first last;
}

/* min body height */
body {
    min-height: 100svh;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

/* responsive images/videos */
img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

/* Improved heading in supported browsers */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* improve readability with max-width on paragraphs and lists */
/* prevent orphans in supported browsers */
p,
li {
    max-width: var(--p-max-width, 65ch);
    text-wrap: pretty;
}

/* My css */

section {
    min-height: 100svh;
    padding: 0.5rem;
}

h3:has(span) {
    color: lightblue;
}

h3:not(:has(span)) {
    color: lightsalmon;
}

h3 > span {
    color: lightpink;
    font-style: italic;
}

h3,
.subtitle {
    margin: 0 0 1.5rem 0;
}

.header-group:has(h3):has(.subtitle) h3 {
    margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
}

.card:not(:has(img)) {
    border: 1px solid var(--my-amazing-color);
}

/* section 2 */

:root {
    --bg-color: rgb(11, 58, 33);
}

.switch {
    display: grid;
    justify-content: center;
    align-content: center;
}

.switch__label {
    display: none;
}
.switch__input::before {
    content: "Light";
    margin-inline-start: 1em;
}

.switch__input::after {
    content: "Dark";
    margin-inline-end: 1em;
}

:root:has(.switch__input:checked) {
    --bg-color: rgb(0, 26, 255);
}

.switch__input:checked {
    /* color: aquamarine; */
    background-color: blueviolet;
}

#section2 {
    background-color: var(--bg-color);
}