/* ======================== CSS VARIABLES ======================== */
:root {
    color-scheme: light dark;

    --radius: 30px;
    --width: 1200px;
    --min-width: 600px;

    --foreground: light-dark(#071c02, #e8f5e8);
    --background: light-dark(#f9f9f9, #0a0a0a);
    --surface: light-dark(rgba(249, 249, 249, 0.85), rgba(18, 18, 18, 0.85));
    --surface-solid: light-dark(#f9f9f9, #121212);
    --surface-secondary: light-dark(#d6d6d6, #2a2a2a);

    --primary: light-dark(#157dfb, #4a9eff);
    --accent-1: #FFACAC;
    --accent-2: #583C87;
    --accent-magenta: #E45A84;
    --muted-text: light-dark(#c5c5c5, #888888);

    --shadow-primary: light-dark(rgba(25, 25, 25, 0.5), rgba(75, 75, 75, 0.3));
    --shadow-secondary: light-dark(rgba(50, 50, 50, 0.5), rgba(150, 150, 150, 0.5));

    --bg-animated: light-dark(#ffffff, #1a1a1a);
    --animation-color-1: var(--accent-1);
    --animation-color-2: var(--accent-2);
    --animation-color-3: var(--accent-magenta);
}

/* ======================== GLOBAL STYLES ======================== */
* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Fira Code', Helvetica, sans-serif;
    font-style: normal;
    background-color: var(--background);
    margin: 0;
    color: var(--foreground);
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.5em;
    padding: 10px;
    margin: 0;
}

/* ======================== ANIMATED BACKGROUND ======================== */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 1;
}

.background.animated {
    background: var(--bg-animated);
    overflow: hidden;
}

.background.animated span {
    width: 37vmin;
    height: 37vmin;
    border-radius: 37vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move 20s linear infinite;
}

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

/* Animation Elements */
.background.animated span:nth-child(1) {
    color: var(--animation-color-1);
    top: 80%;
    left: 100%;
    animation-duration: 301s;
    animation-delay: -42s;
    transform-origin: 13vw -15vh;
    box-shadow: -74vmin 0 9.294494642669756vmin currentColor;
}

.background.animated span:nth-child(2) {
    color: var(--animation-color-1);
    top: 60%;
    left: 10%;
    animation-duration: 274s;
    animation-delay: -140s;
    transform-origin: 19vw 9vh;
    box-shadow: -74vmin 0 10.244992328652906vmin currentColor;
}

.background.animated span:nth-child(3) {
    color: var(--animation-color-2);
    top: 69%;
    left: 72%;
    animation-duration: 63s;
    animation-delay: -195s;
    transform-origin: 16vw 8vh;
    box-shadow: 74vmin 0 9.437071122772556vmin currentColor;
}

.background.animated span:nth-child(4) {
    color: var(--animation-color-1);
    top: 53%;
    left: 47%;
    animation-duration: 159s;
    animation-delay: -35s;
    transform-origin: 15vw 8vh;
    box-shadow: -74vmin 0 9.756319478587463vmin currentColor;
}

.background.animated span:nth-child(5) {
    color: var(--animation-color-3);
    top: 49%;
    left: 75%;
    animation-duration: 114s;
    animation-delay: -21s;
    transform-origin: 15vw -13vh;
    box-shadow: -74vmin 0 9.611836071412199vmin currentColor;
}

.background.animated span:nth-child(6) {
    color: var(--animation-color-3);
    top: 16%;
    left: 97%;
    animation-duration: 64s;
    animation-delay: -42s;
    transform-origin: -22vw 3vh;
    box-shadow: -74vmin 0 9.670052123892075vmin currentColor;
}

.background.animated span:nth-child(7) {
    color: var(--animation-color-2);
    top: 45%;
    left: 93%;
    animation-duration: 256s;
    animation-delay: -135s;
    transform-origin: 3vw 11vh;
    box-shadow: 74vmin 0 9.830858219617957vmin currentColor;
}

.background.animated span:nth-child(8) {
    color: var(--animation-color-2);
    top: 70%;
    left: 13%;
    animation-duration: 184s;
    animation-delay: -228s;
    transform-origin: -14vw -3vh;
    box-shadow: 74vmin 0 9.38588536685881vmin currentColor;
}

.background.animated span:nth-child(9) {
    color: var(--animation-color-1);
    top: 59%;
    left: 56%;
    animation-duration: 119s;
    animation-delay: -52s;
    transform-origin: -9vw 20vh;
    box-shadow: 74vmin 0 10.207924166914419vmin currentColor;
}

.background.animated span:nth-child(10) {
    color: var(--animation-color-3);
    top: 57%;
    left: 7%;
    animation-duration: 221s;
    animation-delay: -121s;
    transform-origin: 9vw -7vh;
    box-shadow: -74vmin 0 9.936966901582815vmin currentColor;
}

.background.animated span:nth-child(11) {
    color: var(--animation-color-3);
    top: 53%;
    left: 51%;
    animation-duration: 121s;
    animation-delay: -134s;
    transform-origin: 7vw 22vh;
    box-shadow: -74vmin 0 10.05651115006796vmin currentColor;
}

.background.animated span:nth-child(12) {
    color: var(--animation-color-3);
    top: 25%;
    left: 58%;
    animation-duration: 36s;
    animation-delay: -149s;
    transform-origin: 19vw 2vh;
    box-shadow: -74vmin 0 10.018894472138273vmin currentColor;
}

.background.animated span:nth-child(13) {
    color: var(--animation-color-3);
    top: 26%;
    left: 41%;
    animation-duration: 257s;
    animation-delay: -261s;
    transform-origin: -12vw -24vh;
    box-shadow: 74vmin 0 9.328696173787964vmin currentColor;
}

.background.animated span:nth-child(14) {
    color: var(--animation-color-2);
    top: 14%;
    left: 93%;
    animation-duration: 238s;
    animation-delay: -256s;
    transform-origin: -6vw 7vh;
    box-shadow: 74vmin 0 9.746353667746476vmin currentColor;
}

.background.animated span:nth-child(15) {
    color: var(--animation-color-3);
    top: 62%;
    left: 100%;
    animation-duration: 177s;
    animation-delay: -115s;
    transform-origin: -23vw 8vh;
    box-shadow: 74vmin 0 9.946592428067492vmin currentColor;
}

.background.animated span:nth-child(16) {
    color: var(--animation-color-2);
    top: 61%;
    left: 49%;
    animation-duration: 298s;
    animation-delay: -112s;
    transform-origin: 1vw 22vh;
    box-shadow: 74vmin 0 10.073372874786124vmin currentColor;
}

.background.animated span:nth-child(17) {
    color: var(--animation-color-2);
    top: 90%;
    left: 20%;
    animation-duration: 123s;
    animation-delay: -140s;
    transform-origin: 10vw -7vh;
    box-shadow: -74vmin 0 9.502536935313735vmin currentColor;
}

.background.animated span:nth-child(18) {
    color: var(--animation-color-3);
    top: 1%;
    left: 33%;
    animation-duration: 236s;
    animation-delay: -14s;
    transform-origin: 19vw -9vh;
    box-shadow: -74vmin 0 10.055914116118686vmin currentColor;
}

.background.animated span:nth-child(19) {
    color: var(--animation-color-1);
    top: 72%;
    left: 29%;
    animation-duration: 157s;
    animation-delay: -30s;
    transform-origin: -13vw 21vh;
    box-shadow: -74vmin 0 9.584334497614341vmin currentColor;
}

.background.animated span:nth-child(20) {
    color: var(--animation-color-1);
    top: 11%;
    left: 80%;
    animation-duration: 16s;
    animation-delay: -280s;
    transform-origin: -3vw 21vh;
    box-shadow: 74vmin 0 10.146627887692084vmin currentColor;
}

/* ======================== HEADER & NAVIGATION ======================== */
header {
    background-color: var(--surface);
    color: var(--foreground);
    text-align: center;
    padding: 10px;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--width);
    box-shadow: 0 0 15px var(--shadow-primary);
    border-radius: var(--radius);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: sticky;
    top: 10px;
    z-index: 100;
    backdrop-filter: blur(10px);
    margin-bottom: 10px;
}

/* Scrolled state - top corners become square and header moves to top */
header.scrolled {
    border-radius: 0 0 var(--radius) var(--radius);
    top: 0;
    padding: 10px 10px 10px 10px;
}

nav {
    display: flex;
    justify-content: center;
}

.nameHeader {
    margin: 5px;
    margin-left: 10px;
    font-size: 1.8em;

}

.wideNavItem {
    margin: 0 15px;
    display: flex;
    align-items: center;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    color: transparent;
    background: var(--foreground);
    background-clip: text;
    background-size: 200% 100%;
    background-position-x: 0;
    background-position-y: 2em;
    transition: transform 0.3s;
}

.wideNavItem:hover {
    transform: scale(1.05);
}

/* ======================== CONTENT BOXES ======================== */
.content-box,
.profileBox,
.aboutBox,
.projectBox {
    background-color: var(--surface);
    color: var(--foreground);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    max-width: var(--width);
    box-shadow: 0 0 15px var(--shadow-primary);
    border-radius: var(--radius);
    margin-left: 10px;
    margin-right: 10px;
    transition: background-color 0.3s ease;
}

.content-box>*,
.profileBox>*,
.aboutBox>* {
    opacity: 1;
}

.aboutBox {
    margin: 10px;
}

/* ======================== PROFILE SECTION ======================== */
.profileBox {
    margin: 10px 10px;
    padding: 10px;
    justify-content: center;
    align-items: center;
}

.profilePicture {
    border-radius: 50%;
}

.profileLayout1 {
    display: flex;
    flex-direction: row;
    max-width: 550px;
    justify-content: center;
    padding: 20px 0;
}

.profileLayout2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 10px 20px;
}

.link-icons-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.link-icons {
    fill: var(--foreground);
    transition: transform 0.3s;
}

@media (prefers-color-scheme: dark) {
    .link-icons {
        filter: invert(1);
    }
}

.link-icons:hover {
    transform: scale(1.2);
}

/* ======================== ABOUT SECTION ======================== */
.aboutLayout {
    margin: 10px 20px;
    justify-content: right;
    align-items: right;
}

.date {
    align-items: right;
    margin: 0;
    padding: 0;
    color: var(--muted-text);
    font-weight: bold;
    justify-content: center;
    text-align: center;
}

/* ======================== PROJECT SECTION ======================== */
.projectBox {
    margin: 10px;
    padding: 10px;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: hidden;
}

.projectBox>* {
    opacity: 1;
}

.projectBox.clickable {
    cursor: pointer;
}

.projectBody {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    display: inline-block;
    opacity: 1;
    height: fit-content;
    transition: height 0.4s ease, opacity 0.4s ease;
}

.projectBody.visible {
    opacity: 1;
}

.projectBody.hidden {
    opacity: 0;
}

.projectIcon {
    transition: brightness 0.3s ease, transform 0.3s ease;
}

.projectBox:hover .projectIcon,
.projectBox.active .projectIcon {
    transform: translateX(5px);
    filter: brightness(1.2);
}

.projectDivider {
    display: flex;
    align-items: top;
    flex-direction: row;
    justify-content: space-between;
}

.projectText {
    padding: 0;
    margin: 0;
    max-width: calc(var(--width) - 250px);
}

.projectLabelBox {
    margin-left: 8px;
    padding: 0;
    display: flex;
    align-self: flex-start;
    flex-wrap: wrap;
    min-width: min-content;
    gap: 5px;
}

.label {
    background-color: transparent;
    color: var(--foreground);
    box-shadow: 0 0 10px var(--shadow-secondary);
    box-sizing: border-box;
    min-height: min-content;
    justify-content: center;
    align-items: center;
    padding: 5px 9px;
    margin: 0;
    border-radius: 30px;
}

.projectLinkBox {
    display: flex;
    align-self: flex-start;
    flex-direction: column;
    padding-bottom: 8px;
}

.projectLink {
    box-sizing: border-box;
    display: flex;
    color: var(--primary);
    text-decoration: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.projectLink:hover {
    transform: translateX(4px);
    filter: brightness(1.2);
}

.external-link-icon {
    vertical-align: middle;
    margin-left: 6px;
}

/* ======================== MEDIA ELEMENTS ======================== */
.videoWrapper {
    position: relative;
    width: 75%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    padding-bottom: 56.25%;
    height: 0;
}

@supports (aspect-ratio: 16 / 9) {
    .videoWrapper {
        padding-bottom: 0;
        height: auto;
    }
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.resizable-image {
    max-width: 75%;
    max-height: 100%;
    display: block;
    margin: auto;
}

/* ======================== RESPONSIVE DESIGN ======================== */
@media screen and (max-width: 606px) {
    .projectLabelBox.unclicked {
        display: none;
    }
}

@media screen and (max-width: 490px) {
    .profileLayout1 {
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
    }

    .profileLayout2 {
        align-items: center;
        text-align: center;
        margin: 0 20px;
    }
}

/* ======================== UTILITY CLASSES ======================== */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.centered {
    height: 100%;
    text-align: center;
}

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

.centered p {
    font-size: 1.5rem;
    margin: 0;
}