@charset "UTF-8";

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

:root {
    --sans: "Figtree", system-ui, -apple-system, sans-serif;
    --color-background: rgba(247, 247, 247, 1);
    --color-gradiant-1: rgba(247, 247, 247, .3);
    --color-gradiant-2: rgba(247, 247, 247, 0);
    --color-primary: rgba(16, 16, 16, 1);
    --color-secondary: rgb(60, 60, 60);
    --color-highlight: rgba(247, 247, 247, .7);
    --color-shadow: rgba(27, 27, 27, .1);
    --color-0: #246b48;
    --color-1: #245b6b;
    --color-2: #005c52;
    --color-3: #115497;
    --color-4: #115497;
    --color-5: #434b8e;
    --color-6: #a5139b;
    --color-7: #af3a03;
    --color-8: #a30b55;
    --color-9: #4d5360;
    --color-10: #4d5360;
}

@media (prefers-color-scheme:dark) {
    :root {
        --color-background: rgba(27, 27, 27, 1);
        --color-gradiant-1: rgba(27, 27, 27, 0.3);
        --color-gradiant-2: rgba(27, 27, 27, 0);
        --color-primary: rgba(247, 247, 247, 1);
        --color-secondary: rgba(190, 190, 190, 1);
        --color-highlight: rgba(27, 27, 27, .75);
        --color-shadow: rgba(247, 247, 247, .05);
        --color-0: #e788a8;
        --color-1: #f5c0a4;
        --color-2: #f0cf73;
        --color-3: #6fceab;
        --color-4: #4ad4c4;
        --color-5: #6cadee;
        --color-6: #70c2d4;
        --color-7: #b29bcf;
        --color-8: #98a4b0;
        --color-9: #f391c3;
        --color-10: #e69999;
    }
}

@-webkit-keyframes navPeak {
    0% {
        top: 0
    }

    to {
        top: -4em
    }
}

@keyframes navPeak {
    0% {
        top: 0
    }

    to {
        top: -4em
    }
}

@media (orientation: portrait) {
    @keyframes navPeak {
        0% {
            top: 0
        }

        to {
            top: -6em
        }
    }

    @-webkit-keyframes navPeak {
        0% {
            top: 0
        }

        to {
            top: -6em
        }
    }
}


@-webkit-keyframes fadeBounceDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeBounceDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fadeBounceUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fadeBounceUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-webkit-keyframes pointer {
    0% {
        left: -1.2em;
    }

    2.5% {
        left: -1.25em;
    }

    5% {
        left: -1.2em;
    }

    7.5% {
        left: -1.15em;
    }

    10% {
        left: -1.2em;
    }

    100% {
        left: -1.2em;
    }
}

@keyframes pointer {
    0% {
        left: -1.2em;
    }

    2.5% {
        left: -1.25em;
    }

    5% {
        left: -1.2em;
    }

    7.5% {
        left: -1.15em;
    }

    10% {
        left: -1.2em;
    }

    100% {
        left: -1.2em;
    }
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Improved focus states for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

b,
strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

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

body,
html {
    width: 100%;
    height: 100%
}

body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
    line-height: 1.5;
    background-color: var(--color-background);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

::-moz-selection {
    background: 0 0;
    text-shadow: none
}

::selection {
    background: 0 0;
    text-shadow: none
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

ul.inline li {
    display: inline-block;
    margin-right: .5em
}

ul.inline li:last-child {
    margin-right: 0
}

a {
    text-decoration: none;
    cursor: pointer
}

a:focus {
    outline: 0
}

h1,
h2 {
    font-weight: 400;
    font-size: 1em;
    line-height: 1.2;
    margin: 0
}

.inner {
    margin: 0 auto;
    width: 80%
}

@media (min-width:550px) {
    .inner {
        max-width: 800px
    }
}

.table,
.table-cell {
    width: 100%;
    height: 100%
}

.table {
    display: table
}

.table-cell {
    display: table-cell;
    vertical-align: middle
}

.color10 .contact a,
.color10 .logo,
.color10 .social-link:hover,
.color10 .typer {
    color: var(--color-10)
}

.color10 .footer,
.color10 .highlight {
    background-color: var(--color-10)
}

.color9 .contact a,
.color9 .logo,
.color9 .social-link:hover,
.color9 .typer {
    color: var(--color-9)
}

.color9 .footer,
.color9 .highlight {
    background-color: var(--color-9)
}

.color8 .contact a,
.color8 .logo,
.color8 .social-link:hover,
.color8 .typer {
    color: var(--color-8)
}

.color8 .footer,
.color8 .highlight {
    background-color: var(--color-8)
}

.color7 .contact a,
.color7 .logo,
.color7 .social-link:hover,
.color7 .typer {
    color: var(--color-7)
}

.color7 .footer,
.color7 .highlight {
    background-color: var(--color-7)
}

.color6 .contact a,
.color6 .logo,
.color6 .social-link:hover,
.color6 .typer {
    color: var(--color-6)
}

.color6 .footer,
.color6 .highlight {
    background-color: var(--color-6)
}

.color5 .contact a,
.color5 .logo,
.color5 .social-link:hover,
.color5 .typer {
    color: var(--color-5)
}

.color5 .footer,
.color5 .highlight {
    background-color: var(--color-5)
}

.color4 .contact a,
.color4 .logo,
.color4 .social-link:hover,
.color4 .typer {
    color: var(--color-4)
}

.color4 .footer,
.color4 .highlight {
    background-color: var(--color-4)
}

.color3 .contact a,
.color3 .logo,
.color3 .social-link:hover,
.color3 .typer {
    color: var(--color-3)
}

.color3 .footer,
.color3 .highlight {
    background-color: var(--color-3)
}

.color2 .contact a,
.color2 .logo,
.color2 .social-link:hover,
.color2 .typer {
    color: var(--color-2)
}

.color2 .footer,
.color2 .highlight {
    background-color: var(--color-2)
}

.color1 .contact a,
.color1 .logo,
.color1 .social-link:hover,
.color1 .typer {
    color: var(--color-1)
}

.color1 .footer,
.color1 .highlight {
    background-color: var(--color-1)
}

.color0 .contact a,
.color0 .logo,
.color0 .social-link:hover,
.color0 .typer {
    color: var(--color-0)
}

.color0 .footer,
.color0 .highlight {
    background-color: var(--color-0)
}

.typer {
    margin: 1.5em auto 0.5em;
    position: relative;
    color: transparent;
    transition: color 3s linear;
    min-height: 3.5em
}

@media (orientation: portrait) {
    .typer {
        margin: 1.5em auto 1.5em;
        min-height: 4.2em
    }
}

.footer,
.highlight {
    transition: background-color 3s linear
}

.highlight {
    color: transparent;
    border-radius: 8px
}

.hidden {
    display: none
}

.social-link {
    transition: color 0.3s linear
}

.social-link,
.social-link:active,
.social-link:link,
.social-link:visited,
.logo {
    color: var(--color-secondary);
    font-size: 1.2em;
}

.contact {
    position: relative;
    font-size: 1.2em;
    font-weight: 450;
    line-height: 1.2em;
    color: var(--color-secondary);
    letter-spacing: -.01em;
    margin-bottom: 2em;
}

.contact a {
    color: var(--color-secondary);
    position: relative;
    transition: color 3s linear;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.contact a .arrow {
    display: inline-flex;
    align-items: center;
    width: 12px;
    height: 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.contact a .arrow svg {
    width: 100%;
    height: 100%;
}

@media (hover: hover) {
    .contact a:hover .arrow {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact a .arrow {
        transition-duration: 0.01ms;
    }
}

@media (min-width:750px) {
    .contact a .arrow {
        width: 17px;
        height: 17px;
    }
}

@media (min-width:750px) {

    .social-link,
    .social-link:active,
    .social-link:link,
    .social-link:visited,
    .logo {
        font-size: 1.4em
    }

    .contact {
        font-size: 1.4em
    }
}

.logo,
.social {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.logo {
    display: inline-block;
    -webkit-animation-name: fadeBounceDown;
    animation-name: fadeBounceDown;
    color: var(--color-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.4em;
    border-radius: 12px;
}

@media (hover: hover) {
    .logo:hover {
        transform: translateY(-2px) scale(1.05);
        background-color: var(--color-highlight);
    }
}

.logo--svg {
    vertical-align: middle;
    fill: currentColor
}

.social {
    -webkit-animation-name: fadeBounceUp;
    animation-name: fadeBounceUp
}

.about {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for better mobile support */
    min-height: -webkit-fill-available; /* iOS Safari fix */
    z-index: 0;
    transition: background-color 3s linear
}

.browser-height {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height */
    pointer-events: none
}

.project-link,
.typer {
    font-weight: 500;
    font-size: 2.2em;
    line-height: 1.4;
    letter-spacing: -.03em
}

.typer--name {
    font-weight: 600
}

@media (min-width:750px) {

    .project-link,
    .typer {
        font-size: 2.8em
    }
}

.footer {
    background-color: var(--color-secondary);
    position: relative;
    z-index: 1;
    -webkit-animation-name: navPeak;
    animation-name: navPeak;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    box-shadow: 0 -10px 30px -5px var(--color-shadow);
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}

.projects {
    padding: 4em 0 2em
}

@media (orientation: portrait) {
    .projects {
        padding: 6em 0 2em
    }
}

.project-link {
    display: block;
    padding: .25em 0;
    color: var(--color-highlight)
}

.project-link:hover {
    color: transparent
}

.project-link:hover .project-highlight {
    background-color: var(--color-highlight)
}

.project-highlight {
    pointer-events: none;
    border-radius: 1px;
    transition: opacity .3s linear
}

.interested {
    font-size: 1.2em;
    color: var(--color-highlight);
    padding-bottom: 3em
}

.interested a {
    color: var(--color-highlight);
    border-bottom: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.1em 0.3em;
    border-radius: 6px;
}

.interested a:hover {
    border-bottom: 1px solid;
    background-color: rgba(247, 247, 247, 0.05);
}

.interested--label {
    font-weight: 500;
    padding-bottom: .5em
}

.interested--copyright {
    padding-bottom: .5em;
    font-size: .7em
}

@media (min-width:750px) {
    .interested {
        font-size: 1.4em
    }
}


/* Hover effects only on devices that support hover */
@media (hover: hover) {
    .social-link:hover {
        color: var(--active-color);
    }
}

.gradient {
    background: linear-gradient(-75deg, var(--color-gradiant-1), var(--color-gradiant-2), var(--color-gradiant-1));
    background-size: 600% 600%;
    opacity: 1;
    -webkit-animation: gradient 30s ease infinite;
    animation: gradient 30s ease infinite;
    position: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}