personal-site/css/style.scss

$bg-dark: #121510;
$bg-card: rgba(20, 26, 18, 0.85);
$border-color: rgba(60, 72, 62, 0.7);
$accent: #d48a9a;
$accent-hover: #e4aab8;
$text-primary: #e5e0da;
$text-secondary: #8a9285;
$font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'SF Mono', 'Monaco', 'Menlo', monospace;
$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: $font-sans;
    background-color: $bg-dark;
    color: $text-primary;
    margin: 0;
    min-height: 100vh;
    line-height: 1.6;

    header {
        nav {
            ul {
                display: flex;
                list-style: none;
                gap: 1em;
            }

            a {
                color: $accent;
                text-decoration: none;
                transition: color 0.2s ease;

                &:hover {
                    color: $accent-hover;
                }
            }
        }
    }

    div {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    main {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 2em 1em;

        img.icon {
            width: 1.5em;
            filter: brightness(0) saturate(100%) invert(65%) sepia(15%) saturate(500%) hue-rotate(176deg) brightness(95%) contrast(90%);
            transition: filter 0.2s ease;
        }

        h1 {
            font-family: $font-mono;
            font-weight: 700;
            font-size: 2.4em;
            letter-spacing: -0.02em;
            margin-bottom: 0.3em;
            background: linear-gradient(135deg, #d48a9a, #7ec9a0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        h2 {
            font-family: $font-mono;
            font-weight: 500;
            font-size: 1.5em;
            color: $text-primary;
            margin-top: 2em;
            margin-bottom: 0.8em;
            letter-spacing: -0.01em;

            &::before {
                content: '> ';
                color: $accent;
                font-weight: 400;
            }
        }

        h3 {
            font-family: $font-mono;
            font-weight: 500;
            font-size: 1.05em;
            color: $text-primary;
            margin: 0.3em 0;
        }

        p {
            display: flex;
            margin-block-start: unset;
            margin-block-end: unset;
            color: $text-secondary;
            font-size: 0.95em;
        }

        a {
            color: $accent;
            text-decoration: none;
            transition: color 0.2s ease;

            &:hover {
                color: $accent-hover;
            }
        }

        div.feature {
            flex-direction: row;
            background-color: $bg-card;
            border: 1px solid $border-color;
            border-radius: 1em;
            gap: 1.5em;
            margin: auto;
            padding: 2em;
            backdrop-filter: blur(12px);
            transition: border-color 0.3s ease;

            &:hover {
                border-color: rgba($accent, 0.3);
            }

            img.portriat {
                width: 14em;
                border-radius: 50%;
                border: 3px solid $border-color;
                transition: border-color 0.3s ease;

                &:hover {
                    border-color: $accent;
                }
            }

            div.summary {
                align-items: start;
                gap: 0.75em;

                div.row {
                    flex-direction: row;
                    gap: 0.6em;
                    align-items: center;
                    transition: transform 0.15s ease;

                    &:hover {
                        transform: translateX(3px);

                        img.icon {
                            filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(600%) hue-rotate(180deg) brightness(105%) contrast(95%);
                        }
                    }
                }
            }
        }

        div.content-container {
            max-width: 52em;
            width: 100%;

            div.content-section {

                div.content-inner {
                    flex-flow: row wrap;
                    gap: 1em;
                    align-items: stretch;

                    div.project {
                        background-color: $bg-card;
                        border: 1px solid $border-color;
                        border-radius: 0.75em;
                        flex-wrap: wrap;
                        flex: 1 0 30%;
                        padding: 1em;
                        align-content: flex-start;
                        justify-content: space-between;
                        transition: border-color 0.3s ease, transform 0.2s ease;

                        &:hover {
                            border-color: rgba($accent, 0.4);
                            transform: translateY(-2px);
                        }

                        div.icons {
                            padding-top: 0.5em;
                            display: flex;
                            flex-direction: row;
                            gap: 0.75em;

                            a:hover img.icon {
                                filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(600%) hue-rotate(180deg) brightness(105%) contrast(95%);
                            }
                        }
                    }

                    img {
                        border-radius: 0.5em;
                        max-width: 100%;
                    }
                }
            }
        }
    }

    footer {
        text-align: center;
        padding: 2em 1em;
        color: $text-secondary;
        font-size: 0.85em;
        border-top: 1px solid $border-color;
        margin-top: 3em;
    }
}

@media (max-width: 700px) {
    body main {
        div.feature {
            flex-direction: column;
            padding: 1.5em;

            img.portriat {
                width: 10em;
            }

            div.summary {
                align-items: center;
            }
        }

        div.content-container div.content-section div.content-inner div.project {
            flex: 1 0 100%;
        }
    }
}