/* @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2&family=Fragment+Mono:ital@0;1&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap'); */

@font-face {
    font-family: Figtree;
    src: url(assets/figtree-font/Figtree-Bold.ttf);
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: Figtree;
    src: url(assets/figtree-font/Figtree-SemiBold.ttf);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: Figtree;
    src: url(assets/figtree-font/Figtree-Light.ttf);
    font-weight: 200;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: dark;

    --text-color: white;
    --base-border-radius: 6px;
}

body {
    font-family: "Figtree", monospace;
    font-weight: 600;
    background-color: #0a0014;
    min-height: 100vh;
    padding: 6%;
    font-size: 1.2em;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
}

body>* {
    width: 100%;
}

section {
    max-width: 40em;

    h1 {
        font-size: 1.5em;
    }

    >* {
        margin: 0.6em 0;
    }
}

p {
    font-weight: 200;
}

a#language {
    text-decoration: underline;
    color: var(--text-color);
    font-size: 1.2em;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4em;

    img {
        height: 1.3em;
        filter: brightness(0) invert(1);
        user-select: none;
    }
}

#socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1em 3em;

    >div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;

        min-width: 12em;

        #link-list {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1em;

            img {
                filter: brightness(0) invert(1);
                user-select: none;
            }

            img[src="assets/mail.svg"] {
                padding: -0.1em;
            }
        }
    }

    #mail {
        display: flex;
        gap: 0.9em;

        >div {
            height: 1.8em;
            display: flex;
            align-items: center;
            gap: 0.5em;

            a {
                font-size: 0.9em;
                color: var(--text-color);
                text-decoration: underline;
            }

            img.copy {
                display: none;

                filter: brightness(0) invert(1);
                user-select: none;
                cursor: pointer;
                transition: scale 0.13s, transform 500ms;
            }

            img.copy:hover {
                scale: 1.1;
            }
        }
    }
}

#projects {
    h2 {
        margin-top: 0.4em;
    }

    #project-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1em;

        >div {
            max-width: 19em;

            /* border: 1px solid #fff3; */
            border-radius: var(--base-border-radius);
            padding: 0.5em;
            background-color: #8080aa35;

            a {
                height: 1.8em;
                display: flex;
                align-items: center;
                gap: 0.6em;
                margin-bottom: 0.5em;
                color: var(--text-color);
                text-decoration: none;

                .logo {
                    user-select: none;
                }

                h3 {
                    font-size: 1.25em;
                    text-decoration: underline;
                }

                span {
                    font-size: 0.8em;
                    padding-top: 0.4em;
                    margin-left: -0.3em;
                }
            }
        }
    }
}