:root {
    --clr-white: hsl(0, 0%, 100%);
    --clr-neutral-100: hsl(216, 24%, 96%);
    --clr-neutral-200: hsl(217, 23%, 89%);
    --clr-neutral-300: hsl(218, 23%, 84%);
    --clr-neutral-700: hsl(218, 24%, 20%);
    --clr-neutral-800: hsl(215, 23%, 16%);
    --clr-neutral-900: hsl(219, 23%, 12%);
    --clr-black: hsl(0, 0%, 0%);

    --clr-primary-600: hsl(229, 12%, 28%);
    --clr-primary-700: hsl(228, 12%, 24%);
    --clr-primary-800: hsl(229, 12%, 17%);

    --clr-accent-400: hsl(195, 100%, 28%);

    --ff-primary: system-ui, sans-serif;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

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

    --fs-200: 1rem;
    --fs-300: clamp(1rem, 0.191vw + 0.962rem, 1.125rem);
    --fs-400: clamp(1.125rem, 0.382vw + 1.049rem, 1.375rem);
    --fs-700: clamp(2.0275rem, 3.317vw + 1.364rem, 4.19625rem);
    --fs-800: clamp(2.280625rem, 4.534vw + 1.374rem, 5.245rem);

    --fs-footer: var(--fs-200);
    --fs-body: var(--fs-400);
    --fs-button: var(--fs-400);
    --fs-primary-heading: var(--fs-800);
    --fs-secondary-heading: var(--fs-700);

    --size-400: 1rem;
    --size-500: 2.5rem;
    --size-800: clamp(4rem, 3.824vw + 2.776rem, 8rem);
}

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

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

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

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

h1,
h2 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

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

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

/* ---GENERAL STYLING--- */
/* //////////////////////// */
*:focus-visible {
    outline-style: double;
    outline-color: black;
    outline-width: 0.5625rem;
    box-shadow: 0 0 0 0.375rem white;
}

body {
    font-family: var(--ff-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: 1.5;
    background-color: var(--clr-neutral-100);
    color: var(--clr-primary-700);
}

@media only screen and (min-width: 700px) {
    body {
        text-align: center;
    }
}

h1,
h2 {
    margin-block-end: 0.5em;
    font-family: var(--ff-heading);
    line-height: 1.1;
}

a:not([class]):where(:hover, :focus) {
    text-decoration-thickness: 0.25rem;
    text-decoration-color: var(--clr-accent-400);
    text-underline-offset: 0.25rem;
}

.button {
    text-decoration: none;
    display: inline-flex;
    padding: 1.2em 2em 1.25em;
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    line-height: 1;
    text-align: center;
    background-color: var(--clr-accent-400);
    color: var(--clr-neutral-100);
    transition: background-color 0.3s linear, color 0.3s linear;
}

.button:where(:hover, :focus-visible) {
    background-color: var(--clr-neutral-100);
    color: var(--clr-primary-700);
}

/* ---HEADER--- */
/* //////////////////////// */
/* ---primary header--- */
.primary-header p {
    text-wrap: balance;
    margin-block-end: 2em;
}

@media only screen and (min-width: 700px) {
    .primary-header p {
        margin-inline: auto;
        max-width: 50ch;
    }
}

/* ---SECTION--- */
/* //////////////////////// */
/* ---services--- */
.services-list {
    display: inline-block;
    margin-block-start: .5em;
    margin-block-end: 0;
    text-align: start;
}

.services-list li {
    padding-inline-start: 0.5rem;
}

.services-list li::marker {
    content: '\29C9';
    font-size: 0.8em;
    color: var(--clr-accent-400);
}

/* ---works--- */
.works-figure-wrapper {
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: end;
    gap: clamp(1.5rem, 1.53vw + 1.194rem, 2.5rem);
}

.works-figure-wrapper figure {
    --_figure-padding: var(--size-400);
    margin: 0;
    max-width: calc(var(--_img-width, auto) + var(--_figure-padding, 1rem) * 2);
    padding: var(--_figure-padding, 1rem);
    background-color: var(--clr-neutral-100);
    box-shadow: 0em 0.136em 0.364em var(--clr-neutral-300, hsla(0, 0%, 0%, 0.1));
}

.works-figure-wrapper figure figcaption {
    padding: var(--size-400, 1rem);
    font-size: var(--fs-300);
    text-wrap: balance;
}

@media only screen and (min-width: 700px) {
    .works-figure-wrapper {
        grid-template-columns: repeat(2, auto);
    }
}

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

.primary-footer .primary-footer-wrapper {
    display: flex;
    justify-content: space-between;
    gap: var(--size-500);
}

@media only screen and (max-width: 700px) {
    .primary-footer .primary-footer-wrapper {
        flex-direction: column;
    }
}

/* ---UTILITY CLASSES--- */
/* //////////////////////// */
.wrapper {
    --_max-width: 75rem;
    /* 1000px = 62.5rem | 1200px = 75rem */
    --_wrapper-padding-inline: 1.25rem;
    width: min(100% - (var(--_wrapper-padding-inline) * 2), var(--_max-width));
    margin-inline: auto;
}

.display-none {
    display: none;
}

@media only screen and (max-width: 700px) {
    .display-none {
        display: block;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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