:root {
    font-family: Plus Jakarta Sans, system-ui, Helvetica, Arial, sans-serif;
    color-scheme: light dark;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-color: rgba(var(--text-rgb), .7) transparent;
    --transition-theme: .4s;
    --transition-mouse: .2s;
    --transition-length: .5s;
    --transition-long: .8s;
    --default-lava-filter: opacity(100%) saturate(1);
    --group-1-filter: var(--default-lava-filter);
    --group-2-filter: var(--default-lava-filter);
    --lava-droplet-filter: var(--default-lava-filter);
    --lava-filter-transition: filter .3s cubic-bezier(.6, 0, 0, 1.8);
    --shadow-small: 0 2px 8px rgba(0, 0, 0, .2);
    --shadow-large: 0 0 30px rgba(0, 0, 0, .2);
    --bg: #fffbee;
    --bg-rgb: 255, 251, 238;
    --text: #191919;
    --text-rgb: 25, 25, 25;
    --color: #fcd240;
    --color-rgb: 255, 102, 99;
    --glass-text: rgba(25, 25, 25, .2)
}

[data-theme=dark] {
    --shadow-small: 0 2px 8px rgba(0, 0, 0, .7);
    --shadow-large: 0 0 30px rgba(0, 0, 0, .7);
    --bg: #191919;
    --bg-rgb: 25, 25, 25;
    --text: #fffbee;
    --text-rgb: 255, 251, 238;
    --color: #8c82ff;
    --color-rgb: 140, 130, 255;
    --glass-text: rgba(255, 251, 238, .3)
}

html {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    transition: background-color var(--transition-theme);
    overflow-y: scroll;
    scroll-behavior: smooth
}

body {
    margin: 0;
    padding: 0;
    width: 100%
}

#root {
    overflow: auto
}

h1,
h2,
p,
.text-large,
.text-medium,
.text-small {
    font-family: Plus Jakarta Sans, sans-serif;
    font-weight: 600;
    color: var(--text);
    transition: color var(--transition-theme)
}

h1 {
    font-size: 2.5rem;
    margin: .5rem 0
}

h2 {
    font-size: 1.5rem;
    margin: .5rem 0;
    white-space: nowrap
}

.text-large {
    font-size: 1.5rem
}

.text-medium,
p {
    font-size: 1.2rem;
    margin: 0
}

.text-small {
    font-size: 1rem
}

*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px inset var(--color) !important
}

::selection {
    background-color: var(--color);
    color: #fffbee
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--text-rgb), .7)
}

.a-wrapper {
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
    left: -4px
}

a {
    color: var(--color);
    text-decoration: none;
    position: relative;
    padding: 0 4px;
    white-space: nowrap;
    cursor: pointer
}

a:link,
a:visited {
    color: var(--color)
}

a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 33%;
    border-radius: 4px 0 4px 4px;
    background-color: #a7a7a740;
    bottom: 10%;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform var(--transition-length)
}

a:hover:before,
a:focus:before {
    transform-origin: left;
    transform: scaleX(1)
}

.app-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    position: relative;
    width: 100%;
    padding: 60px 10%;
    box-sizing: border-box;
    max-width: 2200px;
    margin: 0 auto
}

.page-wrapper.home {
    align-items: center;
    z-index: 3;
    padding: 0;
    max-width: 100%
}

.page-wrapper.worksub {
    padding: 60px 20%
}

@media screen and (max-width: 1400px) {
    .page-wrapper,
    .page-wrapper.worksub {
        padding: 120px 10% 80px
    }
}

@media screen and (max-width: 800px) {
    :root {
        --shadow-large: 0 0 20px rgba(0, 0, 0, .2)
    }
    [data-theme=dark] {
        --shadow-large: 0 0 20px rgba(0, 0, 0, .7)
    }
    .page-wrapper.worksub {
        padding: 120px 5% 80px
    }
    .text-medium,
    p {
        font-size: 1.1rem
    }
    .text-large {
        font-size: 1.2rem
    }
}

@media screen and (max-width: 480px) {
    :root {
        --shadow-large: var(--shadow-small)
    }
    .page-wrapper,
    .page-wrapper.worksub {
        padding: 120px 1rem 80px
    }
    html,
    body {
        height: 100%;
        overflow: hidden
    }
    #root {
        height: 100%
    }
}

@keyframes blur-in {
    0% {
        opacity: 0;
        filter: blur(14px)
    }
    to {
        opacity: 1;
        filter: blur(0px)
    }
}

@keyframes blur-out {
    0% {
        opacity: 1;
        filter: blur(0px)
    }
    to {
        opacity: 0;
        filter: blur(14px)
    }
}

@keyframes drop-in {
    0% {
        transform: translateY(-105%)
    }
    to {
        transform: translateY(0)
    }
}

@keyframes drop-out {
    0% {
        transform: translateY(0)
    }
    to {
        transform: translateY(105%)
    }
}

@keyframes scale-in-left {
    0% {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

@keyframes scale-out-left {
    0% {
        transform: scale(1)
    }
    to {
        transform: scale(0)
    }
}

.heading-wrapper {
    overflow: hidden
}

.heading-divider {
    background-color: var(--text);
    height: 4px;
    border-radius: 2px 0 4px 2px;
    transform: scale(0);
    transform-origin: bottom left;
    animation: scale-in-left var(--transition-long) cubic-bezier(.3, .9, .3, .9) .4s forwards;
    transition: background-color var(--transition-theme)
}

.heading-divider.leaving {
    transform: scale(1);
    animation: scale-out-left var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

h1.top-heading {
    transform: translateY(-110%);
    margin: 0 0 .5rem;
    animation: drop-in var(--transition-length) cubic-bezier(.3, .9, .3, .9) .4s forwards
}

h1.top-heading.leaving {
    transform: translateY(0);
    animation: drop-out var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

.switch-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 34px;
    width: 64px;
    padding: 0 2px;
    border-radius: 20px;
    background-color: var(--glass-text);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: inset 0 0 5px #0000004d;
    overflow: hidden;
    cursor: pointer;
    transition: background-color var(--transition-theme)
}

.switch-wrapper svg {
    width: 20px;
    height: 20px;
    fill: var(--text);
    transition: fill var(--transition-theme)
}

.switch-handle {
    position: absolute;
    right: 3px;
    top: 3px;
    bottom: 3px;
    height: 28px;
    width: 28px;
    border-radius: 20px;
    background-color: var(--text);
    box-shadow: 0 0 12px 4px #0000004d;
    transform: translate(0) scale(1);
    transition: background-color var(--transition-theme), transform var(--transition-mouse)
}

.switch-wrapper:hover .switch-handle,
.switch-wrapper:focus-visible .switch-handle {
    transform: scale(.9)
}

[data-theme=dark] .switch-handle {
    transform: translate(-34px) scale(1)
}

[data-theme=dark] .switch-wrapper:hover .switch-handle,
[data-theme=dark] .switch-wrapper:focus-visible .switch-handle {
    transform: translate(-34px) scale(.9)
}

a.icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    width: 38px;
    box-sizing: border-box
}

a.icon-link:before {
    display: none
}

a.icon-link svg {
    fill: var(--text);
    height: 34px;
    width: 34px;
    transition: fill var(--transition-theme), transform var(--transition-mouse)
}

a.icon-link:hover svg,
a.icon-link:focus-visible svg {
    transform: scale(.9)
}

.cursor-follower {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    z-index: 20;
    position: fixed;
    pointer-events: none;
    background: var(--glass-text);
    transition: background-color .2s, width .1s, height .1s
}

.cursor-follower.pointer {
    width: 50px;
    height: 50px;
    background: rgba(var(--text-rgb), .1)
}

.cursor-follower.clicked {
    width: 5px;
    height: 5px
}

.cursor-follower.tooltip-visible {
    width: 0px;
    height: 0px;
    background-color: rgba(var(--text-rgb), 0)
}

.tooltip {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(16px, 16px) scale(0);
    background-color: var(--text);
    padding: 6px 12px;
    border-radius: 20px;
    transform-origin: top left;
    box-shadow: var(--shadow-small);
    transition: opacity var(--transition-mouse), transform var(--transition-mouse), background-color var(--transition-theme), box-shadow var(--transition-theme)
}

.tooltip .text-medium {
    color: var(--bg)
}

.tooltip.active {
    opacity: 1;
    transform: translate(16px, 16px) scale(1)
}

.tooltip.image {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 6px
}

.tooltip.image img {
    width: 300px;
    border-radius: 16px;
    box-shadow: 0 0 10px #0003
}

.tooltip.image span {
    min-width: 180px
}

.tooltip.image.previous {
    box-shadow: none;
    transition: none
}

.tooltip.image.previous.active {
    transition: opacity var(--transition-mouse), transform var(--transition-mouse), background-color var(--transition-theme)
}

.tooltip.image.fading {
    animation: tooltip-fade-in .1s
}

.tooltip.image.resume {
    padding: 0;
    background-color: transparent;
    border-radius: 4px
}

.tooltip.image.resume img {
    width: 60px;
    border-radius: 4px;
    box-shadow: none
}

@keyframes tooltip-fade-in {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 21
}

.load-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2rem
}

svg.load-logo {
    width: 32px;
    fill: var(--text)
}

.progress-bar {
    width: 200px;
    height: 6px;
    border-radius: 2px 0 2px 2px;
    background-color: var(--glass-text);
    overflow: hidden
}

.progress-fill {
    height: 100%;
    background-color: var(--color);
    transition: width .5s
}

:root {
    --apple-lava-filter: saturate(200%) contrast(50%) brightness(1.15)
}

[data-theme=dark] {
    --apple-lava-filter: saturate(220%) contrast(55%) brightness(.8)
}

.lava-blur-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(2px)
}

.lava-filter {
    width: 0;
    height: 0
}

.lava-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    filter: url(#lava-meld);
    position: fixed;
    transform-origin: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .9;
    will-change: transform;
    transform: translate(0);
    transition: opacity var(--transition-length), transform .8s ease-in-out
}

.lava-wrapper.work {
    transform: translate(25%, 10%)
}

.lava-wrapper.worksub {
    transform: translate(48%, -20%)
}

.lava-wrapper.about {
    transform: translateY(50%)
}

.lava-wrapper.contact {
    transform: translate(-35%, 30%)
}

.lava-wrapper.error404 {
    transform: translateY(50%)
}

.lava {
        border-radius: 50%;
    z-index: 0;
    will-change: transform, filter;
        background: radial-gradient(circle at 42% 42%, #fee92c, #fee92c 40%, #fcd240 70%);
    box-shadow: 0 0 20px #fcd240e0, inset 0 0 10px #4641831a;
}

[data-theme=dark] .lava {
        background: radial-gradient(circle at 42% 42%, #948c46cc, #fee92c 40%, #fcd240 70%);
    box-shadow: 0 0 20px #fcd240e0, inset 0 0 10px #4641831a;
}

.lava.blob {
    width: 260px;
    height: 260px;
    z-index: 1;
    animation: blob-breathe 8s infinite ease-in-out;
    filter: var(--lava-droplet-filter);
    transition: opacity var(--transition-length), width var(--transition-length), height var(--transition-length), var(--lava-filter-transition)
}

.lava-wrapper.work .lava.blob {
    width: 180px;
    height: 180px
}

.lava-wrapper.worksub .lava.blob {
    width: 160px;
    height: 160px
}

.lava-wrapper.contact .lava.blob {
    width: 120px;
    height: 120px
}

.lava.tail {
    position: absolute;
    z-index: 0;
    width: var(--tail-size, 182px);
    height: var(--tail-size, 182px);
    transform: translate(var(--tail-x), var(--tail-y));
    transition: width var(--transition-length) cubic-bezier(.4, .1, .3, .9), height var(--transition-length) cubic-bezier(.4, .1, .3, .9), transform var(--transition-length) cubic-bezier(.4, .1, .3, .9)
}

.lava.droplet {
    position: absolute;
    opacity: 0;
    z-index: 0;
    filter: var(--lava-droplet-filter);
    transform: translate(0) rotate(0);
    transition: var(--lava-filter-transition)
}

.lava.droplet.clone {
    transform-origin: center;
    top: 95%;
    left: -53%
}

.lava.blob.clone {
    position: absolute;
    width: 140px;
    height: 140px;
    opacity: 0;
    top: 90%;
    left: -55%
}

.lava.blob.clone.visible {
    opacity: 1
}

.lava.droplet.group-1 {
    filter: var(--group-1-filter)
}

.lava.droplet.group-2 {
    filter: var(--group-2-filter)
}

.lava.droplet.lava-hover {
    filter: opacity(50%) saturate(1.28)
}

.lava.droplet.lava-hover-contact {
    filter: opacity(60%) saturate(1.28)
}

.lava-blur-wrapper.apple {
    filter: blur(8px) var(--apple-lava-filter)
}

.lava-blur-wrapper.apple .lava-wrapper,
.lava-blur-wrapper.apple .lava.droplet.group-1,
.lava-blur-wrapper.apple .lava.droplet.group-2,
.lava-blur-wrapper.apple .lava.droplet.lava-hover,
.lava-blur-wrapper.apple .lava.droplet.lava-hover-contact {
    filter: none
}

@media screen and (max-width: 1400px) {
    .lava-wrapper {
        opacity: .8
    }
    .lava-wrapper.work {
        transform: translate(30%, 10%)
    }
}

@media screen and (max-width: 800px) {
    .lava.blob {
        width: 200px;
        height: 200px
    }
    .lava-wrapper.work {
        transform: translate(35%, 20%);
        opacity: .8
    }
    .lava-wrapper.work .lava.blob {
        width: 120px;
        height: 120px
    }
    .lava-wrapper.worksub {
        transform: translate(55%, -25%);
        opacity: .7
    }
    .lava-wrapper.worksub .lava.blob {
        width: 100px;
        height: 100px
    }
    .lava.blob.clone {
        width: 60px;
        height: 60px;
        top: 110%;
        left: -65%
    }
    .lava.droplet.clone {
        top: 112%;
        left: -62%
    }
    .lava-wrapper.contact {
        transform: translate(35%)
    }
    .lava-wrapper.about {
        transform: translateY(56%)
    }
}

@keyframes explode {
    0% {
        transform: translate(0) rotate(0)
    }
    to {
        transform: translate(var(--droplet-move-x), var(--droplet-move-y)) rotate(var(--droplet-angle))
    }
}

@keyframes explode-breathe {
    0% {
        transform: translate(var(--droplet-move-x), var(--droplet-move-y)) rotate(var(--droplet-angle))
    }
    35% {
        transform: translate(var(--droplet-flow-x), var(--droplet-flow-y)) rotate(var(--droplet-angle))
    }
    to {
        transform: translate(var(--droplet-move-x), var(--droplet-move-y)) rotate(var(--droplet-angle))
    }
}

@keyframes collapse {
    0% {
        transform: translate(var(--droplet-midpoint-x), var(--droplet-midpoint-y)) rotate(var(--droplet-angle));
        opacity: 1
    }
    80% {
        opacity: 1
    }
    to {
        transform: translate(0) rotate(0);
        opacity: 0
    }
}

@keyframes blob-breathe {
    0%,
    to {
        transform: translate(-10px, -10px)
    }
    50% {
        transform: translate(10px, 10px)
    }
}

#navbar-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 19;
    max-width: 2200px;
    margin: 0 auto;
    transition: background-color var(--transition-theme)
}

.navbar-side {
    display: flex;
    align-items: center;
    gap: .5rem
}

.nav-logo-wrapper {
    cursor: pointer;
    pointer-events: auto;
    padding: .5rem 0
}

.nav-logo-wrapper.menu-blocked {
    pointer-events: none
}

.nav-logo-wrapper:hover .logo-shapes,
.nav-logo-wrapper:focus-visible .logo-shapes {
    transform: scale(.9)
}

.logo-shapes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    transition: transform var(--transition-mouse)
}

svg.nav-logo {
    width: 80px;
    fill: var(--text);
    transition: fill var(--transition-theme)
}

#navmenu-wrapper {
    position: fixed;
    z-index: 18;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(var(--bg-rgb), .7);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: background-color var(--transition-theme), backdrop-filter var(--transition-length), opacity var(--transition-length) .2s, visibility var(--transition-length)
}

#navmenu-wrapper.visible {
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition-delay: 0ms
}

.navmenu {
    width: 60%;
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.navlink-wrapper {
    display: flex;
    padding-left: .5rem;
    overflow: hidden
}

.navlink {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    pointer-events: none;
    transform: translateY(0);
    filter: blur(0px);
    animation: drop-out var(--transition-mouse) forwards;
    transition: color var(--transition-theme), opacity var(--transition-mouse), filter var(--transition-mouse)
}

.navlink.visible {
    pointer-events: auto;
    transform: translateY(-105%);
    animation: drop-in var(--transition-length) forwards
}

.navlink:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 25%;
    border-radius: 6px 0 6px 6px;
    padding-right: 1rem;
    background-color: var(--glass-text);
    bottom: 22%;
    left: -.5rem;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform var(--transition-length)
}

.navlink:hover:before,
.navlink:focus-visible:before {
    transform-origin: left;
    transform: scaleX(1)
}

.navlink.visible.link-0 {
    animation-delay: .2s
}

.navlink.visible.link-1 {
    animation-delay: .3s
}

.navlink.visible.link-2 {
    animation-delay: .4s
}

.navlink.visible.link-3 {
    animation-delay: .5s
}

.navlink.link-0 {
    animation-delay: .1s
}

.navlink.link-1 {
    animation-delay: .15s
}

.navlink.link-2 {
    animation-delay: .2s
}

.navlink.link-3 {
    animation-delay: .25s
}

.navlink.current {
    filter: blur(2px);
    opacity: .5;
    cursor: default
}

.navlink.current:before {
    display: none
}

.navlink.current:hover {
    filter: blur(4px)
}

.navlink svg {
    height: 2.8rem;
    position: relative;
    top: .25rem;
    fill: var(--text);
    transition: fill var(--transition-theme)
}

.navlink-text {
    font-family: Plus Jakarta Sans, sans-serif;
    font-weight: 600;
    font-size: 3.5rem;
    color: var(--text);
    transition: color var(--transition-theme)
}

.social-icons-wrapper {
    display: flex;
    gap: 2rem;
    padding: 0 .75rem
}

.nav-footer {
    position: absolute;
    display: flex;
    gap: .25rem;
    bottom: 5%;
    right: 5%
}

.nav-details {
    pointer-events: none;
    opacity: 0;
    filter: blur(14px);
    white-space: nowrap;
    transition: color var(--transition-theme), opacity var(--transition-length), filter var(--transition-length)
}

.nav-details.visible {
    pointer-events: auto;
    opacity: 1;
    filter: blur(0px);
    transition: color var(--transition-theme), opacity var(--transition-long) .8s, filter var(--transition-long) .8s
}

@media screen and (max-width: 1400px) {
    #navbar-wrapper {
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        background-color: rgba(var(--bg-rgb), .5)
    }
}

@media screen and (max-width: 800px) {
    .navmenu {
        width: 70%
    }
}

@media screen and (max-width: 480px) {
    .navmenu {
        width: 80%;
        gap: 1.5rem
    }
    .nav-footer {
        right: 0;
        left: 0;
        flex-direction: column;
        align-items: center
    }
    .navlink-text {
        font-size: 2.5rem
    }
    .navlink svg {
        height: 2.2rem;
        top: 2px
    }
}

.menusvg-container {
    width: 48px;
    height: 48px;
    display: inline-block;
    overflow: hidden;
    cursor: pointer
}

.menusvg-container svg {
    width: 100%;
    height: 100%
}

.circle {
    fill: var(--text);
    transition: fill var(--transition-theme), transform var(--transition-length) cubic-bezier(.3, .9, .3, .9)
}

.menusvg-container .top-left,
.menusvg-container .top-right,
.menusvg-container .bottom-right,
.menusvg-container .bottom-left {
    transform-origin: center;
    transform: translate(0)
}

.menusvg-container .bottom-left {
    transition-delay: 0ms
}

.menusvg-container .top-left {
    transition-delay: 25ms
}

.menusvg-container .top-right {
    transition-delay: 50ms
}

.menusvg-container .bottom-right {
    transition-delay: 75ms
}

.menusvg-container:hover .top-left,
.menusvg-container:focus-visible .top-left {
    transform: translate(42%, 42%)
}

.menusvg-container:hover .top-right,
.menusvg-container:focus-visible .top-right {
    transform: translate(-42%, 42%)
}

.menusvg-container:hover .bottom-right,
.menusvg-container:focus-visible .bottom-right {
    transform: translate(-42%, -42%)
}

.menusvg-container:hover .bottom-left,
.menusvg-container:focus-visible .bottom-left {
    transform: translate(42%, -42%)
}

.menusvg-container.open .top-left {
    transform: translate(36%, 36%) scale(.6)
}

.menusvg-container.open .top-right {
    transform: translate(-36%, 36%) scale(.6)
}

.menusvg-container.open .bottom-right {
    transform: translate(-36%, -36%) scale(.6)
}

.menusvg-container.open .bottom-left {
    transform: translate(36%, -36%) scale(.6)
}

#awwwards {
    position: fixed;
    z-index: 19;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    transition: transform var(--transition-length) cubic-bezier(.3, .9, .3, .9) 1.2s
}

#awwwards.leaving {
    transform: translate(60px, -50%);
    transition-delay: 0ms
}

#awwwards a {
    padding: 0;
    display: flex;
    height: 171px;
    width: 53px;
    background-color: var(--text);
    transition: background-color var(--transition-theme)
}

#awwwards a:before {
    content: "";
    display: none
}

.awwwards-text {
    fill: var(--bg);
    transition: fill var(--transition-theme)
}

@media screen and (max-width: 1400px) {
    #awwwards {
        top: 30%
    }
}

@media screen and (max-width: 800px) {
    #awwwards,
    #awwwards.leaving {
        top: 50%;
        pointer-events: none;
        transform: translate(60px, -50%);
        transition: transform var(--transition-length) cubic-bezier(.3, .9, .3, .9)
    }
    #awwwards.visible {
        pointer-events: auto;
        transform: translateY(-50%);
        transition-delay: 1.2s
    }
}

.home-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

.home-link-wrapper {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    overflow: hidden
}

.home-link-space {
    flex: 1;
    min-width: 2rem
}

.home-link {
    flex: 1;
    padding: 0 4px;
    white-space: nowrap;
    text-align: center;
    transform: translateY(-105%);
    cursor: pointer;
    pointer-events: auto;
    animation: drop-in var(--transition-length) 1s forwards
}

.home-link:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 33%;
    border-radius: 4px 0 4px 4px;
    background-color: var(--glass-text);
    bottom: 10%;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform var(--transition-length)
}

.home-link:hover:before,
.home-link:focus:before {
    transform-origin: left;
    transform: scaleX(1)
}

.home-link.leaving {
    pointer-events: none;
    transform: translateY(0);
    animation: drop-out var(--transition-length) forwards
}

.name-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    overflow: hidden
}

svg.block-letter {
    width: 740px;
    fill: var(--text);
    will-change: transform;
    transform: translateY(-105%);
    animation: drop-in .8s cubic-bezier(1, .2, .8, 0) forwards;
    transition: fill var(--transition-theme)
}
/*.cls-1 {*/
/*    fill: var(--text) !important;*/
/*}*/

.home-content-wrapper.leaving svg.block-letter {
    transform: translateY(0);
    animation: drop-out .2s ease-in forwards
}

#a1 {
    animation-delay: 0ms
}

#s1,
#l1 {
    animation-delay: 75ms
}

#s2 {
    animation-delay: .1s
}

#o1,
#t1 {
    animation-delay: .15s
}

#c1,
#a2 {
    animation-delay: .2s
}

.scroll-roles {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    animation: blur-in var(--transition-length) 1.5s forwards
}

.scroll-roles.leaving {
    opacity: 1;
    animation: blur-out var(--transition-length) forwards
}

.scroll-text {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: x-scroll 14s linear infinite
}

.bullet {
    width: 10px;
    height: 6px;
    border-radius: 3px 0 3px 3px;
    background-color: var(--text);
    margin: 2px .8rem 0;
    transition: background-color var(--transition-theme)
}

@keyframes x-scroll {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(var(--scroll-text-x, 456px))
    }
}

@media screen and (max-width: 800px) {
    svg.block-letter {
        width: 100px
    }
    .name-wrapper {
        gap: .6rem
    }
}

@media screen and (max-width: 600px) {
    svg.block-letter {
        width: 80px
    }
}

@media screen and (max-width: 480px) {
    svg.block-letter {
        width: 64px
    }
    .name-wrapper {
        gap: .4rem
    }
}

.work-half-wrapper {
    width: 50%
}

.work-card {
    overflow: hidden
}

.card-container {
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    border-bottom: 2px solid var(--text);
    transform: translateY(-105%);
    animation: drop-in var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards;
    transition: border-color var(--transition-theme)
}

.card-container.leaving {
    pointer-events: none;
    transform: translateY(0);
    animation: drop-out var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

.card-container.index-0 {
    animation-delay: .5s
}

.card-container.index-1 {
    animation-delay: .6s
}

.card-container.index-2 {
    animation-delay: .7s
}

.card-container.index-3 {
    animation-delay: .8s
}

.card-container.index-4 {
    animation-delay: .9s
}

.card-container.leaving.index-0 {
    animation-delay: .1s
}

.card-container.leaving.index-1 {
    animation-delay: .15s
}

.card-container.leaving.index-2 {
    animation-delay: .2s
}

.card-container.leaving.index-3 {
    animation-delay: .25s
}

.card-container.leaving.index-4 {
    animation-delay: .3s
}

.project-card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    transform: translate(-30px);
    margin-right: -30px;
    transition: transform var(--transition-mouse)
}

.card-container:hover .project-card-title,
.card-container:focus .project-card-title {
    transform: translate(0)
}

.project-card-title svg {
    height: 60px;
    fill: var(--text);
    transition: fill var(--transition-theme)
}

.card-container .project-card-title h2 {
    transform-origin: left;
    transition: transform var(--transition-length), color var(--transition-theme)
}

.card-container:hover .project-card-title h2,
.card-container:focus .project-card-title h2 {
    transform: scale(1.3)
}

.card-container span.text-medium {
    white-space: nowrap;
    transform-origin: right;
    transition: transform var(--transition-mouse), color var(--transition-theme)
}

.card-container:hover span.text-medium,
.card-container:focus span.text-medium {
    transform: translate(-10px)
}

@media screen and (max-width: 1400px) {
    .work-half-wrapper {
        width: 70%
    }
}

@media screen and (max-width: 800px) {
    .card-container span.text-medium {
        font-size: 1rem
    }
    .work-half-wrapper {
        width: 100%
    }
}

@media screen and (max-width: 480px) {
    .project-card-title svg {
        height: 50px
    }
    .card-container:hover .project-card-title h2,
    .card-container:focus .project-card-title h2 {
        transform: scale(1.1)
    }
    .card-container:hover span.text-medium,
    .card-container:focus span.text-medium {
        transform: none
    }
}

.about-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 2rem
}

.about-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1
}

.about-info .p-wrapper {
    overflow: hidden;
    width: 75%
}

.about-info .p-wrapper p {
    transform: translateY(-105%);
    animation: drop-in var(--transition-long) cubic-bezier(.3, .9, .3, .9) forwards
}

.about-info .p-wrapper p.leaving {
    transform: translateY(0);
    animation: drop-out var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

.about-info .p-wrapper p.index-1 {
    animation-delay: .5s
}

.about-info .p-wrapper p.index-2 {
    animation-delay: .6s
}

.about-info .p-wrapper p.index-1.leaving {
    animation-delay: .1s
}

.about-info .p-wrapper p.index-2.leaving {
    animation-delay: .15s
}

.about-link {
    transform: translateY(-105%);
    animation: drop-in var(--transition-long) cubic-bezier(.3, .9, .3, .9) .7s forwards
}

.about-link.leaving {
    transform: translateY(0);
    animation: drop-out var(--transition-length) cubic-bezier(.3, .9, .3, .9) .2s forwards
}

.about-photo-wrapper {
    width: 300px;
    position: relative;
    opacity: 0;
    filter: blur(14px);
    animation: blur-in var(--transition-long) .6s forwards
}

.about-photo-wrapper.leaving {
    opacity: 1;
    filter: blur(0px);
    animation: blur-out var(--transition-length) forwards
}

.about-photo-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 60px 0 60px 60px;
    filter: drop-shadow(var(--shadow-large));
    transition: filter var(--transition-theme)
}

.about-photo-hello {
    border-radius: 20px;
    cursor: pointer;
    position: absolute;
    top: 41%;
    left: 61%;
    right: 27%;
    bottom: 18%;
    z-index: 4
}

[data-theme=dark] .about-photo-wrapper img {
    filter: drop-shadow(var(--shadow-large)) hue-rotate(-125deg) brightness(.8)
}

@media screen and (max-width: 1400px) {
    .about-photo-wrapper {
        width: 30%;
        min-width: 300px
    }
    .about-info .p-wrapper {
        width: 100%
    }
}

@media screen and (max-width: 800px) {
    .about-content {
        flex-direction: column
    }
    .about-photo-wrapper {
        width: 280px
    }
}

.contact-wrapper {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--transition-length), filter var(--transition-length)
}

.thanks-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    gap: 1rem;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    max-width: 520px;
    padding: 1rem;
    text-align: center;
    margin: 0 auto;
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
    transition: opacity var(--transition-length), filter var(--transition-length)
}

.thanks-wrapper.leaving {
    opacity: 0;
    filter: blur(14px)
}

.hidden {
    opacity: 0;
    pointer-events: none;
    filter: blur(14px)
}

.contact-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 1rem
}
.techno-contact-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem
}
section.techno-contact-left .input-wrapper:hover label {
    left: 12px;
    transition: all 0.2s;
}
.techno-contact-left .techno-submit-btn
{
    display:none;
}
.input-wrapper {
    overflow: hidden;
    position: relative;
    padding: 2px 17px 2px 2px
}

.input-item {
    display: flex;
    flex-direction: column;
    transform: translateY(-105%);
    animation: drop-in var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

.input-item.leaving {
    transform: translateY(0);
    animation: drop-out var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

.input-item.index-0 {
    animation-delay: .5s
}

.input-item.index-1 {
    animation-delay: .6s
}

.input-item.index-2 {
    animation-delay: .7s
}

.input-item.index-3 {
    animation-delay: .8s
}

.input-item.index-0.leaving {
    animation-delay: .1s
}

.input-item.index-1.leaving {
    animation-delay: .15s
}

.input-item.index-2.leaving {
    animation-delay: .2s
}

.input-item.index-3.leaving {
    animation-delay: .25s
}

.contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem
}

.email-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    opacity: 0;
    filter: blur(14px);
    animation: blur-in var(--transition-length) 1.2s forwards
}

.email-box.leaving {
    opacity: 1;
    filter: blur(0px);
    animation: blur-out var(--transition-length) forwards
}

.email-box .a-wrapper {
    left: 0
}

label.text-small {
    margin: .25rem 0 0 .5rem;
    position: absolute;
    z-index: 3;
    transform: translate(0);
    color: rgba(var(--text-rgb), .7);
    transition: color var(--transition-theme), transform var(--transition-mouse) cubic-bezier(.3, .9, .3, .9);
    top: 0px;
    left: 0px;
}

.input-item input,
.input-item textarea {
    border: 2px solid var(--text);
    background-color: rgba(var(--bg-rgb), .5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    caret-color: var(--text);
    transition: border-color var(--transition-theme), background-color var(--transition-theme), transform var(--transition-mouse) cubic-bezier(.3, .9, .3, .9), color var(--transition-theme)
}

.input-item input {
    width: 70%;
    height: 42px;
    border-radius: 0 22px 22px;
    padding: 1rem 1rem 0
}

.input-item textarea {
    width: 100%;
    max-width: 100%;
    min-width: 300px;
    min-height: 130px;
    height: auto;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
    border-radius: 0 22px;
    padding: 1.5rem 1rem .5rem
}

input::placeholder,
textarea::placeholder {
    color: rgba(var(--text-rgb), .7);
    transition: color var(--transition-theme)
}

input:hover,
input:focus,
input:focus-visible,
textarea:hover,
textarea:focus,
textarea:focus-visible,
input:hover+label,
input:focus+label,
input:focus-visible+label,
textarea:hover+label,
textarea:focus+label {
    transform: translate(15px)
}

input:focus,
textarea:focus,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color);
    box-shadow: none !important
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:focus-visible,
input:-webkit-autofill:active {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    box-shadow: 0 0 0 100px var(--bg) inset !important;
    -webkit-box-shadow: 0 0 0px 100px var(--bg) inset !important
}

.submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    z-index: 17;
    width: 120px;
    height: 120px;
    border-radius: 64px;
    border: none;
    box-shadow: var(--shadow-small);
    background-color: var(--text);
    cursor: pointer;
    opacity: 0;
    transform: translate(800px);
    animation: submit-button-slide-in var(--transition-long) .8s forwards;
    transition: background-color var(--transition-theme), box-shadow var(--transition-theme)
}

.submit-button.leaving {
    opacity: 1;
    transform: translate(0);
    animation: submit-button-slide-out var(--transition-long) forwards
}

.submit-button span {
    display: none;
    color: var(--bg)
}

.submit-button svg {
    width: 64px;
    height: 64px;
    transform: rotate(171deg);
    fill: var(--bg);
    transition: transform var(--transition-mouse) cubic-bezier(.25, .1, .25, 3.5), fill var(--transition-theme)
}

.submit-button:hover svg,
.submit-button:focus svg {
    transform: rotate(180deg)
}

@keyframes submit-button-slide-in {
    0% {
        opacity: 0;
        transform: translate(800px)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes submit-button-slide-out {
    0% {
        opacity: 1;
        transform: translate(0)
    }
    to {
        opacity: 0;
        transform: translate(800px)
    }
}

@media screen and (max-width: 1400px) {
    .contact-left {
        width: 60%
    }
}

@media screen and (max-width: 1100px) {
    .contact-left {
        width: 70%
    }
    .submit-button {
        gap: .5rem;
        padding: 1rem;
        width: auto;
        height: 60px;
        border-radius: 30px
    }
    .submit-button span {
        display: inline-block
    }
    .submit-button svg {
        width: 32px;
        height: 32px;
        flex-shrink: 0
    }
}

@media screen and (max-width: 800px) {
    .contact-wrapper {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start
    }
    .contact-left {
        width: 100%
    }
    .contact-right,
    .email-box {
        flex-direction: row;
        align-items: center
    }
}

h1.error-number {
    font-size: 14rem
}

.not-found-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px
}

@media screen and (max-width: 800px) {
    h1.error-number {
        font-size: 8rem
    }
}

.back-button {
    position: fixed;
    left: 5%;
    top: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    z-index: 17;
    width: 120px;
    height: 120px;
    border-radius: 64px;
    border: none;
    box-shadow: var(--shadow-small);
    background-color: var(--text);
    cursor: pointer;
    transform: translate(-170%);
    opacity: 0;
    animation: back-button-slide-in var(--transition-long) 1.2s forwards;
    transition: background-color var(--transition-theme), box-shadow var(--transition-theme)
}

.back-button.leaving {
    transform: translate(0);
    opacity: 1;
    animation: back-button-slide-out var(--transition-long) forwards
}

.back-button svg {
    width: 64px;
    height: 64px;
    transform: rotate(9deg);
    fill: var(--bg);
    transition: transform var(--transition-mouse) cubic-bezier(.25, .1, .25, 3.5), fill var(--transition-theme)
}

.back-button:hover svg,
.back-button:focus svg {
    transform: rotate(0)
}

.worksub-header {
    width: 100%;
    display: flex;
    flex-direction: column
}

.worksub-header figure {
    display: flex;
    width: 100%;
    aspect-ratio: 12/7;
    margin: 0 0 1rem
}

.worksub-header figure img {
    width: 100%;
    border-radius: 40px 40px 4px 4px;
    box-shadow: var(--shadow-large);
    opacity: 0;
    transform: translateY(-30%);
    animation: header-img-fade-in var(--transition-long) cubic-bezier(.3, .9, .3, .9) .4s forwards;
    transition: box-shadow var(--transition-theme)
}

.worksub-header figure.leaving img {
    opacity: 1;
    transform: translateY(0);
    animation: header-img-fade-out var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

.worksub-intro {
    display: flex;
    flex-direction: column;
    width: 100%;
    opacity: 0;
    transform: translateY(100px);
    animation: worksub-fade-in var(--transition-long) cubic-bezier(.3, .9, .3, .9) .6s forwards
}

.worksub-intro.leaving {
    opacity: 1;
    transform: translateY(0);
    animation: worksub-fade-out var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

.intro-content {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
    gap: 2rem;
    flex-direction: column;
}

.intro-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .8rem
}

.intro-left-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap
}

.round-label {
    background-color: var(--text);
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: var(--shadow-small);
    color: var(--bg);
    flex-shrink: 0;
    min-width: 60px;
    align-self: flex-start;
    text-align: center;
    transition: background-color var(--transition-theme), color var(--transition-theme), box-shadow var(--transition-theme)
}

.intro-left-list {
    display: flex;
    flex-direction: column;
    white-space: nowrap
}

.worksub-intro>p {
    width: 60%;
    line-height: 1.5rem
}

.worksub-divider {
    height: 4px;
    border-radius: 2px 0 4px 2px;
    background-color: var(--text);
    width: 100%;
    transition: background-color var(--transition-theme)
}

.section-heading-wrapper {
    display: flex;
    align-items: center
}

.section-heading-wrapper svg {
    height: 36px;
    fill: var(--text);
    transition: fill var(--transition-theme);
    margin: 2px 1rem 0 0;
    flex-shrink: 0
}

.worksub-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
    opacity: 0;
    transform: translateY(100px);
    animation: worksub-fade-in var(--transition-long) cubic-bezier(.3, .9, .3, .9) .8s forwards
}

.worksub-info.leaving {
    animation: worksub-fade-out var(--transition-length) cubic-bezier(.3, .9, .3, .9) forwards
}

.worksub-info section {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.worksub-info figure {
    margin: 0;
    display: flex;
    gap: 2rem
}

.worksub-info figure img,
.worksub-info video {
    width: 100%;
    box-shadow: var(--shadow-large);
    transition: box-shadow var(--transition-theme)
}

figure img.phone-screen,
figure img.mobile-page,
figure img.app-icon {
    box-shadow: none;
    filter: drop-shadow(var(--shadow-large));
    transition: filter var(--transition-theme)
}

figure img.app-icon {
    max-width: 220px;
    margin: 0 auto
}

figure img.phone-screen {
    max-width: 300px
}

figure img.mobile-page {
    max-width: 300px;
    border-radius: 4px
}

figure img.medium-image {
    max-width: 640px;
    margin: 0 auto
}

figure.single-img-wrapper {
    flex-direction: column
}

figure.single-img-wrapper img,
video {
    border-radius: 4px
}

figure.double-img-wrapper {
    align-items: center;
    justify-content: space-around
}

figure.double-img-wrapper.mobile-site-wrapper {
    justify-content: center
}

@media screen and (max-width: 1400px) {
    .back-button {
        display: none
    }
}

@media screen and (max-width: 800px) {
    .worksub-info {
        margin: 1.5rem 0;
        gap: 1.5rem
    }
    .worksub-info section {
        gap: 1.5rem
    }
    .worksub-info figure {
        gap: 1.5rem
    }
    .intro-content {
        gap: 1.5rem;
        flex-direction: column-reverse;
        align-items: flex-start
    }
    .intro-left {
        gap: .5rem
    }
    .intro-left-list {
        padding-top: 6px
    }
    .double-img-wrapper {
        gap: 1rem
    }
}

@media screen and (max-width: 480px) {
    .worksub-info figure {
        gap: 1rem
    }
    .section-heading-wrapper svg {
        margin: 2px .5rem 0
    }
    figure img.app-icon {
        max-width: 160px
    }
}

@keyframes back-button-slide-in {
    0% {
        opacity: 0;
        transform: translate(-170%)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes back-button-slide-out {
    0% {
        opacity: 1;
        transform: translate(0)
    }
    to {
        opacity: 0;
        transform: translate(-170%)
    }
}

@keyframes header-img-fade-in {
    0% {
        opacity: 0;
        transform: translateY(-30%)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes header-img-fade-out {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(-60%)
    }
}

@keyframes worksub-fade-in {
    0% {
        opacity: 0;
        transform: translateY(100px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes worksub-fade-out {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(100px)
    }
}





/*My Custom Css Start*/
.work-card-permalink
{
    padding: 0px;
}
.work-card-permalink:before
{
    display: none;
}
/* Portfolio Gallery Wrapper */
.portfolio-gallery {
    display: grid;
    gap: 20px; /* spacing between images */
    margin-top: 30px;
}

/* Gallery Item */
.portfolio-gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;   /* rounded corners */
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.portfolio-gallery-item img:hover {
    transform: scale(1.03); /* subtle zoom effect */
}

/* Mobile (1 column) */
@media (max-width: 768px) {
    .portfolio-gallery {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 572px) {
    .portfolio-gallery {
        grid-template-columns: 1fr;
    }
}