:root {
    /* colors */
    --primary: #e3eefc;
    --secondary: #000b1a;
    --tertiary: #2CB67D;
    --accent: #025DD4;
    --black: #000;
    --dark: #171B21;
    --gray4: #34383D;
    --gray3: #ACB4BF;
    --gray2: #DADFE5;
    --gray1: #EDEEF2;

    /* fonts */
    --ff-primary: 'EB Garamond', serif;
    --ff-secondary: 'Open Sans', sans-serif;

    --ff-head: var(--ff-primary);
    --ff-body: var(--ff-secondary);

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

    --fs-12: .75rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-21: 1.3125rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-36: 2.25rem;
    --fs-48: 3rem;
    --fs-60: 3.75rem;
    --fs-72: 4.5rem;

    /* Large Desktop Fonts */
    --fs-h1:var(--fs-72);
    --fs-h2:var(--fs-60);
    --fs-h3:var(--fs-48);
    --fs-p: var(--fs-24);
    --fs-s: var(--fs-21);
    --fs-nav: var(--fs-18);

    /* Spacing */
    --size-4: .25em;
    --size-8: .5em;
    --size-12: .75em;
    --size-16: 1em;
    --size-24: 1.5em;
    --size-32: 2em;
    --size-48: 3em;
    --size-64: 4em;
    --size-80: 5em;
    --size-96: 6em;
    --size-112: 7em;
    --size-128: 8em;
    --size-144: 9em;
    --size-160: 10em;

    /* Large Desktop Spacing */

    /* up and down */
    --vertical: var(--size-96);
    /* right and left */
    --horizontal: var(--size-144);

    --btn-size: .5em .75em;
}

/* Desktop */
@media (max-width: 90em) {
    :root {
        --fs-h1:var(--fs-60);
        --fs-h2:var(--fs-48);
        --fs-h3:var(--fs-36);
        --fs-p: var(--fs-18);
        --fs-s: var(--fs-16);
        --fs-nav: var(--fs-18);

        --vertical: var(--size-64);
        --horizontal: var(--size-80);

        --btn-size: var(--size-8) var(--size-12);
    }
}
/* Tablet */
@media (max-width: 62em) {
    :root {
        --fs-h1:var(--fs-48);
        --fs-h2:var(--fs-36);
        --fs-h3:var(--fs-30);
        --fs-p: var(--fs-16);
        --fs-s: var(--fs-12);
        --fs-nav: var(--fs-16);

        --vertical: var(--size-48);
        --horizontal: var(--size-64);
    }
}
/* Phone */
@media (max-width: 48em) {
    :root {
        --fs-h1:var(--fs-36);
        --fs-h2:var(--fs-30);
        --fs-h3:var(--fs-24);
        --fs-p: var(--fs-16);
        --fs-s: var(--fs-12);

        --vertical: var(--size-48);
        --horizontal: var(--size-32);

        --btn-size: .5em .75em;
    }
}


/* Utility classes */

/* text-color */
.color-primary {
    color: var(--primary);
}
.color-secondary {
    color: var(--secondary);
}
.color-tertiary {
    color: var(--tertiary);
}
.color-accent {
    color: var(--accent);
}
.color-black {
    color: var(--black);
}
.color-dark {
    color: var(--dark);
}
.color-gray4 {
    color: var(--gray4);
}
.color-gray3 {
    color: var(--gray3);
}
.color-gray2 {
    color: var(--gray2);
}
.color-gray1 {
    color: var(--gray1);
}

/* font-weight */
.fw-regular {
    font-weight: var(--fw-regular);
}
.fw-medium {
    font-weight: var(--fw-medium);
}
.fw-bold {
    font-weight: var(--fw-bold);
}

/* font-size */
.fs-h1 {
    font-family: var(--ff-head);
    font-size: var(--fs-h1);
    line-height: 110%;
}
.fs-lead_h1 {
    font-family: var(--ff-head);
    font-size: var(--fs-h1);
    line-height: 110%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fs-h2 {
    font-family: var(--ff-head);
    font-size: var(--fs-h2);
    line-height: 110%;
}
.fs-lead_h2 {
    font-family: var(--ff-head);
    font-size: var(--fs-h2);
    line-height: 110%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fs-h3 {
    font-family: var(--ff-head);
    font-size: var(--fs-h3);
    line-height: 110%;
}
.fs-lead_h3 {
    font-family: var(--ff-head);
    font-size: var(--fs-h3);
    line-height: 110%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fs-p {
    font-family: var(--ff-body);
    font-size: var(--fs-p);
    line-height: 140%;
}
.fs-lead_p {
    font-family: var(--ff-body);
    font-size: var(--fs-p);
    line-height: 140%;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.fs-s {
    font-family: var(--ff-body);
    font-size: var(--fs-s);
    line-height: 140%;
}
.fs-lead_s {
    font-family: var(--ff-body);
    font-size: var(--fs-s);
    line-height: 140%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fs-nav {
    font-family: var(--ff-body);
    font-size: var(--fs-nav);
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0.06em;
}

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

/* background-color */
.bg-primary {
    background-color: var(--primary);
}
.bg-secondary {
    background-color: var(--secondary);
}
.bg-tertiary {
    background-color: var(--tertiary);
}
.bg-accent {
    background-color: var(--accent);
}
.bg-black {
    background-color: var(--black);
}
.bg-dark {
    background-color: var(--dark);
}
.bg-gray4 {
    background-color: var(--gray4);
}
.bg-gray3 {
    background-color: var(--gray3);
}
.bg-gray2 {
    background-color: var(--gray2);
}
.bg-gray1 {
    background-color: var(--gray1);
}

/* Layout */

.even-columns {
    display: grid;
    gap: 1rem;
}

@media (min-width: 50em) {
.even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    }
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.container {
    padding: var(--vertical) var(--horizontal);
}

/* General Style */
body {
    font-size: var(--fs-p);
    font-family: var(--ff-body);
    color: var(--primary);
    background-color: var(--secondary);
}

/* Button Style */

/* cta */

.cta {
    display: flex;
    width: fit-content;
    align-items: center;
    padding: 0 1em;
    text-decoration: none;
    font-size: var(--fs-p);
    font-weight: bold;
    color: var(--secondary);
    background: var(--primary);
    transition: 1s;
    transform: skewX(-15deg);
}
.cta2 {
    display: flex;
    width: fit-content;
    align-items: center;
    padding: 0 1em;
    text-decoration: none;
    font-size: var(--fs-p);
    font-weight: bold;
    color: var(--primary);
    background: var(--secondary);
    transition: 1s;
    transform: skewX(-15deg);
}

.cta:focus, .cta2:focus {
   outline: none; 
}

.cta:hover, .cta2:hover {
    transition: 0.5s;
    box-shadow: 10px 10px 0 var(--accent);
}

.cta span:nth-child(2) {
    transition: 0.5s;
    margin-right: 0px;
}
.cta2 span:nth-child(2) {
    transition: 0.5s;
    margin-right: 0px;
}

.cta:hover  span:nth-child(2) {
    transition: 0.5s;
    margin-right: 45px;
}

.cta2:hover  span:nth-child(2) {
    transition: 0.5s;
    margin-right: 45px;
}

span {
    transform: skewX(15deg) 
}

span:nth-child(2) {
    width: 20px;
    margin-left: 30px;
    position: relative;
    top: 12%;
}
  
/**************SVG****************/
path {
    fill: var(--secondary);
}

.cta2 path {
    fill: var(--primary);
}

path.one {
    transition: 0.4s;
    transform: translateX(-60%);
}

path.two {
    transition: 0.5s;
    transform: translateX(-30%);
}

.cta:hover path.three {
    animation: color_anim 1s infinite 0.2s;
}

.cta:hover path.one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
}

.cta:hover path.two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
}
.cta2:hover path.three {
    animation: color_anim 1s infinite 0.2s;
}

.cta2:hover path.one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
}

.cta2:hover path.two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
}


/* SVG animations */

@keyframes color_anim {
    0% {
        fill: var(--accent);
    }
    50% {
        fill: var(--accent);
    }
    100% {
        fill: var(--primary);
    }
}