/* ---FONTS--- */
@layer fonts {
    /* ---FONT FACE--- */
    /* //////////////////////// */

    /* FixelText- regular */
    @font-face {
        font-family: 'Fixel Text';
        font-weight: 400;
        font-style: normal;
        src: url('../fonts/FixelText-Regular.woff2') format('woff2');
        font-display: swap;
    }

    /* FixelText- medium */
    @font-face {
        font-family: 'Fixel Text';
        font-weight: 600;
        font-style: normal;
        src: url('../fonts/FixelText-Medium.woff2') format('woff2');
        font-display: swap;
    }

    /* FixelText- bold */
    @font-face {
        font-family: 'Fixel Text';
        font-weight: 700;
        font-style: normal;
        src: url('../fonts/FixelText-Bold.woff2') format('woff2');
        font-display: swap;
    }

    /* FixelDisplay - bold */
    @font-face {
        font-family: 'Fixel Display';
        font-weight: 700;
        font-style: normal;
        src: url('../fonts/FixelDisplay-Bold.woff2') format('woff2');
        font-display: swap;
    }
}



/* ---ROOT--- */
/* //////////////////////// */
:root {
    --clr-white: hsl(0 0% 100%);
    --clr-neutral-100: hsl(0, 0%, 96%);
    --clr-neutral-200: hsl(0, 0%, 88%);
    --clr-neutral-300: hsl(0, 0%, 80%);
    --clr-neutral-500: hsl(0, 0%, 40%);
    --clr-neutral-600: hsl(0, 0%, 32%);
    --clr-neutral-700: hsl(0, 0%, 24%);
    --clr-neutral-800: hsl(0, 0%, 16%);
    --clr-neutral-900: hsl(0, 0%, 8%);
    --clr-black: hsl(0 0% 0%);

    --clr-text-100: hsl(240, 20%, 96%);
    --clr-text-200: hsl(245, 18%, 88%);
    --clr-text-300: hsl(243, 18%, 80%);
    --clr-text-400: hsl(245, 17%, 72%);
    --clr-text-500: hsl(244, 17%, 40%);
    --clr-text-600: hsl(244, 17%, 32%);
    --clr-text-700: hsl(243, 17%, 24%);
    --clr-text-800: hsl(244, 17%, 16%);

    --clr-background-100: hsl(30, 29%, 95%);
    --clr-background-200: hsl(28, 28%, 88%);

    --background-color: var(--clr-background-100);

    --clr-accent-100: hsl(114, 29%, 80%);
    --clr-accent-200: hsl(114, 29%, 72%);
    --clr-accent-300: hsl(113, 29%, 36%);
    --clr-accent-400: hsl(114, 29%, 27%);

    --ff-heading: "Fixel Display", Arial, Helvetica, sans-serif;
    --ff-body: "Fixel Text", Arial, Helvetica, sans-serif;

    --fw-regular: 400;
    --fw-medium: 600;
    --fw-bold: 700;

    --fs-200: clamp(0.7035rem, 0.8095rem + -0.1414vw, 0.7813rem);
    --fs-300: clamp(0.9375rem, 0.9374rem + 0.0004vw, 0.9377rem);
    --fs-400: clamp(1.125rem, 1.0795rem + 0.2273vw, 1.25rem);
    --fs-500: clamp(1.35rem, 1.235rem + 0.575vw, 1.6663rem);
    --fs-600: clamp(1.62rem, 1.4014rem + 1.0929vw, 2.2211rem);
    --fs-700: clamp(1.944rem, 1.5743rem + 1.8486vw, 2.9607rem);
    --fs-800: clamp(2.3328rem, 1.7459rem + 2.9343vw, 3.9467rem);
    --fs-900: clamp(2.7994rem, 1.9043rem + 4.4755vw, 5.2609rem);

    --fs-footer: var(--fs-300);
    --fs-body: var(--fs-400);
    --fs-button: var(--fs-400);
    --fs-primary-heading: var(--fs-900);
    --fs-secondary-heading: var(--fs-800);

    --body-max-width: 60ch;

    --text-space-100: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --text-space-200: clamp(0.5625rem, 0.5398rem + 0.1136vw, 0.625rem);
    --text-space-300: clamp(0.875rem, 0.8523rem + 0.1136vw, 0.9375rem);
    --text-space-400: clamp(1.125rem, 1.0795rem + 0.2273vw, 1.25rem);
    --text-space-500: clamp(1.6875rem, 1.6193rem + 0.3409vw, 1.875rem);
    --text-space-600: clamp(2.25rem, 2.1591rem + 0.4545vw, 2.5rem);
    --text-space-700: clamp(3.375rem, 3.2386rem + 0.6818vw, 3.75rem);
    --text-space-800: clamp(4.5rem, 4.3182rem + 0.9091vw, 5rem);
    --text-space-900: clamp(6.75rem, 6.4773rem + 1.3636vw, 7.5rem);


    --space-100: clamp(0.3125rem, 0.1989rem + 0.5682vw, 0.625rem);
    --space-200: clamp(0.5625rem, 0.4261rem + 0.6818vw, 0.9375rem);
    --space-300: clamp(0.875rem, 0.7386rem + 0.6818vw, 1.25rem);
    --space-400: clamp(1.125rem, 0.8523rem + 1.3636vw, 1.875rem);
    --space-500: clamp(1.6875rem, 1.392rem + 1.4773vw, 2.5rem);
    --space-600: clamp(2.25rem, 1.7045rem + 2.7273vw, 3.75rem);
    --space-700: clamp(3.375rem, 2.7841rem + 2.9545vw, 5rem);
    --space-800: clamp(4.5rem, 3.4091rem + 5.4545vw, 7.5rem);

    --border-radius: 4px;
    --border-radius-pill: 999em;

    --line-size: 2px;
    --border-size: var(--line-size);
    --ball-size: var(--fs-200);

    --outline-style: solid;
    --outline-offset: var(--text-space-100);
    --outline-color: currentColor;
    --outline-width: thick;
}

/* ---CSS RESET--- */
/* //////////////////////// */
@layer reset {

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

    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        scroll-behavior: smooth;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        min-height: 100vh;
        text-rendering: optimizeSpeed;
    }

    p,
    h1,
    h2,
    h3,
    h4 {
        margin: 0;
        overflow-wrap: break-word;
    }

    h1,
    h2,
    h3,
    h4 {
        text-wrap: balance;
    }

    p {
        max-width: var(--body-max-width, 65ch);
        text-wrap: pretty;
    }

    a:not([class]) {
        text-decoration-skip-ink: auto;
        color: currentColor;
    }

    :is(ul, ol)[class] {
        list-style: none;
        padding: 0;
        margin: 0;
    }

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

    button {
        font: inherit;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---GENERAL STYLING--- */
/* //////////////////////// */
*:focus-visible {
    outline-style: var(--outline-style);
    outline-offset: var(--outline-offset);
    outline-color: var(--outline-color);
    outline-width: var(--outline-width);
}

body {
    font-family: var(--ff-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--clr-text-700);
}

h1,
h2,
h3,
h4 {
    font-family: var(--ff-heading);
}

h1,
h2,
h3,
h4 {
    line-height: 1.15;
}

a:not([class]) {
    transition: color .3s ease-in-out;

    &:where(:focus-visible, :hover, :active) {
        color: var(--clr-accent-400);
    }
}

.visually-hidden:not(:focus):not(:active):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
    overflow: hidden;
}

.skip-to-main-content-link {
    position: absolute;
    display: inline-block;
    left: 50%;
    padding: 1em;
    line-height: 1.2;
    font-size: var(--fs-500);
    background-color: var(--clr-neutral-900);
    color: var(--clr-neutral-100);
    /* Ensure the Y position is set to zero and any movement on the transform property */
    translate: -50% -999rem;
    opacity: 0;
    z-index: 999;
    transition: translate .3s ease-in-out, opacity .3s ease-in-out;

    &::after {
        content: "";
    }

    &:focus {
        opacity: 1;
        translate: -50% 0rem;
        outline-color: var(--clr-neutral-900);
    }
}

.nav-link {
    text-decoration: none;
    color: currentColor;
    line-height: 1;
    transition: color .3s ease-in-out;

    &:focus-visible,
    &:hover,
    &:active {
        color: var(--clr-accent-400);
    }
}

.logo {
    padding: var(--text-space-100);
    font-size: var(--fs-700);
    font-weight: var(--fw-bold);
    text-decoration: none;
    line-height: 1;
    color: var(--clr-accent-400);
    isolation: isolate;

    & > span {
        position: relative;
        rotate: -20deg;
        display: inline-block;

        &::before {
            position: absolute;
            content: "M";
            inset: .04em .04em;
            color: var(--clr-text-700);
            z-index: -1;
        }
    }
}

.button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    max-width: fit-content;
    padding: var(--text-space-400) var(--text-space-600);
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    text-align: center;
    background-color: var(--clr-accent-300);
    color: var(--clr-neutral-100);
    border: var(--border-size) solid var(--clr-accent-300);
    border-radius: var(--border-radius);
    transition: background-color .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;

    &[data-type="border"] {
        background-color: transparent;
        color: var(--clr-accent-300);
        border-color: currentColor;
    }

    & .icon {
        translate: var(--text-space-100) 0;
    }

    &:focus-visible,
    &:hover,
    &:active {
        --outline-color: var(--clr-accent-400);
        background-color: var(--clr-accent-400);
        color: var(--clr-neutral-100);
        border-color: var(--clr-accent-400);
    }
}

.content-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--text-space-400);
}

.gap-small {
    gap: var(--text-space-200);
}

.gap-medium {
    gap: var(--text-space-600);
}

.gap-large {
    gap: var(--text-space-800)
}

.space-between {
    justify-content: space-between;
}

.justify-content-center {
    justify-content: center;
}

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

.even-columns {
    display: grid;

    /* >= 750px */
    @media (width >=46.875em) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.container-type-inline-size {
    container-type: inline-size;
}

.browser {
    --_browser-bg: var(--clr-neutral-700);
    --_ball-size: .75rem;
    --_ball-color: var(--clr-neutral-100);
    --_ball-gap: .5rem;
    --_padding: .71875rem;
    position: relative;
    padding-block-start: calc(var(--_ball-size) + var(--_padding) * 2);
    background-color: var(--_browser-bg);
    overflow: hidden;

    &::before,
    &::after {
        position: absolute;
        content: "";
        width: var(--_ball-size);
        height: var(--_ball-size);
        border-radius: 50%;
        background-color: var(--_ball-color);
        top: var(--_padding);
        right: var(--_padding);
    }

    &::after {
        right: calc(var(--_padding) + var(--_ball-size) + var(--_ball-gap));
        box-shadow: calc(var(--_ball-size) * -1 - var(--_ball-gap)) 0 0 var(--_ball-color);
    }
}

.ball {
    --_ball-size: calc(var(--ball-size, var(--fs-200)) + var(--line-size));
    --_ball-color: var(--clr-accent-400);
    width: var(--_ball-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--_ball-color);
}

.pill {
    display: inline-block;
    padding: var(--text-space-200) var(--text-space-400);
    border-radius: var(--border-radius-pill);
}

.tag-list {
    display: flex;
    align-content: start;
    flex-wrap: wrap;
    gap: var(--text-space-100);

    & > .tag {
        padding: var(--text-space-200) var(--text-space-400);
        font-size: var(--fs-300);
        font-weight: var(--fw-medium);
        line-height: 1.1;
        text-transform: uppercase;
        background-color: var(--clr-text-300);
        color: var(--clr-text-600);
        border-radius: var(--border-radius-pill);
    }
}

.divider {
    height: var(--space-600);
    clip-path: polygon(100% 0, 0 0, 100% 100%);

    /* >= 750px */
    @media (width >=46.875em) {
        height: var(--space-700);
    }

    &[data-type="invert"] {
        clip-path: polygon(0 100%, 0 0, 100% 100%);
    }

    &[data-type="triangle"] {
        clip-path: polygon(50% 100%, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

/* ---HEADER--- */
/* //////////////////////// */
@media (width < 46.875em) {
    body:has(.primary-nav-list[data-state="opened"]) {
        position: relative;

        &::before {
            position: absolute;
            content: "";
            inset: 0;
            transform-origin: right;
            background-color: hsl(from var(--clr-neutral-900) h s l / .6);
            z-index: 10;
            animation: beforeAnimation .3s ease-in-out forwards;
        }
    }
}

@keyframes beforeAnimation {
    0% {
        opacity: 0;
        scale: 0 1;
    }

    100% {
        opacity: 1;
        scale: 1 1;
    }
}

.primary-header {
    position: relative;
    color: var(--clr-text-600);
    border-block-end: 1px solid currentColor;
    z-index: 888;

    /* ---navigation--- */
    .primary-nav {

        .menu-toggle {
            padding: 1rem .5rem;
            background: none;
            border: none;
            cursor: pointer;

            @media (width >=46.875em) {
                display: none;
            }

            &[aria-expanded="true"] {
                & .hamburger {
                    rotate: 45deg;

                    &::before {
                        opacity: 0;
                    }

                    &::after {
                        rotate: -90deg;
                        translate: 0 calc(var(--_hamburger-bun-height) * -1);
                    }
                }
            }

            & > .hamburger {
                --_hamburger-bun-height: .25rem;
                display: block;
                background-color: var(--clr-neutral-800);
                width: 2rem;
                height: var(--_hamburger-bun-height);
                border-radius: var(--border-radius-pill);
                transition: all .3s ease-in-out, translate .3s ease-in-out;

                &::before,
                &::after {
                    content: "";
                    display: block;
                    font-size: inherit;
                    background-color: inherit;
                    height: inherit;
                    width: inherit;
                    border-radius: inherit;
                    transition: inherit;
                }

                &::before {
                    translate: 0 calc(var(--_hamburger-bun-height) * -2);
                }

                &::after {
                    translate: 0 var(--_hamburger-bun-height);
                }
            }
        }

        .primary-nav-list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--text-space-200) var(--text-space-300);
            font-weight: var(--fw-medium);

            & > li {
                transition: border-color .3s ease-in-out;

                @media (width >=46.875em) {
                    border-block-end: var(--line-size) solid transparent;

                    &:has(.nav-link:hover) {
                        border-color: var(--clr-accent-400);
                    }
                }

                & > .nav-link {
                    padding: var(--text-space-100);
                }

                & > .button {
                    padding: var(--text-space-200) var(--text-space-400);
                }
            }

            @media (width < 46.875em) {
                position: absolute;
                width: min(15em, 100%);
                top: 100%;
                right: 0;
                background-color: var(--clr-background-100);
                transform-origin: center right;
                animation-duration: .3s;
                animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
                animation-fill-mode: forwards;
                border: 1px solid currentColor;
                border-inline-end: none;

                & > li {
                    padding: calc(var(--outline-offset) * 2);
                    transition: background-color .3s ease-in-out;

                    & + li {
                        border-block-start: 1px solid currentColor;
                    }

                    & > .nav-link {
                        display: block;
                        padding-block: var(--text-space-400);
                        padding-inline: var(--text-space-500);
                        text-transform: uppercase;

                        /* &:hover,
                        &:focus-visible {
                            
                        } */
                    }

                    /* &:has(.nav-link:hover, .nav-link:focus-visible) {
                        background-color: var(--clr-background-200);
                    } */

                    & > .button {
                        margin-block: var(--text-space-400);
                        margin-inline: var(--text-space-500);
                        /* background-color: var(--clr-accent-100);
                        color: var(--clr-neutral-900); */

                        /* &:hover {
                            background-color: var(--clr-accent-200);
                        }

                        &:focus-visible {
                            --outline-color: var(--clr-neutral-100);
                            background-color: var(--outline-color);
                        } */
                    }
                }

                &[data-state="opened"] {
                    animation-name: menuAnimationOpen;
                    display: block;
                }

                &[data-state="closing"] {
                    animation-name: menuAnimationClosing;
                }

                &[data-state="closed"] {
                    display: none;
                }
            }
        }
    }
}

@keyframes menuAnimationOpen {
    0% {
        scale: .1 1;
        opacity: 0;
    }

    100% {
        scale: 1 1;
        opacity: 1;
    }
}

@keyframes menuAnimationClosing {
    100% {
        scale: .1 1;
        opacity: 0;
    }

    0% {
        scale: 1 1;
        opacity: 1;
    }
}

/* ---SECTIONS--- */
/* //////////////////////// */
/* ---hero--- */
.hero {
    isolation: isolate;

    p {
        max-width: 45ch;
        text-wrap: balance;
    }

    .hero__grid {
        display: grid;

        & > .hero__img-wrapper {
            position: relative;
            margin-block-start: var(--text-space-700);

            &::before {
                position: absolute;
                content: "";
                inset: 0;
                width: 50%;
                aspect-ratio: 1;
                margin-block: auto;
                margin-inline: auto;
                background-color: var(--clr-accent-100);
                border-radius: var(--border-radius);
                scale: 1.25;
                z-index: -1;
            }
        }

        /* >= 750px */
        @media (width >=46.875em) {
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: "title title" "title title" "body image";
            grid-template-rows: auto auto 1fr;
            column-gap: var(--space-400);

            & > h1 {
                grid-area: title;
            }

            & > .hero__body-wrapper {
                grid-area: body;
            }

            & > .hero__img-wrapper {
                grid-area: image;
                grid-row-start: 2;
                margin-block-start: var(--text-space-300);
            }
        }
    }
}

/* ---works--- */
/* .works {
    border-radius: 0 0 calc(var(--border-radius) * 4) calc(var(--border-radius) * 4);
} */

.work-list {
    grid-auto-rows: auto;
    container-type: inline-size;
    gap: var(--space-300);

    & > .card {
        --_card-bg: hsl(from var(--background-color) h s calc(l + 6));
        --_card-edge-space: var(--space-400);

        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 5;
        gap: var(--text-space-400);
        padding-block-end: var(--_card-edge-space);
        background-color: var(--_card-bg);
        border-radius: var(--border-radius);
        box-shadow: 0 0 .5rem hsl(from var(--background-color) h s 50% / .2);
        overflow: hidden;

        & > *:not(.card__img-wrapper) {
            margin-inline: var(--_card-edge-space);
        }

        & > .card__body {
            margin-block-end: var(--text-space-400);
        }

        &:has(:focus-visible) {
            outline-style: var(--outline-style);
            outline-offset: var(--outline-offset);
            outline-color: var(--clr-accent-400);
            outline-width: var(--outline-width);
        }
    }
}

/* ---profile--- */
.profile__grid {
    display: grid;
    gap: var(--text-space-600);

    /* >= 750px */
    @media (width >=46.875em) {
        grid-template-columns: auto fit-content(var(--body-max-width));
        justify-content: start;
    }
}

.profile__img-wrapper {
    --_img-shadow-color: var(--shadow-clr, var(--clr-accent-400));
    --_img-shadow-size: var(--shadow-size, var(--space-200));
    --_img-border-size: var(--border-size, 2px);
    padding-block-start: var(--_img-border-size);
    padding-block-end: var(--_img-shadow-size);
    padding-inline-start: var(--_img-shadow-size);
    padding-inline-end: var(--_img-border-size);

    & > img {
        border-radius: var(--border-radius);
        box-shadow: 0 0 0 var(--_img-border-size) var(--_img-shadow-color), calc(var(--_img-shadow-size) * -1) var(--_img-shadow-size) 0 var(--_img-shadow-color);
    }
}

/* ---skills--- */
/* .skills {
    border-radius: calc(var(--border-radius) * 4);
} */

.skill-list {
    --_grid-template-columns: auto 1fr;
    display: grid;
    grid-template-columns: var(--_grid-template-columns);
    align-items: center;
    gap: var(--text-space-200) var(--space-500);
    line-height: 1;

    /* >= 750px */
    @media (width >=46.875em) {
        grid-template-columns: repeat(2, var(--_grid-template-columns));
    }

    @container (width <=31.25em) {
        grid-template-columns: var(--_grid-template-columns);
    }

    & > li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        align-items: center;
        gap: var(--space-300);

        & > .skill-level {
            --_skill-progress-line-height: var(--line-size);
            position: relative;
            width: calc(100% - var(--ball-size));
            min-height: var(--_skill-progress-line-height);
            background-color: var(--clr-neutral-800);

            & > .ball {
                position: absolute;
                inset: 0 0 0 var(--_skill-progress, 0);
                translate: -50% calc(-50% + (var(--_skill-progress-line-height) / 2));
            }
        }
    }
}

/* ---experience--- */
.exp-list {

    /* >= 750px */
    @media (width >=46.875em) {
        --_exp-margin-left: var(--text-space-500);
        --_exp-timeline-border-width: var(--line-size, 2px);
        --_exp-timeline-border-clr: var(--clr-neutral-800);
        padding-block: var(--text-space-400);
        border-inline-start: var(--_exp-timeline-border-width) solid var(--_exp-timeline-border-clr);
    }

    & > li {
        --_exp-padding: var(--space-400);

        /* >= 750px */
        @media (width >=46.875em) {
            --_exp-bg-opacity: .4;
            position: relative;
            margin-inline-start: var(--_exp-margin-left);
            padding-block: var(--_exp-padding);
            padding-inline: var(--_exp-padding);
            background-image: linear-gradient(90deg, hsl(from var(--background-color) h s calc(l - 8) / var(--_exp-bg-opacity)), hsl(from var(--background-color) h s l / var(--_exp-bg-opacity)));
            border-radius: var(--border-radius);

            &::before {
                --_exp-ball-size: calc(var(--ball-size) + var(--line-size));
                --_exp-ball-color: var(--clr-accent-400);
                position: absolute;
                content: "";
                width: var(--_exp-ball-size);
                aspect-ratio: 1;
                left: calc(var(--_exp-margin-left) * -1 - var(--_exp-ball-size) / 2 - var(--_exp-timeline-border-width) / 2);
                border-radius: 50%;
                background-color: var(--_exp-ball-color);
            }
        }

        &:not(:last-of-type) {

            /* < 750px */
            @media (width < 46.875em) {
                padding-block-end: var(--_exp-padding);
            }
        }

        & + li {

            /* < 750px */
            @media (width < 46.875em) {
                padding-block-start: var(--_exp-padding);
                border-block-start: 1px solid hsl(from var(--background-color) h s calc(l - 8));
            }

            /* >= 750px */
            @media (width >=46.875em) {
                margin-block-start: var(--space-300);
            }
        }

        & > .exp-position,
        & > .exp-company {
            margin-block-start: var(--text-space-100);
        }

        & > p:first-of-type {
            margin-block-start: var(--text-space-400);
        }

    }
}

/* ---contact--- */
.contact__phone {
    --_phone-surface-bg: hsl(from var(--background-color) h s calc(l - 4));
    --_phone-width: 15rem;
    --_phone-height: calc(var(--_phone-width) * 1.8);
    --_phone-rotation: 10deg;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc((var(--_phone-height) * cos(var(--_phone-rotation))) + var(--_phone-width) * sin(var(--_phone-rotation)));
    isolation: isolate;

    &::after {
        position: absolute;
        content: "";
        width: max(calc(var(--_phone-width) * 1.4), 70%);
        aspect-ratio: 1;
        background-color: var(--_phone-surface-bg);
        border-radius: 50%;
        z-index: -1;
    }

    .phone {
        position: relative;
        display: grid;
        gap: .75rem;
        width: var(--_phone-width);
        height: var(--_phone-height);
        background-color: var(--clr-neutral-100);
        rotate: var(--_phone-rotation);
        border: 4px solid var(--clr-neutral-900);
        border-radius: 24px;

        & > .phone__camera {
            margin-inline: auto;
            margin-block-start: .5rem;

            &.ball {
                --_ball-color: var(--clr-neutral-900);
                align-self: start;
            }
        }

        & > .chat {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            align-content: center;
            gap: .5rem;
            width: 90%;
            margin-inline: auto;
            padding: .5rem;
            background-color: var(--clr-neutral-200);
            border-radius: var(--border-radius);

            &:nth-child(2n+1) {
                background-color: var(--clr-accent-100);

                & > .chat__text {

                    &:first-child {
                        grid-column: span 2;
                    }

                    &:last-child {
                        grid-column: span 2;
                    }
                }
            }

            &:nth-child(2n+2) {

                & > .chat__text {

                    &:nth-child(2) {
                        grid-column: span 2;
                    }

                    &:nth-child(3) {
                        grid-column: span 2;
                    }
                }
            }

            & > .chat__text {
                height: .5rem;
                background-color: var(--clr-neutral-600);
                border-radius: var(--border-radius-pill);
            }
        }

        & > .phone__bottom {
            width: 50%;
            height: .25rem;
            margin-inline: auto;
            margin-block: 1rem .5rem;
            background-color: var(--clr-neutral-800);
            border-radius: var(--border-radius-pill);
            align-self: end;
        }
    }
}

/* ---FOOTER--- */
/* //////////////////////// */
/* ---primary footer--- */
.primary-footer {
    font-size: var(--fs-footer);

    .footer-nav {

        .nav-link {

            &:focus-visible,
            &:hover,
            &:active {
                color: currentColor;
                text-decoration: underline;
            }
        }
    }
}

/* ---UTILITY CLASSES--- */
/* //////////////////////// */
.content-grid {
    /* Content max-width: 1200px */
    --_content-max-width: 75rem;
    --_padding-inline: 1.25rem;
    --_content-size: min(100% - var(--_padding-inline) * 2, var(--_content-max-width));
    /* breakout max-width: 1400px */
    --_breakout-max-width: 87.5rem;
    --_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);
    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--_padding-inline), 1fr) [breakout-start] minmax(0, var(--_breakout-size)) [content-start] var(--_content-size) [content-end] minmax(0, var(--_breakout-size)) [breakout-end] minmax(var(--_padding-inline), 1fr) [full-width-end];

    &,
    .full-width {
        & > :not(.breakout, .full-width) {
            grid-column: content;
        }
    }

    & > .breakout {
        grid-column: breakout;

        display: grid;
        grid-template-columns: minmax(var(--_padding-inline), var(--_breakout-size)) [content-start] var(--_content-size) [content-end] minmax(var(--_padding-inline), var(--_breakout-size));

        & > * {
            grid-column: content;
        }
    }


    & > .full-width {
        grid-column: full-width;

        display: grid;
        grid-template-columns: inherit;
    }
}

.text-white {
    color: var(--clr-white);
}

.text-100 {
    color: var(--clr-text-100);
}

.text-200 {
    color: var(--clr-text-200);
}

.text-300 {
    color: var(--clr-text-300);
}

.text-600 {
    color: var(--clr-text-600)
}

.text-700 {
    color: var(--clr-text-700)
}

.text-800 {
    color: var(--clr-text-800)
}

.text-900 {
    color: var(--clr-text-900)
}

.text-secondary-400 {
    color: var(--clr-background-200);
}

.text-primary-400 {
    color: var(--clr-primary-400);
}

.text-accent-400 {
    color: var(--clr-accent-400);
}

.text-black {
    color: var(--clr-black);
}

.bg-100 {
    --background-color: var(--clr-background-100);
    background-color: var(--background-color);
}

.bg-200 {
    --background-color: var(--clr-background-200);
    background-color: var(--background-color);
}

.bg-accent-100 {
    --background-color: var(--clr-accent-100);
    background-color: var(--background-color);
}

.bg-accent-400 {
    --background-color: var(--clr-accent-400);
    background-color: var(--background-color);
}

.bg-white {
    --background-color: var(--clr-white);
    background-color: var(--background-color);
}

.bg-neutral-100 {
    --background-color: var(--clr-neutral-100);
    background-color: var(--background-color);
}

.bg-neutral-200 {
    --background-color: var(--clr-neutral-200);
    background-color: var(--background-color);
}

.bg-neutral-300 {
    --background-color: var(--clr-neutral-300);
    background-color: var(--background-color);
}

.bg-neutral-700 {
    --background-color: var(--clr-neutral-700);
    background-color: var(--background-color);
}

.bg-neutral-800 {
    --background-color: var(--clr-neutral-800);
    background-color: var(--background-color);
}

.bg-neutral-900 {
    --background-color: var(--clr-neutral-900);
    background-color: var(--background-color);
}

.bg-black {
    --background-color: var(--clr-black);
    background-color: var(--background-color);
}

.ff-body {
    font-family: var(--ff-body);
}

.primary-heading {
    font-size: var(--fs-primary-heading);
}

.secondary-heading {
    font-size: var(--fs-secondary-heading);
}

.fs-900 {
    font-size: var(--fs-900);
}

.fs-800 {
    font-size: var(--fs-800);
}

.fs-700 {
    font-size: var(--fs-700);
}

.fs-600 {
    font-size: var(--fs-600);
}

.fs-500 {
    font-size: var(--fs-500);
}

.fs-400 {
    font-size: var(--fs-400);
}

.fs-300 {
    font-size: var(--fs-300);
}

.fs-200 {
    font-size: var(--fs-200);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: 600;
}

.fw-bold {
    font-weight: var(--fw-bold);
}

/* 750px */
@media (width >=46.875em) {
    .text-align-center {
        text-align: center;
    }
}

.uppercase {
    text-transform: uppercase;
}

.letter-spacing {
    letter-spacing: var(--letter-spacing, .15em);
}

.flow > * + * {
    margin-block-start: var(--flow-space, 1em);
}

.text-space-100 {
    margin-block: var(--text-space-100);
}

.text-space-200 {
    margin-block: var(--text-space-200);
}

.text-space-300 {
    margin-block: var(--text-space-300);
}

.text-space-400 {
    margin-block: var(--text-space-400);
}

.text-space-500 {
    margin-block: var(--text-space-500);
}

.text-space-600 {
    margin-block: var(--text-space-600);
}

.text-space-700 {
    margin-block: var(--text-space-700);
}

.text-space-800 {
    margin-block: var(--text-space-800);
}

.text-space-900 {
    margin-block: var(--text-space-900);
}

.text-space-100-start {
    margin-block-start: var(--text-space-100);
}

.text-space-200-start {
    margin-block-start: var(--text-space-200);
}

.text-space-300-start {
    margin-block-start: var(--text-space-300);
}

.text-space-400-start {
    margin-block-start: var(--text-space-400);
}

.text-space-500-start {
    margin-block-start: var(--text-space-500);
}

.text-space-600-start {
    margin-block-start: var(--text-space-600);
}

.text-space-700-start {
    margin-block-start: var(--text-space-700);
}

.text-space-800-start {
    margin-block-start: var(--text-space-800);
}

.text-space-900-start {
    margin-block-start: var(--text-space-900);
}

.text-space-100-end {
    margin-block-end: var(--text-space-100);
}

.text-space-200-end {
    margin-block-end: var(--text-space-200);
}

.text-space-300-end {
    margin-block-end: var(--text-space-300);
}

.text-space-400-end {
    margin-block-end: var(--text-space-400);
}

.text-space-500-end {
    margin-block-end: var(--text-space-500);
}

.text-space-600-end {
    margin-block-end: var(--text-space-600);
}

.text-space-700-end {
    margin-block-end: var(--text-space-700);
}

.text-space-800-end {
    margin-block-end: var(--text-space-800);
}

.text-space-900-end {
    margin-block-end: var(--text-space-900);
}

.padding-400 {
    padding: var(--space-400);
}

.padding-500 {
    padding: var(--space-500);
}

.padding-600 {
    padding: var(--space-600);
}

.padding-block-200 {
    padding-block: var(--space-200);
}

.padding-block-300 {
    padding-block: var(--space-300);
}

.padding-block-400 {
    padding-block: var(--space-400);
}

.padding-block-500 {
    padding-block: var(--space-500);
}

.padding-block-600 {
    padding-block: var(--space-600);
}

.padding-block-700 {
    padding-block: var(--space-700);
}

.padding-block-800 {
    padding-block: var(--space-800);
}

.padding-block-start-400 {
    padding-block-start: var(--space-400);
}

.padding-block-start-500 {
    padding-block-start: var(--space-500);
}

.padding-block-start-600 {
    padding-block-start: var(--space-600);
}

.padding-block-start-700 {
    padding-block-start: var(--space-700);
}

.padding-block-start-800 {
    padding-block-start: var(--space-800);
}

.padding-block-end-400 {
    padding-block-end: var(--space-400);
}

.padding-block-end-500 {
    padding-block-end: var(--space-500);
}

.padding-block-end-600 {
    padding-block-end: var(--space-600);
}

.padding-block-end-700 {
    padding-block-end: var(--space-700);
}

.padding-block-end-800 {
    padding-block-end: var(--space-800);
}

.margin-block-100 {
    margin-block: .5rem;
}

.margin-block-start-100 {
    margin-block-start: .5rem;
}

.margin-block-end-100 {
    margin-block-end: .5rem;
}

.margin-block-200 {
    margin-block: var(--space-200);
}

.margin-block-start-200 {
    margin-block-start: var(--space-200);
}

.margin-block-end-200 {
    margin-block-end: var(--space-200);
}

.margin-block-300 {
    margin-block: var(--space-300);
}

.margin-block-start-300 {
    margin-block-start: var(--space-300);
}

.margin-block-end-300 {
    margin-block-end: var(--space-300);
}

.margin-block-400 {
    margin-block: var(--space-400);
}

.margin-block-start-400 {
    margin-block-start: var(--space-400);
}

.margin-block-end-400 {
    margin-block-end: var(--space-400);
}

.margin-block-500 {
    margin-block: var(--space-500);
}

.margin-block-start-500 {
    margin-block-start: var(--space-500);
}

.margin-block-end-500 {
    margin-block-end: var(--space-500);
}

.margin-block-600 {
    margin-block: var(--space-600);
}

.margin-block-start-600 {
    margin-block-start: var(--space-600);
}

.margin-block-end-600 {
    margin-block-end: var(--space-600);
}

.margin-block-700 {
    margin-block: var(--space-700);
}

.margin-block-start-700 {
    margin-block-start: var(--space-700);
}

.margin-block-end-700 {
    margin-block-end: var(--space-700);
}

.margin-block-800 {
    margin-block: var(--space-800);
}

.margin-block-start-800 {
    margin-block-start: var(--space-800);
}

.margin-block-end-800 {
    margin-block-end: var(--space-800);
}

.margin-inline-auto {
    margin-inline: auto;
}

.display-block {
    display: block;
}

.border-radius {
    border-radius: var(--border-radius);
}