:root {
    /* colors */
    --background-color: #191919;
    --text-color: #FAFAFA;
    --accent: #dfff4f;
    --tw50: #FAFAFA;
    --tw100: #F5F5F5;
    --tw200: #E5E5E5;
    --tw300: #D4D4D4;
    --tw400: #A1A1A1;
    --tw500: #737373;
    --tw600: #525252;
    --tw700: #404040;
    --tw800: #262626;
    --tw900: #171717;
    --tw950: #0A0A0A;

    /* typography */
    --font-family: 'Inter', sans-serif;

    /* spacing */
    --padding-huge: 120px;
    --padding-xxl: 80px;
    --padding-xl: 64px;
    --padding-large: 40px;
    --padding-med: 24px;
    --padding-small: 16px;
    --padding-mb-img: 12px;
    --padding-xs: 8px;
    --padding-xxs: 4px;
    --padding-tiny: 2px; 
    --border-radius: 12px;
    --text-max-width: 504px;
    --intro-max-width: 384px;

}

.light-mode {
    --background-color: #fafafa;
    --text-color: #0A0A0A;
    --accent: #EB4D33;
    --tw50: #0A0A0A;
    --tw100: #171717;
    --tw200: #262626;
    --tw300: #404040;
    --tw400: #525252;
    --tw500: #737373;
    --tw600: #A1A1A1;
    --tw700: #D4D4D4;
    --tw800: #E5E5E5;
    --tw900: #F5F5F5;
    --tw950: #FAFAFA;
} 

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    line-height: 1.6;
    font-size: 14px;
}

/* Header Styles */
h1 { /* header title + about name */
    font-size: 1.2em;
    font-weight: 500;
    color: var(--tw100);
}

h2 { /* focus */
    font-size: 1.2em;
    font-weight: 400;
    color: var(--tw400);
}

h3 { /* project name */
    font-size: 1em;
    font-weight: 500;
    color: var(--tw100);
}

h4 { /* text title */
    font-size: 1.4em;
    font-weight: 500;
    color: var(--tw200);
}

p {
    font-size: 1em;
    font-weight: 400;
    color: var(--tw300);
}

a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--tw700);
}

a:hover {
    border-bottom: 1px solid var(--accent);
}

img {
    padding: var(--padding-small);
    background-color: var(--tw800);
    border-radius: var(--border-radius);
    width: 100%;
}

.project-dot {
    fill: var(--tw600);
}

.accent-dot {
    fill: var(--accent);
}

.hr {
    height: 2px;
    width: 100%;
    max-width: max(64vw, 800px);
    border: none;
    background-color: var(--tw800);
}

.arrow {
    fill: var(--tw300);
}



/* --- main --- */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    width: 100%;
}

header {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: var(--padding-small);
    padding-left: var(--padding-large);
    padding-bottom: var(--padding-small);
    padding-right: var(--padding-large);
    backdrop-filter: blur(2px);
}

header a {
    font-size: 1.2em;
    font-weight: 500;
    color: var(--tw50);
    border-bottom: 1px solid transparent;
}

header a:hover {
    border-bottom: 1px solid var(--accent);
}

.mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    height: 1.5;
    width: auto;
}

.mode-toggle img {
    padding: 0 !important;
    background-color: transparent !important;
}

.main {
    display: flex;
    flex-direction: column;
    padding-top: var(--padding-xl);
    padding-left: var(--padding-large);
    padding-bottom: var(--padding-large);
    padding-right: var(--padding-large);
    align-items: center;
    gap: var(--padding-large);
    height: 100dvh;
    overflow: scroll;
    width: 100%;
}

.page-toggle {
    display: flex;
    flex-direction: row;
    gap: var(--padding-xs);
    border-radius: 100px;
    border: 1px solid var(--tw800);
    width: fit-content;
    padding: var(--padding-xxs);

}

.toggle {
    display: flex;
    padding-top: var(--padding-tiny);
    padding-left: var(--padding-small);
    padding-bottom: var(--padding-tiny);
    padding-right: var(--padding-small);
    color: var(--tw300);
    border-radius: 100px;
    cursor: pointer;
}

.toggle.active {
    background-color: var(--tw700);
    color: var(--text-color);
    box-shadow: 0 0px 4px var(--tw700);
}

.toggle:hover {
    background-color: var(--tw800);
    box-shadow: 0 0px 8px var(--tw700);
    transition: background-color 0.2s ease-out;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.content-item {
    display: none; /* Hide all content by default */
}

.content-item.active {
    display: block; /* Show only the active content */
    width: 100%;
    justify-items: center;
}


/* --- about --- */
.about {
    display: flex;
    flex-direction: column;
    gap: var(--padding-med);
    width: 100%;
    max-width: var(--intro-max-width);
}

.self-intro {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: var(--padding-small);
}

.focus {
    display: flex;
    flex-direction: row;
    gap: var(--padding-xs);
    align-items: center;
}

.links {
    width: 100%;
    display: flex;  
    flex-direction: row;
    align-items: center;
    gap: var(--padding-xs);
    padding-bottom: var(--padding-large);
}

.links a {
    color: var(--tw400);
}

.links a:hover {
    color: var(--tw200);
}

.cv {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xs);
    width: 100%;
}

.experience {
    display: flex;
    flex-direction: column;
    justify-content: var(--padding-xxs);
    width: 100%;
}

.experience span {
    display: flex;
    color: var(--tw500);
    align-items: center;
    gap: var(--padding-small);
}




/* --- work --- */
.projects {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xl);
    width: 100%;
    max-width: 1040px;
    padding-bottom: var(--padding-large);
}

.projects a {
    text-decoration: none;
    border-radius: var(--border-radius);
    width: 100%;
    border: 1px solid transparent;
}

.projects a:hover {
    box-shadow: 0 0px 64px var(--tw700);
    transition: box-shadow 0.2s ease-out;
    border: 1px solid var(--tw700);
}

.project {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius);
    width: 100%;
    background: var(--tw800);
    overflow: hidden;
}

.project-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--padding-xs);
    width: 100%;
    padding-top: var(--padding-small);
    padding-left: var(--padding-med);
    padding-bottom: var(--padding-med);
    padding-right: var(--padding-med);

}

.project-info h3 {
    color: var(--tw50);
}

.project-title {
    display: flex;
    flex-direction: row;
    width: fit-content;
}

.project-type {
    display: flex;
    flex-direction: row;
    gap: var(--padding-xs);
    width: fit-content;
    align-items: center;
}

.project-type h3 {
    color: var(--tw400);
}


footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: var(--padding-xs);
    padding-left: var(--padding-large);
    padding-bottom: var(--padding-xs);
    padding-right: var(--padding-large);
    color: var(--tw500);
    font-size: 14px;
    gap: var(--padding-xxs);
    backdrop-filter: blur(2px);
}


/* --- case --- */
.case {
    display: flex;
    flex-direction: column;
    gap: var(--padding-huge);
    width: 100%;
    max-width: 1200px;
    padding-bottom: var(--padding-large);
    align-items: center;
}

.section {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xl);
    width: 100%;
    align-items: center;
}

.asset {
    width: 100%;
    max-width: 1040px;
    gap: var(--padding-xs);
}

.small-asset {
    width: 100%;
    max-width: 760px;
    gap: var(--padding-xs);
}

figcaption {
    font-size: .9em;
    color: var(--tw500);
    text-align: center;
    margin-top: var(--padding-xxs);
}

.text-block {
    display: flex;
    flex-direction: column;
    gap: var(--padding-med);
    max-width: var(--text-max-width);
    align-items: start;
}

.case-title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--padding-small);
}

.case-subtitle {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--padding-small);
}

.case-info {
    display: flex;
    flex-direction: row;
}

.youtube {
    position: relative;
    width: 60%;
    padding-bottom: 33.75%;
}

.metrics {
    display: flex;
    flex-direction: row;
    gap: var(--padding-med);
    padding: var(--padding-med);
    background-color: var(--tw800);
    border-radius: var(--border-radius);
}
.metric {
    display: flex;
    flex-direction: row;
    gap: var(--padding-xs);
    align-items: center;
    justify-content: center;
}

.quote {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--padding-med);
    background-color: var(--tw800);
    border-radius: var(--border-radius);
    border-left: 8px solid var(--tw700);
    width: 100%;
}

.next-case {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xxs);
    width: 100%;
    max-width: var(--text-max-width);
    text-align: end;
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-med);
}





/* ---lightbox --- */
.lightbox {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tw800);
    justify-content: center;
    align-items: center;
    opacity: 0; /* Start invisible */
    transition: 0.3s ease-out;
}

.lightbox.show {
    display: flex; /* Show lightbox */
    opacity: 1; /* Fully visible */
}

.lightbox-content {
    max-width: 96%;
    max-height: 96%;
}

.lightbox-trigger {
    cursor: pointer; /* Indicate it is clickable */
}



/* --- 404 --- */
.notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    gap: var(--padding-med);
    padding-bottom: var(--padding-xl);
    text-align: center;
}

.nf-links {
    width: 100%;
    align-items: center;
}

.nf-links a {
    color: var(--tw400);
}

.nf-links a:hover {
    color: var(--tw200);
}

/* --- MEDIA --- */
@media (max-width: 480px) {
}

@media (max-width: 840px) {
    header, .main, footer {
        padding-left: var(--padding-small);
        padding-right: var(--padding-small);
    }


    .youtube {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
    }
}