*,
:after,
:before,
::backdrop,
::file-selector-button {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit
}

*,
:after,
:before,
::backdrop,
::file-selector-button {
    box-sizing: border-box
}

ol,
ul,
menu {
    list-style: none
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block
}

img,
video {
    max-width: 100%;
    height: auto
}

a {
    text-decoration: none;
    color: inherit
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-Light.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-LightItalic.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-LightItalic.woff) format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-Regular.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-RegularItalic.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-RegularItalic.woff) format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-Medium.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-MediumItalic.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-MediumItalic.woff) format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-SemiBold.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-SemiBold.woff) format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-SemiBoldItalic.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-SemiBoldItalic.woff) format("woff");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-Bold.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-BoldItalic.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-BoldItalic.woff) format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-Heavy.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-Heavy.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DenimINK;
    src: url(/fonts/denim-ink/DenimINK-HeavyItalic.woff2) format("woff2"), url(/fonts/denim-ink/DenimINK-HeavyItalic.woff) format("woff");
    font-weight: 900;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Exposure;
    src: url(/fonts/exposure-30/205TF-Exposure-%5B-30%5D.woff2) format("woff2"), url(/fonts/exposure-30/205TF-Exposure-%5B-30%5D.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Exposure;
    src: url(/fonts/exposure-30/205TF-Exposure-%5B-30%5DItalic.woff2) format("woff2"), url(/fonts/exposure-30/205TF-Exposure-%5B-30%5DItalic.woff) format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

:root {
    --font-family-exposure: "Exposure", serif;
    --font-family-denim: "DenimINK", sans-serif;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-sea: #00d0ff;
    --color-sky: #a6ecff;
    --color-sunset: #f99f3f;
    --color-cloud: #ffcfcf;
    --color-meadow: #5bf6bb;
    --color-air: #EFFBFF;
    --color-chalky-blue: #46a9df;
    --color-medium-blue: #00b7e4;
    --color-bright-blue: #00c3f2;
    --color-purple: #ab88fb;
    --color-violet: #6c4df7;
    --color-dark-purple: #160f31;
    --color-orange: #e07300;
    --color-peach: #ffca9f;
    --color-yellow: #fcff41;
    --color-mustard: #ffdd33;
    --color-pink: #ff9bb2;
    --color-barbie-pink: #ff1476;
    --color-pink-red: #ff423b;
    --color-red: #d00000;
    --color-green: #46e7b4;
    --color-medium-green: #00c67a;
    --color-dark-green: #0e663b;
    --color-warm-green: #89d229;
    --color-lime-green: #aaff4e;
    --color-bone: #f5f9fa;
    --color-light-gray: #e8eff2;
    --color-medium-gray: #d0d6d7;
    --color-gray: #7e8486;
    --color-dark-gray: #434647;
    --color-charcoal: #1d1f20;
    --color-gray-10: #f5f9fa;
    --color-gray-50: #eef4f6;
    --color-gray-100: #e8eff2;
    --color-gray-150: #dfe5e7;
    --color-gray-200: #d0d6d7;
    --color-gray-300: #bec3c6;
    --color-gray-400: #9fa5a7;
    --color-gray-500: #7e8486;
    --color-gray-600: #595e5e;
    --color-gray-700: #434647;
    --color-gray-800: #2a2c2d;
    --color-gray-900: #1d1f20;
    --color-gray-950: #141515;
    --container-max-width: 1440px;
    --z-index-nav-menu: 100
}

::selection {
    background-color: var(--color-sea);
    color: var(--color-air)
}

button {
    color: inherit
}

.heading-with-icon {
    display: flex;
    align-items: center;
    gap: 10px
}

.heading-01 {
    font-family: var(--font-family-exposure);
    font-size: 72px;
    font-weight: 400;
    line-height: 1.1;
    @media (max-width: 800px) {
        font-size:48px
    }
}

.heading-01-blog {
    font-family: var(--font-family-exposure);
    font-size: 56px;
    font-weight: 400;
    line-height: 1.1;
    @media (max-width: 800px) {
        font-size:48px
    }
}

.heading-02 {
    font-family: var(--font-family-denim);
    font-size: 48px;
    font-weight: 400;
    line-height: 1
}

.heading-03 {
    font-family: var(--font-family-denim);
    font-size: 32px;
    font-weight: 400;
    line-height: 1
}

.heading-04 {
    font-family: var(--font-family-denim);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3
}

.body-01 {
    font-family: var(--font-family-denim);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3
}

.body-01-blog {
    font-family: var(--font-family-denim);
    font-size: 20px;
    font-weight: 400;
    line-height: 2
}

.body-02 {
    font-family: var(--font-family-denim);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3
}

.body-03 {
    font-family: var(--font-family-denim);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3
}

.legend-01 {
    font-family: var(--font-family-denim);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .48px
}

.legend-02 {
    font-family: var(--font-family-denim);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3
}

.subtitle-2 {
    font-family: var(--font-family-denim);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3
}

.button-02 {
    font-family: var(--font-family-denim);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3
}

p a,
.link {
    text-decoration: underline;
    text-underline-offset: 2px;
    &:hover:not(.icon-link) {
        color: var(--link-highlight-color, var(--color-medium-blue));
        text-decoration-thickness: 2px
    }
}

.icon-link svg {
    color: var(--color-gray);
    &:hover {
        opacity: .7
    }
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 0 80px;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    &.grid-wider-start {
        grid-template-columns: 3fr 2fr
    }
    @media (max-width: 800px) {
        grid-template-columns: 1fr;
        padding: 0 20px;
        &.grid-wider-start {
            grid-template-columns: 1fr
        }
    }
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--color-light-gray);
    background: transparent;
    transition: all .2s ease-out;
    color: var(--color-charcoal);
    &:hover {
        cursor: pointer;
        transition: none;
        background-color: var(--color-light-gray)
    }
    &.button-primary {
        background-color: var(--color-charcoal);
        border: 1px solid var(--color-charcoal);
        color: var(--color-white);
        &:hover {
            background-color: var(--color-dark-gray);
            border-color: var(--color-dark-gray)
        }
    }
    &.button-secondary {
        border: 1px solid var(--color-charcoal);
        color: var(--color-charcoal);
        &:hover {
            background-color: var(--color-charcoal);
            color: var(--color-white)
        }
    }
    &.button-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        padding: 0
    }
    &.button-space-icon {
        justify-content: space-between
    }
    &.button-full-width {
        width: 100%
    }
}

.gradient-hover-border {
    position: relative;
    border: var(--gb-border-width, 1px) solid var(--color-light-gray);
    &:after {
        content: "";
        position: absolute;
        inset: calc(var(--gb-border-width, 1px) * -1);
        border-radius: var(--gb-radius, 0);
        border: var(--gb-border-width, 1px) solid transparent;
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        opacity: 0
    }
    &.gb-gradient--sky-could-orange:after {
        background: linear-gradient(var(--gb-angle, 0deg), #9af1ff 12.49%, #ffcfcf 51.97%, #f99f3f 90.46%) border-box
    }
    &.gb-gradient--meadow-sea:after {
        background: linear-gradient(var(--gb-angle, 0deg), #5bf6bb 0%, #00dcff 71.91%) border-box
    }
    &:hover {
        &:after {
            opacity: 1
        }
    }
    &.gb--animate:after {
        animation: gb-rotate 5s linear infinite
    }
}

@property --gb-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes gb-rotate {
    to {
        --gb-angle: 360deg
    }
}

.device--mobile {
    display: none;
    @media (max-width: 800px) {
        display:inherit
    }
}

.device--desktop {
    display: none;
    @media (min-width: 800px) {
        display:inherit
    }
}

.image {
    border-radius: 24px
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%
}

body {
    overscroll-behavior: none;
    overflow-x: hidden;
    font-family: var(--font-family-denim), system-ui, sans-serif;
    font-weight: 400;
    color: var(--color-charcoal)
}