@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@view-transition {
    navigation: auto;
}


:root {
    --yellow: rgb(255, 205, 0);
    --yellow-background: rgba(255, 205, 0, 0.05);
    --green: rgb(0, 132, 61);
    --green-background: rgba(0, 132, 61, 0.05);
    --logo-font-size: 1.25rem;
    --logo-font-weight: 800;
    --logo-font-family: "Inter", sans-serif;
    --font-family: "Lato", sans-serif;
    /*-------------*/

    /*-------------*/
}

:where(html) {
    --gray-0: #f8f9fa;
    --gray-1: rgb(241, 243, 245);
    --gray-2: #e9ecef;
    --gray-3: #dee2e6;
    --gray-4: #ced4da;
    --gray-5: #adb5bd;
    --gray-6: #868e96;
    --gray-7: #495057;
    --gray-8: #343a40;
    --gray-9: #212529;
    --gray-10: #16191d;
    --gray-11: #0d0f12;
    --gray-12: #030507;
    --stone-0: #f8fafb;
    --stone-1: #f2f4f6;
    --stone-2: #ebedef;
    --stone-3: #e0e4e5;
    --stone-4: #d1d6d8;
    --stone-5: #b1b6b9;
    --stone-6: #979b9d;
    --stone-7: #7e8282;
    --stone-8: #666968;
    --stone-9: #50514f;
    --stone-10: #3a3a37;
    --stone-11: #252521;
    --stone-12: #121210;
    --red-0: #fff5f5;
    --red-1: #ffe3e3;
    --red-2: #ffc9c9;
    --red-3: #ffa8a8;
    --red-4: #ff8787;
    --red-5: #ff6b6b;
    --red-6: #fa5252;
    --red-7: #f03e3e;
    --red-8: #e03131;
    --red-9: #c92a2a;
    --red-10: #b02525;
    --red-11: #962020;
    --red-12: #7d1a1a;
    --pink-0: #fff0f6;
    --pink-1: #ffdeeb;
    --pink-2: #fcc2d7;
    --pink-3: #faa2c1;
    --pink-4: #f783ac;
    --pink-5: #f06595;
    --pink-6: #e64980;
    --pink-7: #d6336c;
    --pink-8: #c2255c;
    --pink-9: #a61e4d;
    --pink-10: #8c1941;
    --pink-11: #731536;
    --pink-12: #59102a;
    --purple-0: #f8f0fc;
    --purple-1: #f3d9fa;
    --purple-2: #eebefa;
    --purple-3: #e599f7;
    --purple-4: #da77f2;
    --purple-5: #cc5de8;
    --purple-6: #be4bdb;
    --purple-7: #ae3ec9;
    --purple-8: #9c36b5;
    --purple-9: #862e9c;
    --purple-10: #702682;
    --purple-11: #5a1e69;
    --purple-12: #44174f;
    --violet-0: #f3f0ff;
    --violet-1: #e5dbff;
    --violet-2: #d0bfff;
    --violet-3: #b197fc;
    --violet-4: #9775fa;
    --violet-5: #845ef7;
    --violet-6: #7950f2;
    --violet-7: #7048e8;
    --violet-8: #6741d9;
    --violet-9: #5f3dc4;
    --violet-10: #5235ab;
    --violet-11: #462d91;
    --violet-12: #3a2578;
    --indigo-0: #edf2ff;
    --indigo-1: #dbe4ff;
    --indigo-2: #bac8ff;
    --indigo-3: #91a7ff;
    --indigo-4: #748ffc;
    --indigo-5: #5c7cfa;
    --indigo-6: #4c6ef5;
    --indigo-7: #4263eb;
    --indigo-8: #3b5bdb;
    --indigo-9: #364fc7;
    --indigo-10: #2f44ad;
    --indigo-11: #283a94;
    --indigo-12: #21307a;
    --blue-0: #e7f5ff;
    --blue-1: #d0ebff;
    --blue-2: #a5d8ff;
    --blue-3: #74c0fc;
    --blue-4: #4dabf7;
    --blue-5: #339af0;
    --blue-6: #228be6;
    --blue-7: #1c7ed6;
    --blue-8: #1971c2;
    --blue-9: #1864ab;
    --blue-10: #145591;
    --blue-11: #114678;
    --blue-12: #0d375e;
    --cyan-0: #e3fafc;
    --cyan-1: #c5f6fa;
    --cyan-2: #99e9f2;
    --cyan-3: #66d9e8;
    --cyan-4: #3bc9db;
    --cyan-5: #22b8cf;
    --cyan-6: #15aabf;
    --cyan-7: #1098ad;
    --cyan-8: #0c8599;
    --cyan-9: #0b7285;
    --cyan-10: #095c6b;
    --cyan-11: #074652;
    --cyan-12: #053038;
    --teal-0: #e6fcf5;
    --teal-1: #c3fae8;
    --teal-2: #96f2d7;
    --teal-3: #63e6be;
    --teal-4: #38d9a9;
    --teal-5: #20c997;
    --teal-6: #12b886;
    --teal-7: #0ca678;
    --teal-8: #099268;
    --teal-9: #087f5b;
    --teal-10: #066649;
    --teal-11: #054d37;
    --teal-12: #033325;
    --green-0: #ebfbee;
    --green-1: #d3f9d8;
    --green-2: #b2f2bb;
    --green-3: #8ce99a;
    --green-4: #69db7c;
    --green-5: #51cf66;
    --green-6: #40c057;
    --green-7: #37b24d;
    --green-8: #2f9e44;
    --green-9: #2b8a3e;
    --green-10: #237032;
    --green-11: #1b5727;
    --green-12: #133d1b;
    --lime-0: #f4fce3;
    --lime-1: #e9fac8;
    --lime-2: #d8f5a2;
    --lime-3: #c0eb75;
    --lime-4: #a9e34b;
    --lime-5: #94d82d;
    --lime-6: #82c91e;
    --lime-7: #74b816;
    --lime-8: #66a80f;
    --lime-9: #5c940d;
    --lime-10: #4c7a0b;
    --lime-11: #3c6109;
    --lime-12: #2c4706;
    --yellow-0: #fff9db;
    --yellow-1: #fff3bf;
    --yellow-2: #ffec99;
    --yellow-3: #ffe066;
    --yellow-4: #ffd43b;
    --yellow-5: #fcc419;
    --yellow-6: #fab005;
    --yellow-7: #f59f00;
    --yellow-8: #f08c00;
    --yellow-9: #e67700;
    --yellow-10: #b35c00;
    --yellow-11: #804200;
    --yellow-12: #663500;
    --orange-0: #fff4e6;
    --orange-1: #ffe8cc;
    --orange-2: #ffd8a8;
    --orange-3: #ffc078;
    --orange-4: #ffa94d;
    --orange-5: #ff922b;
    --orange-6: #fd7e14;
    --orange-7: #f76707;
    --orange-8: #e8590c;
    --orange-9: #d9480f;
    --orange-10: #bf400d;
    --orange-11: #99330b;
    --orange-12: #802b09;
    --choco-0: #fff8dc;
    --choco-1: #fce1bc;
    --choco-2: #f7ca9e;
    --choco-3: #f1b280;
    --choco-4: #e99b62;
    --choco-5: #df8545;
    --choco-6: #d46e25;
    --choco-7: #bd5f1b;
    --choco-8: #a45117;
    --choco-9: #8a4513;
    --choco-10: #703a13;
    --choco-11: #572f12;
    --choco-12: #3d210d;
    --brown-0: #faf4eb;
    --brown-1: #ede0d1;
    --brown-2: #e0cab7;
    --brown-3: #d3b79e;
    --brown-4: #c5a285;
    --brown-5: #b78f6d;
    --brown-6: #a87c56;
    --brown-7: #956b47;
    --brown-8: #825b3a;
    --brown-9: #6f4b2d;
    --brown-10: #5e3a21;
    --brown-11: #4e2b15;
    --brown-12: #422412;
    --sand-0: #f8fafb;
    --sand-1: #e6e4dc;
    --sand-2: #d5cfbd;
    --sand-3: #c2b9a0;
    --sand-4: #aea58c;
    --sand-5: #9a9178;
    --sand-6: #867c65;
    --sand-7: #736a53;
    --sand-8: #5f5746;
    --sand-9: #4b4639;
    --sand-10: #38352d;
    --sand-11: #252521;
    --sand-12: #121210;
    --camo-0: #f9fbe7;
    --camo-1: #e8ed9c;
    --camo-2: #d2df4e;
    --camo-3: #c2ce34;
    --camo-4: #b5bb2e;
    --camo-5: #a7a827;
    --camo-6: #999621;
    --camo-7: #8c851c;
    --camo-8: #7e7416;
    --camo-9: #6d6414;
    --camo-10: #5d5411;
    --camo-11: #4d460e;
    --camo-12: #36300a;
    --jungle-0: #ecfeb0;
    --jungle-1: #def39a;
    --jungle-2: #d0e884;
    --jungle-3: #c2dd6e;
    --jungle-4: #b5d15b;
    --jungle-5: #a8c648;
    --jungle-6: #9bbb36;
    --jungle-7: #8fb024;
    --jungle-8: #84a513;
    --jungle-9: #7a9908;
    --jungle-10: #658006;
    --jungle-11: #516605;
    --jungle-12: #3d4d04;
}

.logo {
    font-family: var(--logo-font-family);
}

html {
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    font-family: var(--font-family);
}

html:not([data-theme]) {
    color-scheme: dark light;
    background: rgb(245, 245, 245);
    color: black;

}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

:where(a) {
    text-decoration: none;
}

:where(figure) {
    margin-inline: 0;
}

:where(html) {
    & a {
        color: var(--a-href-color);
    }

    & .logo a:hover,
    & a:hover {
        color: var(--hover);
    }

    & .card {
        border: var(--border-card);
    }

    .theme-btn:hover {
        color: var(--active-color);
    }
}

:where(video) {
    width: 100%;
    height: auto;
    max-width: 60rem;
    /* margin-inline: auto; */
    display: block;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(20px);
}

:where(html[data-theme="light"]) {
    --border-card: 1px solid rgb(230, 230, 230);
    --active-color: var(--green);
    color-scheme: light;
    --main-color: var(--gray-10);
    --hover-background: var(--green-background);
    --active: var(--green);
    --hover: var(--green);
    --a-href-color: black;
    --color-time-light: rgb(90, 90, 90);

    --angle: 45deg;
    --logo-gradient: linear-gradient(var(--angle), oklab(66.83% -0.0022 0.01135), oklab(55.3% -0.013 0.068), oklab(41.6% -0.01 0.046));
    --logo-gradient-hover: linear-gradient(45deg, oklab(87.6% -0.015 0.179), oklab(84% 0.006 0.172), oklab(80.2% 0.026 0.164), oklab(76.5% 0.045 0.156), oklab(72.9% 0.065 0.148));



}

:where(html[data-theme="dark"]) {

    --angle: 45deg;
    /* gold */
    --logo-gradient: linear-gradient(45deg, oklab(87.6% -0.015 0.179), oklab(84% 0.006 0.172), oklab(80.2% 0.026 0.164), oklab(76.5% 0.045 0.156), oklab(72.9% 0.065 0.148));

    --logo-gradient-hover: linear-gradient(45deg, hwb(50 0% 1%), oklab(90.834% -0.00722 0.07963));

    --active-color: var(--yellow);
    color-scheme: dark;
   --main-color: var(--gray-2);
    --hover-background: var(--yellow-background);
    --active: var(--yellow);
    --hover: var(--yellow);
    --border-card: 1px solid rgb(78, 78, 78);
    --a-href-color: white;
    --color-time-light: rgb(250, 250, 250);
}

body {
    color: var(--main-color);
    padding: 0;
    width: 80vw;
    margin: 0 auto;
    max-width: 60rem;



}

nav ul {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    align-items: center;
}

nav ul li:first-child {
    margin-right: auto;
}



body * {
    box-sizing: border-box;
}

.active {
    text-decoration: underline;
    color: var(--active, black);
}

main:has(.card) {
    margin-block: 1.25rem;
    padding-block: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}



.card {
    padding: 0.75rem;
    border-radius: 0.5rem;

    & img {
        width: 100%;
        height: auto;
    }

    & h2 {
        font-size: 1.5rem;
        font-weight: 400;
    }

    &:hover {
        /* border-color: var(--hover); */
        background: var(--hover-background);
    }

    img {
        border-radius: 0.375rem;
    }

    h2 a {
        color: var(--main-color);
    }

    h2 a:hover {
        color: var(--hover);
    }

}

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

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

time {
    font-size: 0.75rem;
    margin-top: 0.5rem;
    color: var(--color-time-light);
}

.section {
    & img {
        width: 100%;
        height: auto;
    }
}

.theme-btn {
    width: max-content;
    background: none;
    border: none;
    height: 1.5rem;
    cursor: pointer;
    font-size: 1.5rem;
    display: block;
    align-content: center;
}

footer {
    margin-block: 2rem;

    & ul {
        display: flex;
        gap: 1rem;
        padding: 1rem 0;
        justify-content: flex-start;
        font-size: 0.875rem;
    }
}

:where([data-astro-image]) {
    object-fit: var(--fit);
    object-position: var(--pos);
}

:where([data-astro-image="full-width"]) {
    width: 100%;
}

:where([data-astro-image="constrained"]) {
    max-width: 100%;
}



/* gallery */


.gallery {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 2rem;

    --image-border-radius: .375rem;
}

@media (width < 576px) {
    .gallery{
        margin-top: 3rem;
    }
    
}

img {
    width: 100%;
    object-fit: cover;
}

.aspect-ratio-3-2 img {
    aspect-ratio: 3/ 2;
}

.gallery-item {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: var(--image-border-radius);
    transition: transform 0.2s ease;
}

.gallery-item:hover {
    transform: scale(1.03);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    z-index: 9999;
}



.lightbox.hidden {
    display: none;
}

.lightbox img {
    max-width: 94%;
    max-height: 94%;
    border-radius: .25rem;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    color: white;
    cursor: pointer;
    user-select: none;
    padding: 0 20px;
}

.arrow.prev {
    left: 10px;
}

.arrow.next {
    right: 10px;
}



:where(.cv) {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem 3rem;

    & p,
    & h2 {
        color: hsl(0, 0%, 67%);
        font-weight: 600;
        text-align: right;
        font-size: 1rem;
    }
}

.skills>* {
    color: revert;
    text-align: revert;
    font-weight: revert;
}


.page-navigator {
	margin-block: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}
.nav-next {
	margin-inline-start: auto;
	text-align: right;
}



.nav-prev > a::before,
.nav-next > a::after {
	font-weight: 700;
	font-size: 1.5em;
}

.nav-next a::after {
    content: ' 	→';

}

.nav-prev > a::before {
	content: '← ';
}


@media (width < 576px) {

    :where(.cv) {
        grid-template-columns: auto;
        gap: 0;
        padding-inline: 1rem;

        & p,
        & h2 {
            text-align: revert;
            margin-block: 1em 0.5em;
        }

        ul {
            text-align: revert;
            margin-block: 0.5em 1.5em;
        }
    }

    .youtube-player:not(.video-container),
    :where(main) .video-card> :not(video),
    :where(main)>h1,
    :where(main)>h2,
    :where(main)>h3,
    :where(.p-x-3) {
        padding-inline: 3vw;
    }



    :root {
        --logo-font-size: 1.357rem;
    }


    .lightbox {
        padding: 0.25rem;
    }

    .gallery {
        --image-border-radius: revert;
    }

    .gallery-item:hover {
        transform: revert;

    }




    main:has(.card) {
        gap: 0;
    }


    body {
        width: 100vw;
    }

    .main-header,
    footer,
    nav {
        padding-inline: 3vw;
    }

    :where(.card a img) {
        width: 100vw;
        padding: 0;
    }

    .card {
        padding-block: 0 2rem;
        padding-inline: 0;
        border: none;
        display: flex;
        flex-direction: column;
        border-radius: 0;

        & a img {
            border-radius: 0;
        }

        > :not(a:first-child) {
            padding-inline: 3vw;
        }
    }
}