:root {
    --art-root-font-size: 10px;

    /* Fonts */
    --art-font-medium: "Artemis Medium";
    --art-font-regular: "Artemis Regular";
    --art-font-semibold: "Artemis SemiBold";

    --art-backend-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Spacing */
    --art-spacing-1: 0.1rem;
    --art-spacing-2: 0.2rem;
    --art-spacing-3: 0.3rem;
    --art-spacing-4: 0.4rem;
    --art-spacing-8: 0.8rem;
    --art-spacing-10: 1rem;
    --art-spacing-12: 1.2rem;
    --art-spacing-16: 1.6rem;
    --art-spacing-20: 2rem;
    --art-spacing-24: 2.4rem;
    --art-spacing-32: 3.2rem;
    --art-spacing-40: 4rem;
    --art-spacing-48: 4.8rem;
    --art-spacing-56: 5.6rem;
    --art-spacing-64: 6.4rem;
    --art-spacing-72: 7.2rem;
    --art-spacing-80: 8rem;
    --art-spacing-92: 9.2rem;
    --art-spacing-104: 10.4rem;
    --art-spacing-section: 12rem;
    --art-spacing-142: 14.2rem;
    --art-spacing-200: 20rem;

    --art-spacing-section-responsive: clamp(7.2rem, 0rem + 9.375vw, 12rem);
    --art-spacing-md: clamp(6.4rem, -0.8rem + 9.375vw, 11.2rem);

    /* Border Radius */
    --art-radius-round-subtle: 0.4rem;
    --art-radius-round-xs: 0.8rem;
    --art-radius-round-s: 1.2rem;
    --art-radius-round-m: 1.6rem;
    --art-radius-round-l: 3.2rem;
    --art-radius-round-100: 10rem;
    --art-radius-round-full: 999rem;

    /* Strokes */
    --art-stroke-thin: 1;
    --art-stroke-thick: 3;

    /* Font Sizes */
    /* You need to know the following. My root font size is 10px and my mobile size is 0px to 400px  also my desktop size is 1200px */
    --art-font-size-display: clamp(4.4rem, -3.7778rem + 10.6481vw, 9rem);
    --art-font-size-h1: clamp(3.6rem, 0.0444rem + 4.6296vw, 5.6rem);
    --art-font-size-h2: clamp(2.6rem, -0.2444rem + 3.7037vw, 4.2rem);
    --art-font-size-h3: clamp(2.6rem, 1.8889rem + 0.9259vw, 3rem);
    --art-font-size-body-lg: clamp(1.8rem, 1.436rem + 0.463vw, 2rem);
    --art-font-size-body-md: 1.8rem;
    --art-font-size-body-sm: 1.6rem;
    --art-font-size-body-xs: 1.4rem;
    --art-font-size-body-xxs: 1.2rem;

    /* Fixed font sizes */
    --art-body-18: 18px;
    --art-body-16: 16px;
    --art-body-14: 14px;
    --art-body-12: 12px;

    /* Line Heights */
    --art-line-height-display: clamp(5.4rem, -1.8889rem + 9.4907vw, 9.5rem);
    --art-line-height-h1: clamp(4.8rem, 1.6rem + 4.1667vw, 6.6rem);
    --art-line-height-h2: clamp(3.4rem, -0.3333rem + 4.8611vw, 5.5rem);
    --art-line-height-h3: clamp(2.6rem, 1.8889rem + 0.9259vw, 3rem);
    --art-line-height-body-md: 2.8rem;
    --art-line-height-body-sm: 2.4rem;
    --art-line-height-body-xs: 2.2rem;
    --art-line-height-body-xxs: 1.8rem;

    --art-container-width: 1440px;
    --art-sm-container-width: 1116px;

    --art-letter-spacing-display: -1.28px;
}

.backdrop-filter {
    backdrop-filter: blur(4px);
}

.backdrop-filter-1 {
    backdrop-filter: blur(1px);
}

.box-effect {
    transition: all 277ms linear;
}

.box-effect:hover {
    backdrop-filter: blur(7px);
    bottom: 32px;
    transition: all 277ms linear;
    background-color: rgba(32, 30, 30, 0.75);

    .title,
    [class="gb-shape"] svg {
        color: var(--yellow-dark);
    }
}

.editor-styles-wrapper.block-editor-writing-flow {
    background: #ffffff;
}

.art-shadow-medium {
    backdrop-filter: blur(7.052774429321289px);
}

.art-shadow-apps {
    backdrop-filter: blur(20.665250778198242px);
}
.art-shadow-apps-sm {
    backdrop-filter: blur(13.259573936462402px);
    border: 1px solid #f6f7f8;
    box-shadow: 0 13.821px 27.642px 0 rgba(155, 150, 150, 0.12);
}

.art-box-shadow-16 {
    backdrop-filter: blur(0.1px);
}

html {
    font-size: var(--art-root-font-size);
}
.art-footer p {
    margin-bottom: 0;
}
h1 {
    font-family: var(--art-font-semibold) !important;
    font-size: var(--art-font-size-h1);
    line-height: var(--art-line-height-h1);
    color: var(--black-primary);
    /* letter-spacing: -0.96px; */
}

h2 {
    font-family: var(--art-font-semibold) !important;
    font-size: var(--art-font-size-h2);
    line-height: var(--art-line-height-h2);
    color: var(--black-primary);
    /* letter-spacing: -0.72px; */
}

h3 {
    font-family: var(--art-font-semibold) !important;
    font-size: var(--art-font-size-h3);
    line-height: var(--art-line-height-h3);
    color: var(--black-primary);
    /* letter-spacing: -0.6px; */
}

h4,
h5,
h6 {
    font-family: var(--art-font-semibold) !important;
    font-size: var(--art-font-size-body-lg);
    line-height: var(--art-line-height-body-lg);
    color: var(--black-primary);
}

p,
ul li,
ol li {
    font-family: var(--art-font-regular);
    margin: 0;
    font-size: var(--art-body-16);
    line-height: var(--art-line-height-body-md);
    color: var(--black-700);
}

body :where(.editor-styles-wrapper) p {
    margin-bottom: 0;
}