@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #d4cfcb;
        --color-text-secondary: #ada79f;

        --background-primary: #121212;
    }

    .invertWhenDark {
        filter: invert(100%) sepia(1%) saturate(100%) hue-rotate(340deg) brightness(100%) contrast(100%);
    }
}

@media screen and (min-width: 25em) {
    .largeLink:hover,
    .largeLink:focus {
        font-size: 1.8em;
        color: var(--color-text-primary);
        margin-left: 0.4em;
    }
}

@media screen and (min-width: 80em) {
    main {
        padding: 0 2em 0.8em 2em;
    }

    .linksContainer {
        grid-template-columns: 1fr 1fr;
    }
}