/* * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
} */
:root {
    --bg: #f7f7f7;
    --bg-ele: #eee;
    --text: #454545;
    --text-heading: #323232;
    --text-light: #6d6d6d;
}

html,
body {
    padding: 0;
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-size: 18px;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Playfair Display", serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        color: var(--text-heading);
    }

    /* ::selection {
        background: rgb(255, 106, 171);
    } */

    line-height: 1.4;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

@media (prefers-color-scheme: dark) {
    html,
    body {
        --bg: #030303;
        --bg-ele: #1e1e1e;
        --text: #dbdbdb;
        --text-heading: #efefef;
        --text-light: #a6a6a6;
    }
}

header {
    padding: 0 1em;

    h1 {
        margin: 0;
        font-size: 5rem;
        font-weight: 900;
        color: var(--text-light);
    }
}

main {
    max-width: 800px;
    padding: 1em;
    margin: 0 auto;

    article.main {
        section {
            margin-bottom: 2.5rem;
            h2 {
                font-size: 1.8rem;
                margin: 0 0 1rem 0;
            }

            q {
                font-style: italic;
            }

            a {
                text-decoration: none;
                color: unset;

                text-decoration: underline;
                text-decoration-style: dashed;
                text-underline-offset: 0.33em;
            }

            .entry {
                margin-bottom: 1.4rem;

                .duration,
                .organisation,
                .institute {
                    font-size: 0.8rem;
                    color: var(--text-light);
                    padding: 6px 0;
                }
            }

            ul {
                list-style: none;
                /* li::before {
                    content: "# ";
                } */
                margin: 0;
                padding: 0;
                li {
                    font-size: 0.8rem;
                    display: inline-block;
                    padding: 4px 10px;
                    margin: 0 8px 8px 0;
                    background-color: var(--bg-ele);
                    height: calc(0.8rem + 8px);
                    border-radius: calc(0.4rem + 8px);
                    cursor: pointer;
                    /* box-sizing: border-box; */
                }
            }

            &.contact {
                p {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 1rem;
                }
                svg {
                    fill: var(--text);
                }
            }
        }
    }
}