@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

@font-face {
    font-family: 'Cascadia Mono';
    src: url('fonts/CascadiaMono.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

:root {
    --nico-black: #010409;
    --nico-dark-blue: #0D1117;
    --nico-blue: rgb(30, 46, 110);
    --nico-light-blue: #79C0FF;
    --nico-gray: #909AA6;
    --nico-light-gray: #E6EDF3;
    --nico-light-yellow: #DCDCAA;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--nico-light-gray);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--nico-black);
    font-family: 'Cascadia Mono', monospace;
}

header {
    background-color: color-mix(in srgb, var(--nico-dark-blue) 80%, transparent);
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    transition: top 0.4s ease-in-out;

    .bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .end {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 1em;
        }
    }

    img {
        height: 2em;
        width: auto;
        margin: 1em;
    }
}

main {
    display: flex;
    justify-content: center;
    margin-top: 4em;
}

a {
    display: flex;
}

p {
    font-family: 'Roboto Mono', monospace;
}

.content {
    display: flex;
    flex-direction: column;
    width: 70em;
    gap: 3em;

    .top {
        margin-top: 1em;

        p {
            margin-top: 1em;
            padding: 1em;
        }
    }

    .categories {
        display: flex;
        flex-direction: column;
        gap: 3em;

        .category {
            display: flex;
            flex-direction: column;
            gap: 1em;

            .projects {
                display: flex;
                flex-direction: column;
                gap: 1em;
                padding: 1em;

                .project {
                    display: flex;
                    flex-direction: row;
                    background-color: var(--nico-blue);

                    border-width: 0.5em;
                    border-style: solid;
                    border-color: var(--nico-dark-blue);
                    border-radius: 3em;
                    box-shadow: 0 0 0.2em var(--nico-dark-blue);

                    transition: transform 0.25s ease, filter 0.3s ease;
                    filter: grayscale(50%);

                    .preview {
                        width: 55%;
                        padding: 1em;
                        align-items: flex-start;

                        img {
                            width: 100%;
                            height: auto;
                            margin: auto;
                            border-width: 0.3em;
                            border-style: solid;
                            border-color: var(--nico-dark-blue);
                            border-radius: 2em;

                            transition: transform 0.25s ease, filter 0.3s ease;
                        }

                        img:hover {
                            transform: scale(1.005);
                        }
                    }

                    .infos {
                        width: 45%;
                        display: flex;
                        flex-direction: column;
                        padding: 1em;
                        gap: 1em;

                        h1 {
                            font-size: 30px;
                            font-weight: bold;
                        }

                        p {
                            margin: 0em;
                            font-size: 20px;
                        }

                        div {
                            display: flex;
                        }

                        .title {
                            flex-direction: row;

                            .date {
                                justify-content: end;
                                flex: auto;
                                padding-top: 0.2em;
                                padding-right: 0.2em;

                                p {
                                    font-size: 16px;
                                    color: var(--nico-gray)
                                }
                            }
                        }

                        .tools {
                            flex-direction: column;
                            height: 100%;
                            justify-content: flex-end;

                            .list {
                                display: flex;
                                gap: 1em;

                                img {
                                    background-color: color-mix(in srgb, var(--nico-blue) 80%, var(--nico-dark-blue));
                                    border-width: 0.2em;
                                    border-color: color-mix(in srgb, var(--nico-blue) 10%, var(--nico-dark-blue));
                                    border-style: solid;
                                    border-radius: 1em;
                                    width: 3.5em;
                                    height: 3.5em;
                                    padding: 0.3em;

                                    transition: transform 0.25s ease, filter 0.3s ease;
                                }

                                img:hover {
                                    transform: scale(1.05);
                                }

                                .separator {
                                    width: 2px;
                                    background-color: gray;
                                    margin: 0.5em 0;
                                }
                            }

                            .spacer {
                                max-height: 1em;
                                height: 100%;
                            }
                        }
                    }
                }

                .project:hover {
                    transform: scale(1.02);
                    filter: grayscale(0%);
                }
            }
        }
    }

    .bottom {
        p {
            color: var(--nico-gray);
            font-style: italic;
        }
    }
}

footer {
    width: 100%;
    background-color: rgb(25, 25, 39);
}