/* ================================ VARIABLES =============================== */

:root {
    --color-text-primary: #282828;
    --color-text-secondary: #858585;

    --background-primary: #f5f5f5;

    --link-container-width: 32em;
}

/* ================================= GENERAL ================================ */

* {
    font-family: 'Roboto', sans-serif;
}

body {
    margin: 0;
    color: var(--color-text-primary);
    background-color: var(--background-primary);
}

main {
    display: grid;
    text-align: center;
    margin-top: 8vh;
    padding: 0 2em;
}

h1 {
    color: var(--color-text-primary);
    margin-bottom: 0.4em;
}

.hiddenElem {
    display: none;
}

.showHidden .hiddenElem {
    display: block;
}

/* ================================== LINKS ================================= */

.linksContainer {
    margin: 0 auto;
    max-width: var(--link-container-width);
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.linksContainer h2 {
    display: block;
    margin-bottom: 0.55em;
    font-size: 1.8em;
    color: var(--color-text-secondary);
}

.linkGroup {
    display: grid;
    row-gap: 1em;
    margin-bottom: 3em;
    grid-auto-rows: 2em;
}

.largeLink {
    text-align: center;
    font-size: 1.4em;
    transition: all 0.3s ease;
    color: var(--color-text-primary);
    display: grid;
    grid-template-columns: min-content max-content;
    column-gap: 0.5em;
    align-items: center;
    white-space: normal;
}

.largeLink img {
    margin-top: 0.11em;
    align-self: center;
}

.largeLink:hover,
.largeLink:focus {
    outline: none;
    color: var(--color-text-secondary);
}

/* ================================== MEDIA ================================= */

@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;
    }
}