:root {
    /* COLORS */
    --base-color: oklch(14.7% 0.004 49.25);
    --btn-base-color: oklch(21.6% 0.006 56.043);
    --btn-accent-color: oklch(55.3% 0.013 58.071);
    --btn-glow-color: oklch(84.5% 0.143 164.978 / 30%);
    --text-color: oklch(98.5% 0.001 106.423);
    --line-color: oklch(37.4% 0.01 67.558);

    /* FONT SIZES */
    --text-xs: 1.2rem;
    --text-sm: 1.4rem;
    --text-base: 1.6rem;
    --text-md: 2.1rem;
    --text-lg: 2.8rem;
    --text-xl: 3.7rem;
    --text-xxl: 5.0rem;

    /* SPACING */
    --space-xxs: 0.4rem;
    --space-xs: 0.8rem;
    --space-sm: 1.6rem;
    --space-md: 3.2rem;
    --space-lg: 6.4rem;
    --space-xl: 12.8rem;

    /* CURVES */
    --curve1: cubic-bezier(.65, .05, .36, 1);

    /* GRADIENTS */
    --linear-gradient1: linear-gradient(to bottom right, oklch(95% 0.052 163.051), oklch(84.5% 0.143 164.978), oklch(43.2% 0.095 166.913));

    /* MISC */
    --animated-border-thickness: 3px;
}

/* PROPERTIES */
@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


/* ANIMATIONS */
@keyframes spin {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}

@keyframes blinking {
    to {
        visibility: hidden;
    }
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 6ch;
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* GENERAL */
* {
    margin: 0;
    border: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 62.5%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--base-color);
    color: var(--text-color);
    font-size: var(--text-base);
}

main {
    padding: min(var(--space-md), 2%);
}

section {
    padding: min(var(--space-md), 5%);
}

section {
    margin-top: 10rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;

    &:first-of-type {
        margin-top: 0;
    }
}

footer {
    text-align: center;
    color: var(--text-color);
    font-size: var(--text-xs);
}

h2 {
    font-family: 'Space Mono', monospace;
}

p {
    margin-top: var(--space-md);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    background-image: var(--linear-gradient1);
}

.btn {
    padding: var(--space-xs) var(--space-sm);
    /* background-color: var(--btn-base-color); */
    border-radius: 1000px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    position: relative;
    transition: transform .3s ease;
}

a.btn {
    /* font-family: 'Space Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    /* font-size: var(--text-sm); */
}

a.btn:not(.btn--icon) {
    min-width: 140px;

}

a.btn:hover {
    text-decoration: none;
    transform: scale(1.1);
}

a.btn:hover:not(.btn--icon) {
    z-index: 0;
    box-shadow: 40px 0 100px var(--btn-glow-color), -40px 0 100px var(--btn-glow-color);
}

a.btn:visited {
    color: inherit;
}

.btn:not(.btn--icon)::after {
    content: '';
    position: absolute;
    height: 114%;
    width: 105%;
    border-radius: 1000px;
    background-image: var(--linear-gradient1);
    filter: brightness(0.8);
    z-index: -1;
}

.btn--icon {
    background-color: transparent;
    padding: var(--space-xxs);
    transition: transform .3s ease;
}

.btn--icon:hover {
    transform: scale(1.2);
}

.blink {
    animation: blinking 1s steps(2, start) infinite;
}

.card-header {
    display: grid;
    justify-items: center;
    gap: var(--space-xs);

    text-align: center;

    > span {
        display: inline-block;
    }
}

/* MULTI-FEATURE */
.capabilities-grid .material-symbols-outlined, .interests-grid .material-symbols-outlined {
    font-size: var(--text-xxl);
}

/* TITLE AND PROFILE */
.title-and-profile {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;

    gap: var(--space-lg);

    > div {
        display: grid;
        align-items: center;
        gap: var(--space-sm);

        h1,
        h2 {
            text-align: left;
            line-height: var(--space-md);
            text-transform: uppercase;
        }

        h1 {
            font-family: 'Space Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: clamp(var(--text-md), 8vw, var(--text-xxl));
            letter-spacing: 0.6rem;
            line-height: clamp(5rem, 4vw, 6rem);
        }

        h2 {
            font-weight: 400;
            font-size: clamp(var(--text-md), 4vw, var(--text-lg));

            span {
                letter-spacing: clamp(1.2rem, 2vw, 2rem);
            }
        }
    }

    figure {
        animation: appear 1s forwards;
        position: relative;
        transition: transform .2s var(--curve1);
        display: grid;
        place-items: center;
        max-width: 200px;

        img {
            --img-brightness: 0.9;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 1000px;
            filter: brightness(0.8);
            animation: 10s spin linear infinite;
            transition: filter 3s linear;
        }
    }

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

    figure::after,
    figure::before {
        content: "";
        position: absolute;
        background-image: conic-gradient(from var(--angle), oklch(37.8% 0.077 168.94), oklch(59.6% 0.145 163.225), oklch(95% 0.052 163.051), oklch(37.8% 0.077 168.94));
        border-radius: 1000px;
        height: 100%;
        width: 100%;
        z-index: -1;
        padding: var(--animated-border-thickness);
        animation: 3s spin linear infinite;
    }

    figure::before {
        filter: blur(var(--space-xl));
        opacity: 1;
    }
}

.terminal-dollary-doo {
    color: oklch(85.2% 0.199 91.936);
}

.terminal-typing, .terminal-typing ~ .blink {
    color: oklch(84.5% 0.143 164.978);
}

.terminal-typing {
    display: inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    /* background-image: var(--linear-gradient1); */
    color: oklch(84.5% 0.143 164.978);
    width: 6ch;
    animation:
        typing 1s steps(6) forwards,
        blink 0.8s step-end infinite;
}

.fade-in-result {
    opacity: 0;
    animation: appear 1s ease-in-out forwards;
    animation-delay: 1.5s;
    text-align: center;
}

/* LANGUAGES & TOOLS */
.tech-grid {
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-md);
    justify-content: center;
    column-gap: var(--space-md);
    row-gap: var(--space-md);

    figure {
        position: relative;
        display: inline-block;
        transition: transform .3s ease-in-out;
    }

    figure::after {
        opacity: 0;
        content: attr(data-tooltip);
        position: absolute;

        bottom: -25%;
        left: 50%;
        translate: -50% 10px;

        border: 1px solid var(--line-color);
        border-radius: 1em;
        padding: 0 var(--space-xs);
        color: var(--text-color);
        font-size: var(--text-xs);
        font-weight: 700;

        opacity: 0;
        pointer-events: none;
        transition: all .3s ease-in-out;
        z-index: 10;
        white-space: nowrap;
    }

    figure:hover::after {
        opacity: 1;
    }

    figure:hover {
        transform: scale(1.1);
    }

    img {
        height: 100%;
        transition: filter .3s ease-in-out;
    }

    img:hover {
        filter: brightness(1.2)
    }
}

/* TECHNICAL CAPABILITIES */
.capabilities-grid {
    display: flex;
    margin-top: var(--space-md);
    column-gap: min(4vw, var(--space-md));
    row-gap: var(--space-sm);
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    > div {
        border: 1px solid var(--line-color);
        border-radius: 1em;
        padding: var(--space-md) var(--space-sm);
        min-width: min(70%, 600px);
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    h3 {
        font-family: 'Space Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    ul {
        margin: min(2vw, var(--space-md)) 0;
    }

    li {
        margin-top: var(--space-xs);
    }
}

/* HOBBIES & INTERESTS */
.interests-grid {
    display: grid;
    margin-top: var(--space-md);
    gap: var(--space-sm);
    

    > div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-md);
        border: 1px solid var(--line-color);
        border-radius: 1em;
        padding: var(--space-md) var(--space-sm);
    }

    .card-header {
        flex: 1 0 30%;
        align-content: center;
    }

    h3 {
        font-family: 'Space Grotesk', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    p {
        text-align: left;
        padding: var(--space-sm);
    }
    
}

/* CONTACT ME */
.contact-me {
    max-width: 600px;
    margin: 0 auto;
    
    p {
        text-align: center;
    }
}

.contact-links {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    display: flex;
    justify-content: center;
    column-gap: var(--space-lg);
    row-gap: var(--space-md);
    flex-wrap: wrap;
}

.contact-links--icons {
    margin-top: var(--space-sm);
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}