:root{

    --color-bg: #e7e6e6;
    --color-black: #252525;
    --color-text-grey: #757474;
    --color-grey-dark: #4a4a4a;
    --color-card: rgb(255, 255, 255, 0.5);
    --color-card-hover: rgba(255, 255, 255, 0.9);
    
    --whitespace-xxxs: 0.25rem;
    --whitespace-xxs: 0.5rem;
    --whitespace-xs: 0.75rem;
    --whitespace-s: 1rem;
    --whitespace-base: 1.25rem;
    --whitespace-m: 1.5rem;
    --whitespace-l: 2rem;
    --whitespace-xl: 3rem;
    --whitespace-xxl: 5rem;
    --whitespace-xxxl: 6rem;


    --font-size-xs: 0.875rem;
    --font-size-s: 1rem;
    --font-size-base: 1.125rem;
    --font-size-m: clamp(1.25rem, 0.5rem + 1vw, 1.5rem);
    /* --font-size-l: 1.5rem; */
    /* --font-size-xl: 1.75rem;
    --font-size-xxl: 2.75rem;
    --font-size-xxxl: 3.5rem;
    --font-size-title: 5.75rem; */
    --font-size-l: clamp(1.5rem, 1rem + 1vw, 2rem);
    --font-size-xl: clamp(1.75rem, 1.5rem + 1.75vw, 2.5rem);
    --font-size-xxl: clamp(2.75rem, 2rem + 2vw, 3rem);
    --font-size-xxxl: clamp(3.5rem, 2.5rem + 2.5vw, 4rem);
    --font-size-title: clamp(5.75rem, 3.5rem + 10vw, 7rem);
    --font-size-title-l: 9rem;
    --font-size-title-xl: 12rem;

    --font-family-roboto: Roboto, Helvetica, Sans-serif;
    --font-family-londrina: Londrina Solid, Roboto, Helvetica, Sans-serif;
    --font-family-lindsey: "lindsey-signature", Roboto, Helvetica, Sans-serif
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body {
    min-block-size:100%;
    inline-size: 100%;
    overflow-x: hidden;
}

/* &,
* {
    cursor: url(/src/assets/png/my-cursor.png) 16 16, auto;
} */

.container {
    padding-inline: var(--whitespace-base);
    min-block-size: 100%;
    inline-size: 100%;
}   

body{
    font-family: var(--font-family-roboto);
    background-color: var(--color-bg);
    font-size: var(--font-size-base);
    margin: none;
    padding: none;
    color: var(--color-black);
    line-height: 1.4;
}

#loader {
    position: fixed;
    inset: 0;
    background: var(--color-background);
    display: flex;
    flex-direction: column;
    gap: var(--whitespace-base);
    align-items: center;
    justify-content: center;
    z-index:1002;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    block-size: 100vh;
    inline-size: 100vw;
}


.spinner {
    inline-size: 48px;
    block-size: 48px;
    position: relative;
}

.spinner:before {
    content: '';
    inline-size: 48px;
    block-size: 5px;
    background: #885e70;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: shadow324 0.5s linear infinite;
}

.spinner:after {
    content: '';
    inline-size: 100%;
    block-size: 100%;
    background: #BA879D;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    animation: jump7456 0.5s linear infinite;
}

@keyframes jump7456 {
    15% {
        border-bottom-right-radius: 3px;
    }

    25% {
        transform: translateY(9px) rotate(22.5deg);
    }

    50% {
        transform: translateY(18px) scale(1, .9) rotate(45deg);
        border-bottom-right-radius: 40px;
    }

    75% {
        transform: translateY(9px) rotate(67.5deg);
    }

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

@keyframes shadow324 {

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

    50% {
        transform: scale(1.2, 1);
    }
}

.content-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* When loader finishes */
.site-content.visible {
    opacity: 1;
    visibility: visible;
}

body:hover{
    cursor:default;
}

body.menu-open {
    overflow: hidden;
    /* disables scroll */
    block-size: 100%;
    /* prevents "overscroll" on mobile */
}

.hidden {
    display: none;
}

.visually-hidden{
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    inline-size: 1px;
}

a {
    text-decoration: none;
    color: var(--color-black);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-weight: 600;
        text-transform: uppercase;
}

button {
    border: none;
    margin: 0;
    font-size: var(--font-size-base);
    background: transparent;
    color: var(--color-black);
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    padding: none;
}

button:hover {
    cursor: pointer;
}

h1 {
    font-family: var(--font-family-londrina);
    font-weight: 250;
    font-size: var(--font-size-title);
    line-height: 0.8;
}

h2{
    font-size: var(--font-size-xxl);
    font-family: var(--font-family-londrina);
    font-weight: 250;
}

img, picture {
    border-radius: 1rem;
    max-inline-size: 100%;
    block-size: auto;
}

.icon {
    inline-size: fit-content;
}

li {
    list-style: none;
}

em{
    font-weight: 700;
}

p{
    max-inline-size: 62ch;
}

.desktop {
    display: none;
}

.mobile {
    display: visible;
}

.panel {
    will-change: transform;
}

.shape, .mention__img{
    display: none;
}
/* 
.cursor{
    width: 22px;
    height: 22px;
    position: fixed;
    left: -8px;
    top: -2px;
    transform: rotate(-15deg);
    transform-origin: center;
    z-index: 1001;
    pointer-events: none;
} */

/* ------------------------------------- NAVIGATION ------------------------------------- */

.circle__button {
    padding: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    scale: 0.75;
}

.circle__button svg, .circle__button img {
    grid-column: 1;
    grid-row: 1;
}

.turning-circle{
    animation: spin-clockwise 7s infinite linear;
}

@keyframes spin-clockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
    ;
}

.turning-circle:active {
    animation: spin-counter 0.6s ease-out 1 forwards;
}

@keyframes spin-counter {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.nav__button--left {
    position: fixed;
    top: var(--whitespace-base);
    left: var(--whitespace-s);
    z-index: 1;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

.portfolio-word{
    margin-left: 0rem;
    transition: margin-left 0.3s ease-in-out 0.1s;
}

.nav__button--left:hover .portfolio-word {
    margin-left: 0.5rem;
}

.arrow-left {
    margin-right: var(--whitespace-xs);
    margin-left: 0rem;
    transition: margin-left 0.3s ease-in-out;
}

.nav__button--left:hover .arrow-left {
    margin-left: 1rem;
}

.move-left {
    margin-left: -1.3rem
}

.elegant-letter {
    font-family: var(--font-family-lindsey);
    font-size: var(--font-size-xxxl);
    font-weight: 200;
}

.nav__button--right {
    position: fixed;
    top:0;
    right: 0;
    z-index: 10;
}

.nav__list {
    z-index: 5;
    top: 0;
    left: 0;
    padding-inline: 1rem;
    block-size: 100vh;
    inline-size: 100vw;
    position: fixed;
    background-color: var(--color-bg);
    padding-block-start: 6rem;
}

.nav__item {
    line-height: 1.2;
    inline-size: 100%;
    cursor:pointer;
    /* transition: padding-inline-start 0.3s ease-in-out; */
}

/* .nav__item:hover {
    padding-inline-start: 5rem;
} */

.nav__link {
    display: block;
    inline-size: 100%;
    color: black;
    text-transform: capitalize;
    padding-inline-start: 0rem;
    font-weight: 250;
    font-size: var(--font-size-title);
    font-family: var(--font-family-londrina);
    transition: padding-inline-start 0.3s ease-out, font-size 0.3s ease-out;
}

.nav .nav__button--left, .nav .nav__button--right{
    position: absolute;
}

.nav.menu-open .nav__button--right {
    position: fixed;
}

/* ------------------------------------- ABOUT ------------------------------------- */
.about {
    background-image:
            url('../assets/png/background-gradient.png');
        background-repeat: no-repeat, no-repeat;
        background-size: 110vh, 100vh;
        background-position: 9rem -6rem, -34rem 40rem;
}

@supports (background-image: url('../assets/avif/index/background-gradient.avif')) {
    .about {
        background-image: url('../assets/avif/index/background-gradient.avif');
    }
}

.about__main {
    overflow-x: hidden;
    padding-block-end: var(--whitespace-xxl);
    max-inline-size: 95rem;
    margin: 0 auto;
}

.about__title {
    margin-block-start: 10rem; 
    margin-block-end: var(--whitespace-m);
}

.about__article {
    margin-block-start: var(--whitespace-l);
}

.article__title {
    line-height: 1;
}

.article__location {
    display: flex;
    align-items: center;
    gap: var(--whitespace-xxxs);
    font-weight: 500;
}

.article__text {
    margin-block-start: var(--whitespace-s);
}

.article__pillars {
    display: flex;
    align-items: center;
    gap: var(--whitespace-m);
    margin-block-start: var(--whitespace-s);
}

.pillar{
    color: var(--color-text-grey);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ------------------------------------- FOOTER ------------------------------------- */

footer{
    overflow-x: hidden;
    block-size: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-block-start: var(--whitespace-l);
    padding-block-end: var(--whitespace-xxl);
    align-items: start;
    background-image: url('../assets/png/background-gradient-2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0rem 25rem;
    scroll-snap-align: start;
}

@supports (background-image: url('../assets/avif/index/background-gradient-2.avif')) {
    footer {
        background-image: url('../assets/avif/index/background-gradient-2.avif');
    }
}

.footer__to-top {
    scroll-behavior: smooth;
}

.footer__content {
    display: flex;
    flex-direction: column;
    min-block-size: 58vh;
    justify-content: space-between;
}


.footer__title{
    font-size: var(--font-size-title);
    line-height: 1.0;
}

.footer__text {
    font-size: var(--font-size-xl);
    overflow-wrap: break-word;
    font-weight: 300;
    line-height: 1.3;
}

.email {
    font-weight: 600;
    inline-size: max-content;
}

.email:hover {
    cursor: pointer;
}

.more__list {
    display: flex;
    flex-direction: column;
    gap: var(--whitespace-base);
}

.more__title {
    font-size: var(--font-size-xl);
    margin-block-end: var(--whitespace-s);
}

.link {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-m);
    font-weight: 500;
    inline-size: 17rem;
    position: relative;
    /* border-bottom: 1.5px var(--color-black) solid; */
    padding-block-end: var(--whitespace-xxs);
}

.step__link{
    margin-block-start: var(--whitespace-m);
    inline-size: 18rem;
}

.link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    block-size: 1.5px;
    inline-size: 100%;
    background-color: var(--color-black);
    transition: transform 0.3s ease-in-out;
}

/* .link:hover {
    font-weight: 600;
} */

.link:hover::after {
    animation: line-grow 0.6s ease-in-out forwards;
}

.copyright {
    margin-block-start: var(--whitespace-l);
    font-size: var(--font-size-m);
    color: var(--color-grey-dark);
}


@keyframes line-grow {
    0% {
        inline-size: 100;
        transform-origin: right;
    }

    10% {
        inline-size: 0;
        transform-origin: right;
    }

    100% {
        inline-size: 100;
        transform-origin: right;
    }
}

.link__arrow {
    margin-right: 0rem;
    transition: margin-right 0.3s ease-in-out;
}

.link:hover .link__arrow {
    margin-right: 2.5rem;
}

/* ------------------------------------- HERO ------------------------------------- */
.index__main{
}

.body{
    
}

.hero {
    min-block-size: 90vh;
    padding-block-start: var(--whitespace-xxxl);
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: relative;
    /* background-image: url('/src/assets/png/hand.png') */
}

.hero::before{
    content:'';
    block-size: 100vh;
    inline-size: 100vw;
    top: -2rem;
    right: -5rem;
    position: absolute;
    z-index: -1;
    background-size: 38rem;
    background-repeat: no-repeat;
    background-image: url('../assets/png/hand.png');
    rotate: -10deg;
}

@supports (background-image: url('../assets/avif/index/hand.avif')) {
    .hero::before {
        background-image: url('../assets/avif/index/hand.avif');
    }
}

.hero__written{
    inline-size: 85%;
    max-inline-size: 20rem;
}

.hero__title {
    /* font-size: 7.25rem; */
    font-size: 33vw;
    line-height: 0.85;
    font-weight: 500;
    text-transform: uppercase;
}

.scroll-sign{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--whitespace-base);
}

.hero__scroll {
    margin-block-end: -4rem;
}

.scroll__text {
    font-family: var(--font-family-londrina);
    font-weight: 300;
    text-transform: uppercase;
    font-size: var(--font-size-l);
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.hero__center{
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.hero__written{
    margin-block-end: 0rem;
}

/* ------------------------------------- INTRO ------------------------------------- */
.intro__img {
    display: inline-block;
    /* overflow: visible; */
    block-size:65vh;
    inline-size: auto;
    object-position: bottom left;
    margin-block-start: -0rem;
    margin-left: var(--whitespace-base);
    border-radius: 0;
    grid-row: 2;
    grid-column: 2/4;
    align-self: end;
}

.intro__img img {
    block-size: 100%;
    max-inline-size: none;
    inline-size: auto;
    object-fit: cover;
    display: block;
    /* overflow: visible; */
    object-position: bottom left;
}

.intro{
    /* min-block-size: 100vh; */
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    padding-block-start: var(--whitespace-s);
    max-inline-size: 100rem;
    margin: 0 auto;
}

/* .intro::before {
    content: '';
    height: 100vh;
    width: 100vw;
    top: 0rem;
    right: -6em;
    position: absolute;
    z-index: -1;
    background-position: bottom right;
    background-size: auto 33rem;
    background-repeat: no-repeat;
    background-image: url('/src/assets/png/picture-intro.png');
} */

.intro__text{
    font-weight: 300;
    font-size:var(--font-size-l);
    line-height: 1.55;
    grid-row: 1;
    grid-column: 1/4;
}

.intro__fields {
    display: flex;
    flex-direction: column;
    gap: var(--whitespace-s);
    grid-row: 2;
    grid-column: 1/3;
    align-self: center;
    /* padding-block-end: var(--whitespace-base); */
}

.field {
    font-size: var(--font-size-base);
    inline-size: max-content;
    padding: var(--whitespace-xxxs) var(--whitespace-s);
    border-radius: 3.5rem;
    border: 1.5px solid var(--color-black);
    font-weight: 500;
    text-transform: uppercase;
}

.intro__highlight{
    font-family: var(--font-family-londrina);
}

.circle-word{
    position: relative;
    display: inline-block;
}

.circle-word::before{
    content:'';
    block-size: 4rem;
    inline-size: 5.5rem;
    margin-left: -0.6rem;
    position: absolute;
    background-image: url('../assets/svg/circle-line.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.line-word {
    position: relative;
    display: inline-block;
}

.line-word::before {
    content: '';
    block-size: 4rem;
    inline-size: 6rem;
    margin-left: -0.5rem;
    margin-block-start: 2rem;
    position: absolute;
    background-image: url('../assets/svg/under-line.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

/* ------------------------------------- PROJECTS ------------------------------------- */
.projects{
  padding-block-end: var(--whitespace-xxl);
}

.projects__top {
    margin-block: var(--whitespace-base);
    margin-block-start: var(--whitespace-l)
}

.projects__title{
    margin-block-start: var(--whitespace-xl);
    text-align: center;
    font-size: var(--font-size-title);
    line-height: 1.0;
    max-inline-size: 10ch;
    margin: 0 auto;
}

.desktop-break {
    display: none;
}

.projects__img {
    object-fit: cover;
    scale: 1.2;
    margin-block-start: -0.5rem;
    inline-size: 100%;
    max-inline-size: 65rem;
    display: block;
    margin: 0 auto;
}

.projects__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--whitespace-xs);}

.card{
    padding: var(--whitespace-xs);
    background-color: var(--color-card);
    border-radius: 1.875rem;
    block-size: 100%;
    transition: box-shadow .4s cubic-bezier(.23, 1, .32, 1), padding .4s cubic-bezier(.23, 1, .32, 1), background-color .4s cubic-bezier(.23, 1, .32, 1);
}

.card-active, .mention-active {
        box-shadow: 0 1rem 1rem rgba(26, 53, 49, 0.2);
        padding: var(--whitespace-base);
        background-color: var(--color-card-hover)
}

.card-active .toGif {
    content: url('../assets/gif/more.gif');
}

.card__img {
    aspect-ratio: 3.1/2.5;
    object-fit: cover;
    max-block-size: 22rem;
    inline-size: 100%;
    display: inline-block;
}

.toGif {
    transition: opacity 0.3s ease;
}

.card--more:hover .toGif{
    content: url('../assets/gif/more.gif');
}

.card__img img {
    aspect-ratio: 3.1/2.5;
    inline-size: 100%;
    object-fit: cover;
    object-position: center;
}

.card__title {
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--font-size-xl);
    margin-block-start: var(--whitespace-s);
    line-height: 1;
}

.card__categories{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--whitespace-xxs);
    row-gap: var(--whitespace-xxs);
    margin-block-start: var(--whitespace-xxxs);
}

.card__category{
    text-transform: uppercase;
    font-size: var(--font-size-s);
    font-weight: 500;
    inline-size: max-content;
    padding: var(--whitespace-xxxs) var(--whitespace-s);
    border-radius: 3.5rem;
    border: 1.5px solid var(--color-black);
    
}

.card__desc{
    text-transform: initial;
    font-weight: 400;
    margin-block-start: var(--whitespace-m);
    margin-block-end: var(--whitespace-xs);
    inline-size: 100%;
}

.card__insta{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--whitespace-xxs);
    align-items: center;
}

.card__logo{
    border-radius: 0;
}

.card__tag{
    font-weight: 500;
    text-transform: initial;
    font-size: var(--font-size-m);
}

.projects__scroll {
    display: none;
}

.card--redcross img{

    object-position: bottom center;
}

/* ------------------------------------- DETAIL ------------------------------------- */
.project__main{
    margin-block-start: 8rem;
}

.project__hero, .project--top{
    display: flex;
    flex-direction: column;
    gap: var(--whitespace-xxs);
}

.info__list{
    display: flex;
    flex-direction: column;
    gap: var(--whitespace-xxxs);
}

.project__info{
    display: flex;
    gap: var(--whitespace-xs);
    align-items: center;
}

.project__title{
    font-size: var(--font-size-xxxl);
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    word-break: break-word;
    font-family: var(--font-family-roboto);
}

.project__header{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    padding-block-start: var(--whitespace-base);
    padding-block-end: var(--whitespace-s);
}

.projects__top--text {
    margin-block-start: var(--whitespace-xl);
}

.project__img, .project__bg {
    grid-column: 1;
    grid-row: 1;
}

.project__bg{
    max-inline-size: 200%;
    rotate: -10deg;
    z-index: -1;
}

.project__img {
    display: inline-block;
    margin: 0 auto;
}

/* .project__img img {
    inline-size: 100%;
    margin: 0 auto;
    block-size: auto;
    object-fit: cover;
} */

.project__desc {
    font-size: var(--font-size-xl);
    font-weight: 350;
}

.info__icon{
    border-radius: 0;
}

/* .page--nellie .project__img {
    max-inline-size
} */

.explain__steps{
    padding-block: var(--whitespace-l);
    padding-inline: var(--whitespace-base); 
    margin-block: var(--whitespace-m);
    display: flex;
    flex-direction: column;
    gap: var(--whitespace-s);
    background-color: #d5d4d4;
    inline-size: 100vw;
    margin-inline-start: -1.25rem;
}

.step__title {
    transform-origin: center left;
    font-size: var(--font-size-xl);
    text-transform: uppercase;
    font-weight: 400;
    transition: scale 0.4s ease-in-out, color 0.2s ease-in-out;
    color: var(--color-text-grey);
    padding-inline-end: var(--whitespace-m);
    text-align: start;
    /* font-family: var(--font-family-londrina); */
}

.step__title:hover{
    color: var(--color-black);
}

.step__toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    inline-size: 100%;
}

.step__descs {
    max-block-size: 0;
    overflow: hidden;
    transition: max-block-size 0.6s ease-in-out;
    display: flex;
    flex-direction: column;
    gap: var(--whitespace-xxs)
}

.step__descs.open {
    max-block-size: 50rem;
    margin-block-start: var(--whitespace-xxs);
    margin-block-end: var(--whitespace-base);
}

.step__toggle.open .step__title {
    /* font-size: var(--font-size-xxl); */
    scale: 1.5;
    color: var(--color-black);
    font-weight: 500;
    padding-block-end: var(--whitespace-xxxs);
}

.step__subtitle {
    font-size: var(--font-size-m);
    text-transform: capitalize;
    font-weight: 600;
    padding-block: var(--whitespace-xxxs);
}

.toggle__icon {
    transition: transform 0.4s ease-in-out;
}

.toggle__icon.rotated {
    transform: rotate(180deg);
}

.explain__photos {
    padding-block: var(--whitespace-m);
    display: flex;
    flex-direction: column;
    gap: var(--whitespace-xxxs);
}

iframe {   
    margin-block: var(--whitespace-xs); 
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
}

.step__warning {
    color: rgb(189, 54, 97);
    font-weight: 400;
}

/* ------------------------------------- MENTIONS ------------------------------------- */
.mentions {
    inline-size: 100%;
    margin-block-start: var(--whitespace-xxl);
}

.mentions__title {
        font-size: var(--font-size-xxl);
        text-transform: uppercase;
        font-weight: 400;
        padding-inline-end: var(--whitespace-m);
        font-family: var(--font-family-roboto);
        margin-block-end: var(--whitespace-s);
}

.mentions__list {
    inline-size: 100%;
}

.mention {
    display: flex;
    flex-wrap: wrap;
    inline-size: 100%;
    position: relative;
    font-size: var(--font-size-l);
    justify-content: space-between;
    column-gap: var(--whitespace-l);
    row-gap: var(--whitespace-xs);
    align-items: center;
    padding: var(--whitespace-m);
    background-color: var(--color-card);
    border-radius: 1.875rem;
    transition: box-shadow .4s cubic-bezier(.23, 1, .32, 1), padding .4s cubic-bezier(.23, 1, .32, 1), background-color .4s cubic-bezier(.23, 1, .32, 1);
    font-weight: 300;
}

/* .mention::after {
    content: "";
    display: block;
    position: absolute;
    border-bottom: 2px solid var(--color-black);
    inline-size: 100%;
    bottom: 0;
}

.mention:first-child::before {
    content: "";
    display: block;
    position: absolute;
    border-bottom: 2px solid var(--color-black);
    inline-size: 100%;
    top: 0;
} */

.mention__title {
    text-transform: capitalize;
    font-size: var(--font-size-l);
}

.mention__client {
    text-transform: capitalize;
    color: var(--color-text-grey);
    font-size: var(--font-size-m);
}

.mention__img--s {
    block-size: 12rem;
    inline-size: 20rem;
    object-fit: cover;
}

/* ------------------------------------- RESPONSIVE ------------------------------------- */
@media screen and (min-width: 23em) {
    .hero::before {
        block-size: 100vh;
        inline-size: 100vw;
        top: -4rem;
        right: -8rem;
        background-size: 38rem;
        rotate: 8deg;
    }
}

@media screen and (min-width: 30em) {
    footer {
            block-size: fit-content;
            background-position: 10rem 24rem;
    }

    .about {
        background-position: 15rem -6rem, -34rem 40rem;
    }

    .hero::before {
        block-size: 100vh;
        inline-size: 100vw;
        top: -7rem;
        right: -10rem;
        background-size: 38rem;
        rotate: 5deg;
    }
}

@media screen and (min-width: 31em) {
    .intro__img {
            justify-self: end;
            /* scale: 0.85; */
            padding-inline-start: 3rem;
        }
}

@media screen and (min-width: 35em) {
        .hero::before {
            inline-size: 100vw;
            top: 0rem;
            right: -16rem;
            background-size: 38rem;
            rotate: 10deg;
        }

        .hero{
            min-block-size: 0vh;
        }

        .about {
                background-position: 20rem -6rem, -34rem 40rem;
        }

         .intro {
             min-block-size: 0vh;
             /* block-size: calc(100vh - var(--hero-title-height)); */
             grid-template-columns: 1fr 1fr 0.8fr;
             grid-template-rows: 1fr auto;
             position: relative;
             /* row-gap: var(--whitespace-base); */
         }
    
         .intro__img {
            grid-row: 1/3;
            padding-inline-start: 9rem;
            /* overflow: visible; */
            scale: 1;
         }
    
         .intro__text {
             padding-inline-start: var(--whitespace-l);
             /* padding-block-start: var(--whitespace-m); */
             align-self: center;
             grid-column: 1/3;
             grid-row: 1;
             font-size: var(--font-size-l);
             ;
             max-inline-size: 38ch;
         }
    
         .intro__fields {
             padding-inline-start: var(--whitespace-l);
             padding-block-end: var(--whitespace-m);
             grid-column: 1/3;
             grid-row: 2;
             flex-direction: row;
             flex-wrap: wrap;
             font-size: var(--font-size-base);
             column-gap: var(--whitespace-s);
             row-gap: var(--whitespace-xs);
             max-inline-size: 50rem;
         }
    
         .field {
             padding: var(--whitespace-xxxs) var(--whitespace-base);
         }
    
         .circle-word::before {
            block-size: 3rem;
            inline-size: 8rem;
             margin-left: -0.75rem;
            margin-block-start: -0.125rem;
         }
    
         .line-word::before {
            block-size: 3rem;
            inline-size: 6rem;
             margin-left: -0.75rem;
             margin-block-start: 2rem;
         }

        .mobile-break {
            display: none;
        }

        .desktop-break {
            display: inline;
        }

        .projects__img {
            inline-size: 80%;
            margin-block-start: -1rem;
        }

        .card:hover, .mention:hover {
            /* transform: scale(1.01); */
            box-shadow: 0 1rem 1rem rgba(73, 15, 73, 0.1);
            padding: var(--whitespace-base);
            background-color: var(--color-card-hover)
        }

        .card-active, .mention-active {
            box-shadow: none;
            padding: var(--whitespace-m);
            background-color: var(--color-card);
        }
}

@media screen and (min-width: 40em) {
    .about {
            background-position: 26rem -6rem, -34rem 40rem;
        }

    .container {
        padding-inline: var(--whitespace-l);
    }

    .explain__steps {
        padding-inline: var(--whitespace-l);
        margin-inline-start: -2rem;
    }

    .intro__img {
        padding-inline-start: 11rem;
    }

    .explain__photos {
        gap: var(--whitespace-xxs);
    }
}

@media screen and (min-width: 46em) {
    /* .hero {
        min-block-size: 100vh;
    } */

    .hero__written {
        max-inline-size: 26rem;
        margin-block-end: 5rem;
    }

    .hero__title {
        font-size: 19vw;
        text-align: center;
        inline-size: 100%;
     }

    .hero::before {
        /* height: 100vh; */
        inline-size: 100vw;
        /* background-position: center right; */
        top: -4rem;
        right:-18rem;
        background-size: 45rem;
        rotate: 10deg;
    }

    .hero__scroll {
        margin-block-end: 3rem;
        margin-inline-end: 2rem;
    }

    .footer__content {
            display: flex;
            flex-direction: row;
            inline-size: 100%;
            min-block-size: min-content;
            align-items: end;
    }


    footer {
        background-position: 20rem 8rem;
    }

    .about {
        background-position: 38rem 0rem;
    }

    .about__main {
        display: grid;
        grid-template-columns: 1fr 0.9fr;
        padding-block-start: 7rem;
        grid-template-rows: auto auto;
        align-items: center;
        /* padding-block-end: var(--whitespace-xl); */
        column-gap: var(--whitespace-xl);
        row-gap: var(--whitespace-m);
    }

    .about__title {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    .about__img {
        grid-column: 1;
        grid-row: 2;
        object-fit: cover;
        block-size: auto;
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: 5/3;
    }

    .article--1 {
        margin: 0;
        grid-column: 2;
        grid-row: 2;
        max-inline-size: 55ch
    }

    .article--2 {
        margin: 0;
        grid-column: 1;
        grid-row: 1;
        /* padding-inline-end: var(--whitespace-xxl); */
    }

    .intro__img {
        padding-inline-start: 15rem;
        block-size: 115%;
        max-inline-size: 30rem;
    }
    
}

@media screen and (min-width: 50em) {
    .footer__title{
            font-size: var(--font-size-title-l);
    }

    /* .nav__link:hover {
        font-size: var(--font-size-title-l);
        padding-inline-start: 5rem;
    } */

    .about__title,
    .projects__title {
        font-size: var(--font-size-title-l);
    }

    .desktop {
        display: block;
    }

    .mobile {
        display: none;
    }

    .project__main {
        max-inline-size: 100rem;
        margin: 0 auto;
        margin-block-start: 3rem;
    }

    .project__hero--container {
        block-size: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .project__title {
        font-size: var(--font-size-xxl);
    }

    .project__hero {
        display: grid;
        block-size: fit-content;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: min-content;
        gap: var(--whitespace-xxs);
        margin-block-start: 2rem;
    }

    .project__header {
        padding-block: 0;
        grid-column: 1/8;
        grid-row: 1;
        z-index: -1;
        block-size: min-content;
        justify-self: center;
        margin-block-end: -4rem;
    }

    .project--top {
        grid-column: 7/11;
        grid-row: 1;
        align-self: center;
        margin-block-start: -3rem;
    }

    .project__desc {
        font-size: var(--font-size-m);
    }

    .project__bg {
        max-inline-size: 110%;
        justify-self: center;
        margin-left: -13rem;
        rotate: -10deg;
    }

    .project__img {
        justify-self: start;
        margin: 0;
        inline-size: auto;
        block-size: 95%;
        margin-block-end: 0rem;
        padding-block: var(--whitespace-s);
    }

    .project__img img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
    }

    .page--mixbox .project__img {
        max-inline-size: 83%;
        block-size: auto;
        margin-block-start: -1rem;
        margin-inline-start: var(--whitespace-xs);
    }

    .page--redcross .project__img {
        max-inline-size: 90%;
        block-size: auto;
    }

    .page--redcross .project__header {
        margin-block-start: 2rem;
        margin-block-end: 0rem;
    }

    .page--redcross .project--top {
        margin-block-start: 0rem;
    }

    .page--mixbox .project__header {
        margin-block-start: -0rem;
        margin-block-end: 0;
        margin-inline-end: -6rem;
        align-content: center;
    }

    .page--maxbox .project--top{
        margin-block-start: 0rem;
    }

    .project__explain {
        margin-block-start: var(--whitespace-xxl);
    }

    .copyright {
        font-size: var(--font-size-base);
    }
}


@media screen and (min-width: 60em) {
    .hero::before {
            background-size: 50rem;
            right: -12rem;
            rotate: 5deg;
            background-position: top right;
    }
    .hero__title {
            font-size: 18.6vw;
    }

    .container {
            padding-inline: var(--whitespace-xl);
        }
    
    .explain__steps {
        padding-inline: var(--whitespace-xl);
        margin-inline-start: -3rem;
    }

    .turning-circle:hover {
            animation: spin-counter 0.6s ease-out 1 forwards;
        }

    footer {
        background-size: 90%;
        background-position: 30rem 8rem;
    }

    .more__title{
        font-size: var(--font-size-xxl);
        margin-block-end: var(--whitespace-l);
    }

    .link {
        font-size: var(--font-size-l);
        font-weight: 400;
    }

    .link::after {
        block-size: 2px;
    }

    .link:hover {

    }

    .nav__button{
        padding-inline: var(--whitespace-l);
    }

    .nav__button--right {
        padding-block: var(--whitespace-xs);
    }

    .nav__button--left {
        left: 0;
    }

    .circle__button{
        scale: 0.9;
    }

    img{
        /* max-inline-size: 50%; */
        block-size: auto;
    }

    .icon {
        max-inline-size: 100%;
    }

    .nav__list{
        padding-top: 4rem;
        padding-left: 4rem;
    }

    .nav__link{
        line-height: 1.3;
    }

    .about {
        background-position: 50rem 0rem;
    }

    .intro{
        min-block-size: 0vh;
        /* block-size: calc(100vh - var(--hero-title-height)); */
        grid-template-columns: 1fr 1fr 0.8fr;
        grid-template-rows: 1fr auto;
        position: relative;
    }

    .intro__img {
        max-inline-size: 24rem;
        grid-column: 3;
        grid-row: 1/3;
        block-size: 110%;
        z-index: 2;
        padding-inline-start: 0;
    }

    .intro__text {
        padding-inline-start: var(--whitespace-xl);
        /* padding-block-start: var(--whitespace-m); */
        align-self: center;
        grid-column: 1/3;
        grid-row: 1;
        font-size: clamp(1.5rem, 1.5rem + 1vw, 2.3rem);;
        max-inline-size: 38ch;
    }

    .intro__fields {
        padding-inline-start: var(--whitespace-xl);
        padding-block-end: var(--whitespace-xl);
        grid-column: 1/3;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: var(--font-size-m);
        column-gap: var(--whitespace-base);
        row-gap: var(--whitespace-s);
        max-inline-size: 50rem;
    }

    .field{
        padding: var(--whitespace-xxxs) var(--whitespace-m);
    }

    .circle-word::before {
        block-size: 4.8rem;
        inline-size: 8rem;
        margin-left: -0.75rem;
    }

    .line-word::before{
        block-size: 4.8rem;
        inline-size: 8rem;
        margin-left: -0.75rem;
        margin-block-start: 2.75rem;
    }

    .projects__img {
        margin-block-start: -2rem;
    }

    .projects__top {
        padding-block: var(--whitespace-xxl);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-inline-end: 4rem;
    }

    .projects__top--text{
        block-size: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-block-start: 0;
    }

    .projects__scroll {
        display: flex;
        padding-inline-end: var(--whitespace-xl);
    }

    .project__title {
        font-size: var(--font-size-xxxl);
    }
}

@media screen and (min-width: 65em) {
    .intro__container{
        block-size: 100vh;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
        margin-block-start: calc(-1 * var(--hero-title-height));
        will-change: transform;
    }

    .intro {
        block-size: 100vh;
        block-size: calc(100vh - var(--hero-title-height));
        grid-column: 1;
        grid-row: 1;
        align-self:end;
    }


    .hero {
        min-block-size: 100vh;
        will-change: transform;
    }

    .projects__top {
        min-block-size: 100vh;
        will-change: transform;
        margin-block: 0;
        margin-block-start: var(--whitespace-base);
    }

    .project__hero--container {
        block-size: 85vh;
    }

    .project__img {
        justify-self: start;
        margin: 0;
        inline-size: auto;
        block-size: 105%;
        margin-block-end: -1rem;
        padding-block: 0;
    }

    .project__img img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
    }

    .project__explain{
        display: grid;
        grid-template-columns: 45% 55%;
        margin-block-start: 10rem;
    }

    .explain__photos{
        padding-block: 0;
    }

    .explain__steps{
        background-color: var(--color-bg);
        padding-block: 0;
        padding-inline: 0;
        margin-block: 0;
        margin-inline-start: 0;
        inline-size: 100%;
        padding-inline-end: var(--whitespace-l);
        block-size: min-content;
    }

    .toggle__icon{
        display: none;
    }

    .shape{
        position: fixed;
        top: 0;
        left: 0;
        will-change: transform;
        display: inline-block;
        border-radius: 50%;
        background: #1da0a9;
        inline-size: 20px;
        block-size: 20px;
        margin: -10px 0 0 -10px;
        pointer-events: none;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        place-items: center;
        z-index: 1000;
    }

    .shape-1 {
        font-family: var(--font-family-londrina);
        font-size: var(--font-size-m);
        font-weight: 300;
        text-align: center;
        line-height: 1;
    }

    .mention__img {
        position: fixed;
        left: 0;
        top: -9rem;
        opacity: 0;
        block-size: 18rem;
        inline-size: 30rem;
        object-fit: cover;
        will-change: transform;
        display: inline-block;
        pointer-events: none;
        z-index: 999;

    }

    /* .cursor {
        position: fixed;
        background: #23827e;
        width: 14px;
        height: 14px;
        margin: -7px 0 0 -7px;
        mix-blend-mode: none;
        border-radius: 50%;
        will-change: transform;
        user-select: none;
        pointer-events: none;
        z-index: 1000;
    } */
}

@media screen and (min-width:70em) {
    .hero__written {
            margin-block-end: 2rem;
    }
    
    .hero__written {
            max-inline-size: 28rem;
    }

    .hero__title {
            font-size: 19vw;

    }

    footer{
        padding-block-end: var(--whitespace-xxxl);
    }

    .footer__title {
            font-size: var(--font-size-title-xl);
    }

    .footer__text {
        line-height: 1.2;
    }

    .about {
        background-position: 58rem 0rem;
    }

    .intro__img {
        block-size: 115%;
    }

    .intro__fields {
        padding-block-end: var(--whitespace-xxl);
    }

}

@media screen and (min-width: 75em){
    .hero::before {
            background-size: 55rem;
            top: -6rem;
            right: -3rem;
            rotate: 0deg;
    }

    .hero__written{
        margin-inline-start: 2rem;
    }
    .about__main {
            column-gap: var(--whitespace-xxl);
    }

    .about__title {
        font-size: var(--font-size-title-l);
    }

    .about {
        background-position: 62rem 0rem;
    }


    .intro__fields {
        max-inline-size: 55rem;
    }

    .field {
        font-size: var(--font-size-m);
    }

    .projects__title{
        font-size: var(--font-size-title-xl);
    }

    .project__explain {
        display: grid;
        grid-template-columns: 45% 55%;
        margin-block-start: 12rem;
    }

    .project__desc {
        font-size: var(--font-size-l);
    }
}

@media screen and (min-width: 80rem) {
    .projects__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 85em) {
    .hero::before {
            background-size: 58rem;
            top: -8rem;
            right: -3rem;
    }
    .hero__written {
            max-inline-size: 32rem;
        }

    .hero__title {
            font-size: 19.3vw;
        }

    .about {
            background-position: 70rem 0rem;
        }
}

@media screen and (min-width: 90em) {
    .about {
        background-position: 78rem 0rem;
    }

    .card__title {
        text-transform: uppercase;
        font-weight: 600;
        /* font-size: var(--font-size-l); */
        margin-block-start: var(--whitespace-s);
    }

    .card{
        block-size: 100%;
    }

    .card__link {
        block-size: 100%;
    }

    .card__img {
        block-size: 100%;
        /* max-block-size: 18rem; */
        display: block;
        aspect-ratio: initial;
        inline-size: 100%;
    }

    .card__img img {
        aspect-ratio: initial;
        block-size: 100%;
        inline-size: auto;
        object-fit: cover;
        display: block;
    }

    .card__content {
        min-inline-size: 10rem;
        inline-size: 90%;
    }

    .card__desc{
        padding-inline-end: var(--whitespace-m);
    }

    .card__link {
        display: flex;
        flex-direction: row;
        gap: var(--whitespace-xs);
    }

    .card--nellie {
        grid-area: nellie;
        inline-size: 100%;
        grid-row: 1;
        grid-column: span 11;
    }


    .card--mixbox {
        grid-area: mixbox;
        grid-row: 1;
        grid-column: span 9;
    }

    .card--redcross {
        grid-area: redcross;
        grid-row: 2;
        grid-column: span 9;
    }

    .card--heatonists {
        grid-area: heatonists;
        grid-row: 2;
        grid-column: span 11;
    }

    .card--dump {
        grid-area: dump;
        grid-row: 3;
        grid-column: span 12;
    }

    .card--more {
        grid-area: more;
        grid-row: 3;
        grid-column: span 8;
    }

    .projects__list {
        grid-template-columns: repeat(20, 1fr);
        grid-template-rows: repeat(3, 20rem);
        max-inline-size: 100rem;
        margin: 0 auto;
    }

    .project__desc {
        font-size: var(--font-size-xl);
        font-weight: 350;
    }
}

@media screen and (min-width: 95em) {
    .hero__title {
        font-size: 18.5rem;
    }

    .hero__center {
        inline-size: 88rem;
        margin: 0 auto;
    }

    .intro__text {
        font-size: clamp(2rem, 1.5rem + 1.5vw, 2.8rem);
        ;
    }

    .intro__fields {
        max-inline-size: 60rem;
    }

    .circle-word::before {
        block-size: 6rem;
        inline-size: 10rem;
        margin-inline-start: -0.75rem;
    }

    .line-word::before {
        block-size: 4.8rem;
        inline-size: 10rem;
        margin-inline-start: -0.5rem;
        margin-block-start: 3.5rem;
    }

    .field{
        font-size: clamp(1.5rem, 1rem + 1vw, 2rem);
    }
}