:root {
    /*Primary*/
    --lime-green: hsl(163, 72%, 41%);
    --bright-red: hsl(356, 69%, 56%);

    --facebook: hsl(208, 92%, 53%);
    --twitter: hsl(203, 89%, 53%);
    --instagram: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
    --youtube: hsl(348, 97%, 39%);
    /*dark theme */
    --dark-toggle: linear-gradient(to left, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
    /* Light theme */
    --light-toggle: hsl(230, 22%, 74%);
    /*Neutral*/
    /*Dark theme*/
    --very-dark-blue-bg: hsl(230, 17%, 14%);
    --very-dark-blue-top-bg-pattern: hsl(232, 19%, 15%);
    --dark-desaturated-blue-card-bg: hsl(228, 28%, 20%);
    --desaturated-blue-text: hsl(228, 34%, 66%);
    --white-text: hsl(0, 0%, 100%);

    /*Light theme */
    --white-bg: hsl(0, 0%, 100%);
    --very-pale-blue-top-bg-pattern: hsl(225, 100%, 98%);
    --light-grayish-blue-card-bg: hsl(227, 47%, 96%);
    --dark-grayish-blue-text: hsl(228, 12%, 44%);
    --very-dark-blue-text: hsl(230, 17%, 14%);

    --dark-body-background: linear-gradient(to bottom, var(--very-dark-blue-top-bg-pattern), var(--very-dark-blue-top-bg-pattern) 30%, var(--very-dark-blue-bg) 30%, var(--very-dark-blue-bg));
    --light-body-background: linear-gradient(to bottom, var(--very-pale-blue-top-bg-pattern), var(--very-pale-blue-top-bg-pattern) 30%, var(--light-grayish-blue-card-bg), 30% var(--light-grayish-blue-card-bg));

    /*Theme*/
    --theme-toggle: var(--dark-toggle);
    --toggle-radio: var(--very-dark-blue-bg);
    --body-color: var(--white-text);
    --body-background: var(--dark-body-background);
    --alternative-color: var(--desaturated-blue-text);
    --card-bg: var(--dark-desaturated-blue-card-bg);
    --text-update: var(--lime-green);
    --social-media-color: var(--facebook);
    --heading-text: var(--white-text);
}

@font-face {
    font-family: 'Inter';
    src: url(./fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
}

body {
    display: grid;
    margin: 0;
    background: var(--body-background);
    color: var(--body-color);
    background-repeat: no-repeat;
    width: 100vw;
    min-height: 100vh;
    container: body / inline-size;
    font-family: 'Inter';
    position: relative;
}

section[class="header"] {
    display: grid;
    grid-template-areas: "h1 ... color-scheme"
        "h2 ... ...";
    box-sizing: border-box;
    padding: 50px 10%;
}

section[class="header"] h1 {
    grid-area: h1;
    color: var(--heading-text);
    font-weight: 700;
}

section[class="header"] h2 {
    grid-area: h2;
}

section[class="color-scheme"] {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-self: end;
    grid-area: color-scheme;
    width: min-content;
    text-wrap: nowrap;
    gap: 5px;
}


label[for="dark-mode"],
label[for="light-mode"] {
    width: 100%;
    height: 100%;
    place-self: center;
    cursor: pointer;
}

label[for="dark-mode"] {
    justify-self: start;
}

label[for="light-mode"] {
    justify-items: end;
}

input[name="color-scheme"] {
    appearance: none;
}

input[name="color-scheme"]:checked {
    background-color: var(--toggle-radio);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    align-self: center;
}

:root:has(input[id="light-mode"]:checked) {
    --body-background: var(--light-body-background);
    --body-color: var(--very-dark-blue-text);
    --alternative-color: var(--dark-grayish-blue-text);
    --card-bg: var(--light-grayish-blue-card-bg);
    --heading-text: var(--very-dark-blue-text);
    --theme-toggle: var(--light-toggle);
    --toggle-radio: var(--light-grayish-blue-card-bg);
}

section[class="theme-toggle"] {
    background: var(--theme-toggle);
    height: 25px;
    width: 60px;
    border-radius: 30px;
    display: grid;
    grid-template-columns: 50% 50%;
    cursor: pointer;
}

h2 {
    font-weight: 400;
    font-size: medium;
    color: var(--alternative-color);
}

p[class="overview-today"] {
    font-size: 2em;
    color: var(--heading-text);
    font-weight: 700;
    box-sizing: border-box;
    padding: 0 10%;
}

div[class="attribution"] {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

@starting-style {
    body {
        opacity: 0;
    }
}


@media (prefers-reduced-motion :no-preference) {
    body {
        transition: ease-in-out 3s;
    }
}

@container(inline-size < 1000px) {
    section[class="header"] {
        grid-template-areas: "h1"
            "h2"
            "color-scheme";
        box-sizing: border-box;
        padding: 50px 10%;
    }

    section[class="color-scheme"] {
        justify-content: space-between;
        justify-self: unset;
        width: 100%;
    }
}