:root {
    --light-purple: rgb(245, 240, 255);
    --main-purple: #6214E3;

    --clr-primary: var(--light-purple);
    --clr-accent: var(--main-purple);

    --link-inactive: rgb(0 0 0/0.3);
    --link: rgb(0 0 0);

    --spacing-5: 5rem;
    --spacing-4: 3rem;
    --spacing-3: 2rem;
    --spacing-2: 1.5rem;
    --spacing-1: .75rem;
    --spacing-0: .25rem;

    --font-sans: ibm-plex-sans, sans-serif;
    --font-serif: p22-mackinac-pro, serif;

    --fs-nav: clamp(1.2em, 3vw, 1.4em);

    --text-width: min(45em, calc(100vw - 2*var(--spacing-2)));
    --wide-width: min(64em, calc(100vw - 2*var(--spacing-2)));
}

body {
    background-color: var(--clr-primary);
}

img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

h1 {
    font-family: var(--font-serif), serif;
    font-size: clamp(3em, 8vw, 4em);
    font-weight: 400;
}

a {
    color: currentColor;
}

/* color Theme */

.dark {
    --clr-primary: #0D314D;
    --clr-accent: var(--light-purple);
    --link: white;
    color: white;
}

.atd {
    --clr-primary: #0D314D;
}

.ubi {
    --clr-primary: #8D2707;
}

.it-h {
    --clr-primary: #1C0E05;
}

.far-away {
    --clr-primary: #18782E;
}

.you-are-not-invited {
    --clr-primary: #025290;
}

.am-i-an-invasive-species {
    --clr-primary: #42550C;
}

.the-cherry-orchard {
    --clr-primary: #CC0404;
}

.folds-of-flower {
    --clr-primary: #020A38;
}

.ma-go {
    --clr-primary: #1A1A1A;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Nav */

nav,
footer {
    display: flex;
    flex-direction: column;
}

nav hr,
footer hr {
    margin-block-end: 0;
    width: 100%;
}

nav {
    margin-block-start: var(--spacing-2);
}

nav a,
footer a {
    text-decoration: none;
}

footer {
    margin-block-end: var(--spacing-3);
}

.navbar_title {
    font-family: var(--font-serif), serif;
    font-weight: 600;
    font-size: clamp(4em, 13vw, 7em);
    color: var(--clr-accent);
    margin: var(--spacing-2) auto;
    user-select: none;
}

.navbar_title a:visited {
    color: var(--clr-accent);
}

.navbar_nav {
    list-style: none;
    padding: 0;
    z-index: 99;

    font-family: var(--font-sans), sans-serif;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-3);

    margin: 0 auto 1.5em;
}

.navbar_nav-item {
    text-transform: uppercase;
    font-size: var(--fs-nav);
}

.navbar_nav-item a {
    color: var(--link);
}

.active {
    color: var(--link-inactive);
    user-select: none;
}

a:hover,
a:focus {
    color: var(--clr-accent);
}

.find_me {
    margin-inline-end: 2em;
}

/* Footer & Nav Min */
.footer_min,
.nav_min {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;

    width: min(var(--text-width), 100%);
    margin: auto;
}

.nav_min {
    margin-block: var(--spacing-1);
}

.footer_min {
    padding-block-end: var(--spacing-4);
}

.footer_min .navbar_title,
.nav_min .navbar_title {
    font-size: calc(1.2*var(--fs-nav));
    margin-inline: 0;
}

.nav_min .navbar_nav,
.footer_min .navbar_nav {
    margin: auto 0;
}

.footer_min .find_me {
    margin-inline-end: auto;
}

/* Main */

main {
    padding-inline: var(--spacing-2);
}

.main-wrapper>* {
    max-width: var(--text-width);
    margin-inline: auto;
}

.body-text {
    font-family: var(--font-serif), serif;
    font-size: clamp(1.4em, 3vw, 1.6em);
    text-align: justify;
}

/* About */

.hero {
    height: 28rem;
    background-color: #D9C8FF;
    border-radius: var(--spacing-2);
}

.hero_img {
    display: block;
    height: calc(100% - var(--spacing-2));
    object-fit: cover;
    padding-top: var(--spacing-2);
    margin: auto;
}

.about_questions {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: var(--spacing-1);
    row-gap: var(--spacing-2);
}

.about_questions .body-text {
    margin: 0;
}

.about_questions .emoji {
    text-align: center;
}

/* Currently Working */

.current-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-block-end: var(--spacing-4);
}

.links-list,
.current-list {
    list-style: none;
    padding-inline: 0;
}

.links-list {
    display: flex;
    justify-content: center;
    gap: var(--spacing-5);
    flex-wrap: wrap;
}

.links-list__list-item.inside {
    margin-inline: revert;
}

.links-list__list-item-link {
    text-decoration: none;
}

.current-list {
    display: flex;
    gap: var(--spacing-2);
    justify-content: center;
    flex-wrap: wrap;
}

.current-list__item {
    --distance: var(--spacing-3);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--spacing-1);

    border: 1px solid var(--main-purple);
    width: 26rem;
    max-width: calc(100vw - var(--spacing-1) / 2);
    aspect-ratio: 1;

    border-radius: 100%;
}

@media screen and (min-width: 1004px) {
    .current-list> :nth-child(odd):not(:has(+*)) {
        margin-top: calc(-2 * var(--spacing-2));
    }
}

.current-list__label {
    font-family: var(--font-serif);
    color: var(--main-purple);
    font-size: clamp(1rem, 5vw + 0.25rem, 2rem);
    padding: 0;
    margin: 0;
    width: fit-content;
}

.current-list__label a:hover {
    color: black;
}

.k-text,
.stars {
    pointer-events: none;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}

.k-text {
    height: clamp(31px, 12.5vw, 62px);
    width: auto;
}

.stars {
    height: clamp(22px, 8.875vw, 44px);
    width: auto;
}

/* CV */

.cv__category-title {
    width: 100%;
    text-align: start !important;
    padding-top: 0.2em;
}

.cv__grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    row-gap: var(--spacing-2);
    column-gap: var(--spacing-3);
}

/* Home */

.home-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-logo-wrapper {
    position: relative;
    width: min(35em, calc(100vw - 2 * var(--spacing-2)));
    margin: 0 auto 2em;
    overflow: hidden;
    pointer-events: none;
}

.overlay {
    position: absolute;
    inset: 0;
    mix-blend-mode: lighten;
    pointer-events: none;
    user-select: none;
}

/* Projects */

.project-list {
    margin: 0;
}

.project_link,
.project_link:visited,
.next-project_link,
.next-project_link:visited {
    color: var(--link);
}

.project_link:hover .project_title,
.project_link:hover .project_data,
.next-project_link:hover .project_title,
.next-project_link:hover .project_data {
    color: var(--clr-accent);
}


.project_link {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2);

    text-decoration: none;
}

.project_title {
    margin: 0;
    max-width: min(65vw, 15ch);
    font-family: var(--font-serif), serif;
    font-size: clamp(3em, 8vw, 4em);
    font-weight: 400;
}

.project_data {
    font-family: var(--font-sans), sans-serif;
    font-size: 1.2em;
    text-align: end;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-0);
}

.project_data>* {
    margin: 0;
    max-width: 18ch;
}

.project_name {
    font-weight: 600;
    text-transform: uppercase;
}

.project_role,
.project_date {
    font-weight: 300;
}

/* Project Hover */

.project:hover .hover-img {
    display: block;

    border-radius: var(--spacing-0);
}

.hover-wrapper {
    inset: 0;
    position: absolute;
    overflow: hidden;
}

.hover-img {
    top: 0;
    left: 0;
    translate: -50% -50%;
    display: none;
    height: 11em;
    position: absolute;
    transform-origin: center center;
    z-index: -1;
}

/* Inside Project */
/* Inside Project Title */
.title,
.subtitle {
    text-align: center;
}

.title {
    width: 100%;
    margin: auto;
}

.subtitle {
    font-family: var(--font-sans), sans-serif;
    font-size: 1.5em;
    font-weight: 300;
    margin-top: 0;
}

.title_img-wrapper,
.content_img-wrapper {
    border-radius: var(--spacing-2);
    overflow: hidden;
}

/* Inside Project Content */
.project_content {
    line-height: 1.5;
    font-weight: 200;
}

.project_content>p+* {
    text-indent: 2em;
}

.inside {
    margin-inline: auto;
    text-align: center;
    font-family: var(--font-sans), sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.5em;
    text-transform: uppercase;
}

/* Inside Project Carousel */
.project_carousel {
    display: flex;
    gap: var(--spacing-2);

    max-width: none;
    overflow-y: hidden;

    padding: 0;
    margin-block: var(--spacing-4);
}

.project_carousel::-webkit-scrollbar {
    display: none;
}

.project_carousel-img-wrapper {
    flex-shrink: 0;
    /* max-width: var(--text-width); */

    height: clamp(13em, 45vw, 30em);
}

.project_carousel-img-wrapper img {
    pointer-events: none
}

/* Inside Project Credits */
.project_credits {
    display: grid;
    gap: var(--spacing-3);
}

.project_credits-3 {
    grid-template-columns: repeat(3, 1fr);
}

.project_credits-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Project Credits Item */
.project_credits-item {
    margin-block-end: var(--spacing-2);
}

.project_credits-item>* {
    text-align: center;
    margin-block: var(--spacing-1);
}

.project_credits-title {
    font-family: var(--font-sans);
    font-weight: 200;
}

.project_credits-name {
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.4;
}

.project_credits-image-link {
    margin-inline: auto;
    display: block;
    width: fit-content;
}

.project_credits-image {
    height: 4rem;
    width: auto;
}

/* Next Project */
.next-project {
    width: var(--wide-width);
    margin: var(--spacing-5) auto var(--spacing-4);
}

.next-project * {
    text-align: center;
}

.next-project_link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-0);
    padding-inline: var(--spacing-2);
    padding-block: var(--spacing-0);
    border-radius: 1em;

    text-decoration: none;
}

.next-project_link:hover {
    background-color: rgb(245 240 255/0.15);
    color: var(--clr-accent);
}

.next-project_title {
    font-family: var(--font-serif), serif;
    font-size: clamp(3em, 8vw, 4em);
    font-weight: 400;

    margin: 0;
}

.next-project_name {
    text-align: center;
    font-family: var(--font-sans), sans-serif;
    font-size: 1.5em;
}

.next-project_name .project_date {
    font-style: italic;
}

/* Utility */

.text-align-center {
    text-align: center;
}

.p-block-3 {
    padding-block: var(--spacing-3);
}

.p-block-end-3 {
    padding-block-end: var(--spacing-3);
}

.pad-inline {
    padding-inline: var(--spacing-2);
}

.margin-inline {
    margin-inline: var(--spacing-2);
}

.wide-width {
    max-width: var(--wide-width);
}

.unstyle-list {
    list-style: none;
    padding-inline: 0;
}

/* Media Queries */
@media (max-width: 680px) {
    .hover-img {
        height: 8em;
    }

    .project_link {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--spacing-2);
        padding-inline: 0;
    }

    .project_title {
        max-width: none;
    }

    .project_data {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
    }

    .project_data .project_name {
        text-align: start;
    }

    .project_role {
        text-align: start;
    }

    .footer_min {
        justify-content: center;
    }

    .find_me {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .cv__grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .cv__category-title:not(:first-of-type) {
        padding-block-start: var(--spacing-2);
    }
}