:root {
    --dark-blue-dark-mode-elements: hsl(209, 23%, 22%);
    --very-dark-blue-dark-mode-background: hsl(207, 26%, 17%);
    --very-dark-blue-light-mode-text: hsl(200, 15%, 8%);
    --dark-gray-light-mode-input: hsl(0, 0%, 52%);
    --very-light-gray-light-mode-background: hsl(0, 0%, 98%);
    --white-dark-mode-text-light-mode-elements: hsl(0, 0%, 100%);
    /*Misc*/
    --border-radius: 2px;

    --body-background: var(--very-light-gray-light-mode-background);
    --body-color: var(--very-dark-blue-light-mode-text);

    --element-background: var(--white-dark-mode-text-light-mode-elements);
    --element-text: var(--very-dark-blue-light-mode-text);
    --element-box-shadow: 0px 0px 2px 2px var(--very-light-gray-light-mode-background);

}

@font-face {
    font-family: 'NunitoSans';
    src: url(./fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC\,opsz\,wdth\,wght.ttf);
}

body {
    display: grid;
    min-height: 100svh;
    max-width: 100svw;
    margin: 0;
    background-color: var(--body-background);
    color: var(--body-color);
    font-family: 'NunitoSans';
    container: body / inline-size;
}

main {
    display: grid;
    max-width: 100cqw;
    min-height: 100cqh;
    box-sizing: border-box;
    padding: 2% 5%;
    grid-auto-rows: max-content;
    gap: 50px;
}

header {
    height: 100px;
    width: 100svw;
    background-color: var(--element-background);
    color: var(--element-text);
    box-sizing: border-box;
    padding: 10px 5%;
    position: fixed;
    z-index: 1;
}

nav,
header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

nav {
    margin-top: 100px;
}

header span {
    font-size: 1.6em;
    font-weight: 800;
}

input[name="theme"] {
    display: none;
}


label svg {
    height: 20px;
    width: 20px;
}

label[for="light-theme"],
label[for="dark-theme"] {
    display: none;
    grid-template-columns: auto 1fr;
    font-weight: 600;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

:root:has(input[id="light-theme"]:checked) {

    --body-background: var(--very-light-gray-light-mode-background);
    --body-color: var(--very-dark-blue-light-mode-text);

    --element-background: white;
    --element-text: var(--very-dark-blue-light-mode-text);
    --element-box-shadow: 0px 0px 2px 2px var(--very-light-gray-light-mode-background);

    label[for="light-theme"] {
        display: none;
    }

    label[for="dark-theme"] {
        display: grid;
    }

}

:root:has(input[id="dark-theme"]:checked) {

    --body-background: var(--very-dark-blue-dark-mode-background);
    --body-color: white;

    --element-background: var(--dark-blue-dark-mode-elements);
    --element-text: white;
    --element-box-shadow: 0px 0px 2px 2px var(--dark-blue-dark-mode-elements);

    label[for="dark-theme"] {
        display: none;
    }

    label[for="light-theme"] {
        display: grid;
    }
}

@container(inline-size <1000px) {
    nav {
        grid-template-columns: 1fr;
    }

    input[id="country-search"] {
        width: 100%;
    }
}

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


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