:root {
    --color-primary: #D4E2D4;
    --color-shadow-primary: #1f221f;
    --color-secondary: #FFCACC;
    --color-shadow-secondary: #6b4646;
    --color-tertiary-dark: #512D6D;
    --color-tertiary-light: #DBC4F0;
    --color-background: #FAF3F0;
    --color-extra: white;
}

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


body {
    font-family: "Forum", serif;
    background-color: var(--color-background);
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='50' patternTransform='scale(2) rotate(60)'><rect x='0' y='0' width='100%' height='100%' fill='%23faf3f0ff'/><path d='M25 2.48s-.14.16-.32.44c-.2.28-.42.7-.62 1.18a9 9 0 00-.5 1.65c-.06.36-.12.72-.14 1.1a2.88 2.88 0 00-4.12 3.16 3.6 3.6 0 012.14-.7c.18 0 .34.02.52.04 1.26.16 2.36.88 3.04 1.9a4.32 4.32 0 013.04-1.9c.18-.02.34-.04.52-.04.8 0 1.54.26 2.14.7a2.88 2.88 0 00-4.12-3.16c-.02-.38-.08-.74-.14-1.1a9 9 0 00-.5-1.65c-.2-.48-.42-.9-.62-1.18-.18-.28-.32-.44-.32-.44zm-9 6.59a2.88 2.88 0 00-2.73 1.98 9.2 9.2 0 00-3.66-1.88 6.46 6.46 0 00-.54-.08s0 .22.08.54a8.74 8.74 0 001.88 3.65 2.9 2.9 0 00-1.14 4.78c.16.14.32.28.48.38a3.7 3.7 0 011.42-2.34 4.29 4.29 0 013.5-.82 4.2 4.2 0 011.14-3.87c.56-.58 1.26-.9 2-1.02A2.88 2.88 0 0016 9.07zm18 0a2.88 2.88 0 00-2.43 1.32 3.51 3.51 0 012.34 1.42 4.2 4.2 0 01.8 3.47 4.29 4.29 0 013.9 1.16c.56.56.9 1.28 1.02 2a2.9 2.9 0 00-.66-5.15 9.17 9.17 0 001.88-3.66c.08-.32.08-.54.08-.54s-.22.02-.54.08a8 8 0 00-2.78 1.22c-.3.2-.6.42-.88.66a2.88 2.88 0 00-2.74-1.98zM9.4 19.24a2.88 2.88 0 00-2.56 4.17 9 9 0 00-2.76.64 8.79 8.79 0 00-1.61.94l.01.01-.01.01s.16.14.44.32.68.4 1.18.62a9 9 0 002.75.64 2.88 2.88 0 003.16 4.12 3.6 3.6 0 01-.66-2.66 4.32 4.32 0 011.9-3.04l-.01-.01.01-.01a4.32 4.32 0 01-1.94-3.56c0-.8.26-1.53.7-2.13-.18-.04-.4-.06-.6-.06zm31.18 0c-.2 0-.42.02-.6.06a3.6 3.6 0 01.66 2.65 4.32 4.32 0 01-1.9 3.04l.01.01-.01.01a4.32 4.32 0 011.94 3.56c0 .8-.26 1.53-.7 2.13a2.88 2.88 0 003.16-4.12 9 9 0 002.76-.64c.5-.21.9-.43 1.17-.61.28-.18.44-.32.44-.32l-.01-.01.01-.01s-.16-.14-.44-.32-.68-.4-1.18-.62a9 9 0 00-2.75-.64 2.88 2.88 0 00-2.56-4.18zM10.37 31.56a2.9 2.9 0 00.66 5.15 9.17 9.17 0 00-1.88 3.66c-.08.32-.08.54-.08.54s.22-.02.54-.08a8 8 0 002.78-1.22c.3-.2.6-.42.88-.66a2.88 2.88 0 005.16.66 3.51 3.51 0 01-2.34-1.42 4.2 4.2 0 01-.8-3.47 4.29 4.29 0 01-3.9-1.16 3.7 3.7 0 01-1.02-2zm29.26 0a3.7 3.7 0 01-1.42 2.34 4.29 4.29 0 01-3.5.82 4.2 4.2 0 01-1.14 3.87c-.56.58-1.26.9-2 1.02a2.88 2.88 0 004.46.48c.34-.32.56-.72.7-1.14a9.2 9.2 0 003.66 1.88c.32.06.54.08.54.08s0-.22-.08-.54a8.74 8.74 0 00-1.88-3.65 2.9 2.9 0 001.14-4.78c-.16-.14-.32-.28-.48-.38zM25 38.76a4.32 4.32 0 01-3.04 1.89c-.18.02-.34.04-.52.04a3.6 3.6 0 01-2.14-.7 2.88 2.88 0 004.12 3.16c.02.38.08.74.14 1.1a9 9 0 00.5 1.65c.2.48.42.9.62 1.18.18.28.32.44.32.44s.14-.16.32-.44c.2-.28.42-.7.62-1.18a9 9 0 00.5-1.65c.06-.36.12-.72.14-1.1a2.88 2.88 0 004.12-3.16c-.6.44-1.34.7-2.14.7-.18 0-.34-.02-.52-.04a4.32 4.32 0 01-3.04-1.9z'  stroke-width='1' stroke='none' fill='%23dac2efff'/><path d='M42.39 49.24a6.09 6.09 0 001.16-4.97l-.22-1.04 1.03.22a6.1 6.1 0 004.96-1.14h.02c.2-.14.38-.3.56-.48l.1-.1v1.84a7.41 7.41 0 01-4.94 1.4c.14 1.8-.38 3.6-1.47 5.03H41.7a.95.95 0 00.2-.2l.48-.56zm-34.78 0a6.09 6.09 0 01-1.16-4.97l.22-1.04-1.03.22A6.1 6.1 0 01.68 42.3H.66c-.2-.14-.38-.3-.56-.48l-.1-.1v1.84a7.41 7.41 0 004.94 1.4c-.14 1.8.38 3.6 1.47 5.03H8.3a.95.95 0 01-.2-.2l-.48-.56zm0-48.48a6.09 6.09 0 00-1.16 4.97l.22 1.04-1.03-.22A6.1 6.1 0 00.68 7.7H.66c-.2.14-.38.3-.56.48l-.1.1V6.43a7.41 7.41 0 014.94-1.4C4.8 3.23 5.32 1.43 6.4 0H8.3a.95.95 0 00-.2.2l-.48.56zm14.5 17.26s-.07.18-.13.48a6.29 6.29 0 00.08 2.71c.08.38.18.74.32 1.12a8.6 8.6 0 00-2.66-.44 8 8 0 00-1.18.12c-.3.06-.47.12-.47.12s.08.18.26.42a7.62 7.62 0 002.98 2.42l-.06.03.05.03a8.33 8.33 0 00-2.21 1.52c-.34.32-.6.66-.76.9-.18.24-.26.42-.26.42s.18.06.47.12c.3.06.7.1 1.18.12.46 0 1-.04 1.54-.14.36-.06.74-.18 1.12-.3a7.84 7.84 0 00-.4 3.83c.06.3.12.48.12.48s.18-.08.42-.26a6.7 6.7 0 001.9-1.96c.22-.3.4-.63.58-1 .18.37.36.7.58 1a6.7 6.7 0 002.32 2.22s.06-.18.12-.48a6.29 6.29 0 00-.08-2.71 7.83 7.83 0 00-.32-1.12 8.6 8.6 0 002.66.44 8 8 0 001.18-.12c.3-.06.47-.12.47-.12s-.08-.18-.26-.42a7.62 7.62 0 00-2.98-2.42l.06-.03-.05-.03a8.33 8.33 0 002.21-1.52c.34-.32.6-.66.76-.9.18-.24.26-.42.26-.42s-.18-.06-.47-.12c-.3-.06-.7-.1-1.18-.12-.46 0-1 .04-1.54.14-.36.06-.74.18-1.12.3a7.84 7.84 0 00.4-3.83c-.06-.3-.12-.48-.12-.48s-.18.08-.42.26a6.7 6.7 0 00-1.9 1.96c-.22.3-.4.63-.58 1-.18-.37-.36-.7-.58-1a6.7 6.7 0 00-2.32-2.22zM42.38.76a6.09 6.09 0 011.16 4.97l-.22 1.04 1.03-.22a6.1 6.1 0 014.96 1.14h.02c.2.14.38.3.56.48l.1.1V6.43a7.41 7.41 0 00-4.94-1.4c.14-1.8-.38-3.6-1.47-5.03H41.7c.08.06.14.12.2.2l.48.56z'  stroke-width='1' stroke='none' fill='%23ffccceff'/><path d='M28.58 38.7c-1.5 0-2.8-.77-3.58-1.94v-3.02c.38 0 .7.32.7.7a2.86 2.86 0 002.88 2.86c1.18 0 2.15-.96 2.15-2.16 0-.88-.71-1.58-1.57-1.58a.7.7 0 01-.7-.7c0-.38.32-.7.7-.7a2.98 2.98 0 012.97 2.98c0 1.96-1.6 3.55-3.55 3.55zm6.57-6.56a2.98 2.98 0 01-2.98-2.98c0-.38.32-.7.7-.7.38 0 .7.32.7.7 0 .88.72 1.58 1.58 1.58 1.18 0 2.16-.96 2.16-2.15a2.87 2.87 0 00-2.86-2.88.7.7 0 01-.7-.7V25h3.03l-.01.01a4.28 4.28 0 011.94 3.58c0 1.95-1.6 3.55-3.56 3.55zM21.42 38.7c1.5 0 2.8-.76 3.58-1.93v-3.02a.7.7 0 00-.7.7 2.86 2.86 0 01-2.88 2.86 2.16 2.16 0 01-2.15-2.16c0-.88.71-1.58 1.57-1.58a.7.7 0 00.7-.7.7.7 0 00-.7-.7 2.98 2.98 0 00-2.97 2.98c0 1.96 1.6 3.55 3.55 3.55zm-6.57-6.55a2.98 2.98 0 002.98-2.98.7.7 0 00-.7-.7.7.7 0 00-.7.7c0 .88-.72 1.58-1.58 1.58a2.16 2.16 0 01-2.16-2.15 2.87 2.87 0 012.86-2.88.7.7 0 00.7-.7V25h-3.03l.01.01a4.28 4.28 0 00-1.94 3.58c0 1.95 1.6 3.55 3.56 3.55zm6.57-20.83c1.5 0 2.8.76 3.58 1.93v3.02a.7.7 0 01-.7-.7 2.86 2.86 0 00-2.88-2.86c-1.18 0-2.15.96-2.15 2.16 0 .88.71 1.58 1.57 1.58.38 0 .7.32.7.7a.7.7 0 01-.7.7 2.98 2.98 0 01-2.97-2.98c0-1.96 1.6-3.55 3.55-3.55zm-6.57 6.55a2.98 2.98 0 012.98 2.98.7.7 0 01-.7.7.7.7 0 01-.7-.7c0-.88-.72-1.58-1.58-1.58-1.18 0-2.16.96-2.16 2.15a2.87 2.87 0 002.86 2.88c.38 0 .7.32.7.7V25h-3.03l.01-.01a4.28 4.28 0 01-1.94-3.58c0-1.95 1.6-3.55 3.56-3.55zm13.73-6.55c-1.5 0-2.8.76-3.58 1.93v3.02a.7.7 0 00.7-.7 2.86 2.86 0 012.88-2.86c1.18 0 2.15.96 2.15 2.16 0 .88-.71 1.58-1.57 1.58a.7.7 0 00-.7.7c0 .38.32.7.7.7a2.98 2.98 0 002.97-2.98c0-1.96-1.6-3.55-3.55-3.55zm6.57 6.55a2.98 2.98 0 00-2.98 2.98c0 .38.32.7.7.7a.7.7 0 00.7-.7c0-.88.72-1.58 1.58-1.58 1.18 0 2.16.96 2.16 2.15a2.87 2.87 0 01-2.86 2.88.7.7 0 00-.7.7V25h3.03l-.01-.01a4.28 4.28 0 001.94-3.58c0-1.95-1.6-3.55-3.56-3.55z'  stroke-width='1' stroke='none' fill='%23d5e2d5ff'/><path d='M25 23.5c-.83 0-1.5.66-1.5 1.5a1.5 1.5 0 103 0c0-.84-.67-1.5-1.5-1.5z'  stroke-width='1' stroke='none' fill='%23dac2efff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,-12)' fill='url(%23a)' opacity='.4'/></svg>");
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    color: var(--color-tertiary-dark);
    margin: 0;
}

.parent-header {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    margin: 1rem;
    margin-top: 2rem;
    padding-bottom: 1em;
    border-bottom: solid var(--color-tertiary-dark);
}

.logo {
    margin: 0;
    font-family: "Montserrat Alternates", serif;
}

.logo:hover {
    cursor: pointer;
    font-weight: bolder;
}

.left-header {
    margin-left: 1rem;
}

.links {
    text-align: end;
    display: flex;
    justify-content: space-around;

}

.links a:hover {
    color: var(--color-tertiary-light);
    font-weight: bolder;
    font-style: italic;
}

a {
    text-decoration: none;
    color: var(--color-tertiary-dark);
}

.container {
    width: 70vw;
    height: 86vh;
    background-color: var(--color-primary);
    box-shadow: -0em 4em 3em -3em var(--color-shadow-primary);
    display: flex;
    flex-direction: column;
}

.right {
    height: auto;
    width: 70%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 1.4rem;
    border: dotted 1.4px var(--color-tertiary-light);
}

.hidden {
    display: none;
}

.visible {
    display: flex;
}

.project-list {
    height: 0;
    opacity: 0;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.4s ease;
    /* controls speed */
}

.project-list.visible {
    height: auto;
    /* adjusted with JS */
    opacity: 1;
}

.project-list.animating {
    overflow: hidden;
}

.categories {
    display: flex;
    gap: 6px;
    text-align: left;
    padding: .4rem;
    margin: .4rem;
}

.categories.active {
    font-weight: 900;
    box-shadow: 2px 2px 20px var(--color-tertiary-light);
    background-color: #faf3f06a;
}

.categories:hover {
    cursor: pointer;
    transform: scale(1.2);
    font-weight: 900;
    box-shadow: 2px 2px 20px var(--color-tertiary-light);
    background-color: #faf3f06a;
    transition: transform 0.25s ease-in-out;
}

.public {
    background-color: var(--color-secondary);
    box-shadow: -0em 4em 3em -3em var(--color-shadow-secondary);
}

h4 {
    margin-bottom: .8em;
}

img {
    filter: grayscale(60%);
    width: 180px;
    height: 180px;
    object-fit: cover;

}

.icon-homepage {
    height: 20px;
    width: 20px;
}

.title {
    margin: 1rem 0 0 0;
    text-align: center;
    height: 24vh;
}

h1 {
    font-family: "Montserrat Alternates", serif;
    font-weight: 600;
    margin-bottom: 0;
    font-size: 3rem;
    color: var(--color-tertiary-light);
    -webkit-text-stroke: 2px var(--color-tertiary-dark);
}

.holo-title {
    background:
        linear-gradient(110deg,
            #FFCACC 0%,
            #FAF3F0 10%,
            rgb(216, 219, 174) 20%,
            #D4E2D4 30%,
            rgb(175, 244, 243) 40%,
            rgb(166, 195, 229) 50%,
            rgb(167, 129, 243) 60%,
            #DBC4F0 70%,
            rgb(223, 171, 242) 80%,
            rgb(252, 183, 243) 90%,
            #FFCACC 100%);

    background-size: 200% 200%;
    background-blend-mode: overlay;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: colorShift 14s linear infinite;
    mix-blend-mode: lighten;
}

@keyframes colorShift {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: -200% 0;
    }

    100% {
        background-position: -200% 0%;
    }
}

.hidden-br {
    display: none;
}

.title {
    perspective: 1000px;
}

.title span {
    cursor: pointer;
    margin-left: .6rem;
    display: inline-block;
    user-select: none;
    line-height: .8;
}

.title span:nth-child(1).active {
    animation: balance 1.5s ease-out;
    transform-origin: bottom left;
}

@keyframes balance {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30%,
    60% {
        transform: rotate(-45deg);
    }
}

.title span:nth-child(3).active {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
}

@keyframes shrinkjump {

    10%,
    35% {
        transform: scale(2, .2) translate(0, 0);
    }

    45%,
    50% {
        transform: scale(1) translate(0, -150px);
    }

    80% {
        transform: scale(1) translate(0, 0);
    }
}

.title span:nth-child(5).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
}

@keyframes falling {
    12% {
        transform: rotateX(240deg);
    }

    24% {
        transform: rotateX(150deg);
    }

    36% {
        transform: rotateX(200deg);
    }

    48% {
        transform: rotateX(175deg);
    }

    60%,
    85% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

h2 {
    font-weight: 300;
    margin-top: 0;
}

.homepage-text {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem 3rem 1rem;
    text-align: center;
    width: 70%;
    align-self: center;

    & .left {
        height: auto;
        width: 80%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        text-align: left;
    }
}

li {
    margin: .4rem 0;
}

li:hover {
    font-weight: bolder;
}

.fa-heart-o,
.fa-star-o,
.fa-moon-o {
    font-size: 1rem !important;
    margin-right: .4rem;
}

.content {
    display: flex;
    flex-direction: column;
    margin: 2rem 3rem 5rem 3rem;
    text-align: right;
    justify-content: space-between;
    height: 50%;
}

.item {
    text-align: right;
    font-size: 1.4rem;
    display: flex;
    justify-content: end;
}

.item>a {
    text-shadow: 0px 4px 26px #32154a;
    width: max-content;
}

.item>a:hover {
    color: white;
    font-weight: bolder;
    font-style: italic;
}

.two {
    align-self: start;
    text-align: left;
}

.aboutme {
    text-align: justify;
}

h3,
h4 {
    font-weight: lighter;
    font-size: 1.2rem;
}

.hover-underline-animation {
    position: relative;
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-tertiary-light);
    transform-origin: bottom center;
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom center;
}

/* Fondo base */
.holo-background {
    position: relative;
    overflow: hidden;
}

/* --- Franja holográfica animada --- */
.holo-background::before {
    z-index: 0;
    content: "";
    position: absolute;
    top: 30%;
    left: 0%;
    width: 150%;
    height: 100%;
    background:
        /* Franja blanca central (brillo) */
        linear-gradient(180deg,
            transparent 47%,
            rgba(255, 255, 255, 0.8) 49%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.8) 51%,
            transparent 53%),
        /* Gradiente arcoíris holográfico */
        linear-gradient(rgba(255, 0, 0, 1) 0%,
            rgba(255, 154, 0, 1) 10%,
            rgba(208, 222, 33, 1) 20%,
            rgba(79, 220, 74, 1) 30%,
            rgba(63, 218, 216, 1) 40%,
            rgba(28, 127, 238, 1) 50%,
            rgb(61, 70, 244, 1) 60%,
            rgba(95, 21, 242, 1) 70%,
            rgba(186, 12, 248, 1) 80%,
            rgba(251, 7, 217, 1) 90%,
            rgba(255, 0, 0, 1) 100%);

    background-size: 100% 300%;
    background-blend-mode: screen;
    mix-blend-mode: color;
    filter: blur(100px);
    opacity: 0.4;

    animation:
        moveDiagonal 10s linear infinite,
        colorShiftDiagonal 2s linear infinite;
}


/* --- Animaciones --- */
@keyframes moveDiagonal {
    0% {
        transform: translate(-60%, -60%) rotate(-220deg);
    }

    100% {
        transform: translate(200%, 200%) rotate(-220deg);
    }
}

/* Movimiento del color arcoíris */
@keyframes colorShiftDiagonal {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 150% 150%;
    }
}


@media (min-width:1300px) {

    body {
        font-size: 1.8rem;
    }

    h1 {
        font-size: 4rem;
    }

    .container {
        width: 76vw;
        height: 70vh;
    }

    .parent-header {
        height: 6vh;
        margin-top: 3rem;
        padding-bottom: 0;
    }

    .title {
        margin-top: 5rem;
        height: 18vh;
    }
}


@media (max-width: 950px) {

    .overlay {
        /* Height & width depends on how you want to reveal the overlay (see JS) */
        height: 0;
        width: 88vw;
        position: fixed;
        z-index: 1;
        left: 6vw;
        top: 5vh;
        background-color: var(--color-tertiary-dark);
        /* fallback color */
        background-color: #32154aef;
        /* w/opacity */
        overflow-x: hidden;
        /* Disable horizontal scroll */
        transition: 0.5s;
    }

    /* Position the content inside the overlay */
    .overlay-content {
        position: relative;
        display: flex;
        flex-direction: column;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;

    }

    /* The navigation links inside the overlay */
    .overlay a {
        padding: .8rem;
        font-size: 2rem;
        color: var(--color-primary);
    }

    /* Position the close button (top right corner) */
    .overlay .closebtn {
        display: inherit !important;
        position: absolute;
        font-size: 2rem;
        top: 3vh;
        right: 3vw;
    }

    .container {
        width: 88vw;
        height: 90vh;
    }

    .body-public {
        height: 100vh;
    }

    h1 {
        font-size: 2.2rem;
    }

    .parent-header {
        display: flex;
        justify-content: space-between;
        height: auto;
    }

    .left-header {
        margin: 0;
        padding-left: .4rem;
    }

    .icon {
        font-size: 1.6rem;
        display: inherit !important;
        padding-right: .4rem;
    }

    .title {
        margin-bottom: 1rem;
    }

    h3,
    li {
        font-size: 1rem;
    }

    h2 {
        margin: 1rem 0 1.4rem 0;
    }

    .contact {
        justify-content: space-around;
        height: 80%;
        font-size: 1rem;
        margin: 1rem 3rem 5rem 3rem !important;
    }

    .content {
        margin: 1rem;
    }

    .item {
        font-size: 1rem;
    }

    .holo-background::before {
        width: 150%;
        height: 100%;
    }

}

@media (max-width:720px) {
    .title {
        letter-spacing: 3px;
        height: 26vh;
    }

    .hidden-br {
        display: inherit;
    }

    .homepage-text {
        flex-direction: column;
    }

    .right,
    .left {
        width: 100%;
    }
    h2{
        font-size: 1rem;
        margin-bottom: 0;
        word-spacing: 8px;
    }
    .left{
        gap: .8rem !important;
    }
    .right{
        padding: 1rem;
        margin-top: .8rem;
    }
    
    .title span{
        margin-left: 0;
    }

}
@media (min-width: 400px) and (max-width:1050px) and (min-height: 800px){
    .title{
        padding-top: 4rem;
        height: 30vh;
    }

    .homepage-text{
        margin-top: 2rem;
    }

    h1{
        font-size: 3rem;
    }
}

@media (min-width: 600px) and (max-width:1050px) and (min-height: 800px){


    .title{
        padding-top: 8rem;
    }

}