@font-face {
    font-family: 'Gotham';
    src: url('../fonts/GothamBook.woff2') format('woff2'),
        url('../fonts/GothamBook.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/GothamBook-Italic.woff2') format('woff2'),
        url('../fonts/GothamBook-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'Funnel Display';
    src: url('../fonts/FunnelDisplay-Light.woff2') format('woff2'),
        url('../fonts/FunnelDisplay-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Funnel Display';
    src: url('../fonts/FunnelDisplay-Regular.woff2') format('woff2'),
        url('../fonts/FunnelDisplay-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Funnel Display';
    src: url('../fonts/FunnelDisplay-Medium.woff2') format('woff2'),
        url('../fonts/FunnelDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Funnel Display';
    src: url('../fonts/FunnelDisplay-SemiBold.woff2') format('woff2'),
        url('../fonts/FunnelDisplay-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root{
    --font-primary: 'Gotham', sans-serif;
    --font-secondary: 'Funnel Display', sans-serif;
    --container-max-width: 1440px;
    --container-padding: 2rem;

    /* Denim Blue */
    --color-blue-200: #E6E8EA;
    --color-blue-300: #CED3D6;
    --color-blue-400: #5D6B75;
    --color-blue-500: #293C4B;
    --color-blue-600: #1C2A34;
    --color-blue-700: #11171C;
    --color-blue-800: #0E1316;

    /* Hunter Green */
    --color-green-200: #E0E4DE;
    --color-green-300: #DAE1D5;
    --color-green-400: #839C77;
    --color-green-500: #63814A;
    --color-green-600: #425C37;
    --color-green-700: #222D1C;
    --color-green-800: #1A2217;

    /* Oslo Gray */
    --color-gray-200: #F0F0F1;
    --color-gray-300: #E1E2E3;
    --color-gray-400: #9C9FA2;
    --color-gray-500: #808589;
    --color-gray-600: #5B5F62;
    --color-gray-700: #2D2F2F;
    --color-gray-800: #222324;
    --color-gray-800: #222324;

    /* Dawn Pink */
    --color-pink-200: #FDFDFC;
    --color-pink-300: #FCFAF8;
    --color-pink-400: #F4EFEA;
    --color-pink-500: #F2EBE4;
    --color-pink-600: #BAB4AE;
    --color-pink-700: #565351;
    --color-pink-800: #3F3D3C;

    /* Neutral */
    --color-neutral-200: #F0F0F0;
    --color-neutral-300: #D4D4D4;
    --color-neutral-400: #AAAAAA;
    --color-neutral-500: #757676;
    --color-neutral-600: #191A1B;
    --color-neutral-700: #191A1B;
    --color-neutral-800: #060708;

    /* Extra colors */
    --color-cream-400: #D9B9BB;
    --color-purple-300: #C7B9DA;
    --color-purple-500: #8E7CA9;
}

@media screen and (max-width: 575px) {
    :root {
        --container-lr-padding: 0.85rem;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    :root {
        --container-lr-padding: 1.25rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --container-lr-padding: 2rem;
    }
}

html, body{
    background-color: var(--color-pink-300);
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-blue);
    font-optical-sizing: auto;
    font-style: normal;
    -moz-font-feature-settings: "kern";
    font-feature-settings: "kern";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 0px !important; /* Fixes a bug when a Bootstrap modal opens */
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-blue-500) !important;
    margin-bottom: 1rem;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{
    font-family: var(--font-secondary);
    font-weight: 400;
    color: var(--color-green-500);
}

a{
    color: var(--color-green-500);
}

ul.checked-list{
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 28px;
}
ul.checked-list > li{
    position: relative;
    display: flex;
    color: var(--color-blue-500);
    font-size: 1.25rem;
    font-weight: 300;
    margin-bottom: 28px;
}
ul.checked-list > li::before{
    content: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.5 7.5L8.75 21.25L2.5 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M27.5 12.5L18.125 21.875L16.25 20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    position: relative;
    display: inline-block;
    margin-right: 21px;
    width: 30px;
    height: 30px;
    filter: brightness(0) saturate(100%) invert(46%) sepia(11%) saturate(1285%) hue-rotate(50deg) brightness(98%) contrast(96%);
}
ul.checked-list > li:last-child{
    margin-bottom: 0;
}

.container-fluid{
    max-width: var(--container-max-width);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.btn{
    font-size: 1rem;
    font-weight: 500;
    --bs-btn-padding-x: 1.187rem;
    text-decoration: none;
    padding-top: 10px;
    padding-bottom: 10px;
}

.btn-success{
    --bs-btn-color: var(--color-pink-500);
    --bs-btn-bg: var(--color-green-500);
    --bs-btn-border-color: var(--color-green-500);
    --bs-btn-hover-color: var(--color-pink-500);
    --bs-btn-hover-bg: var(--color-green-600);
    --bs-btn-hover-border-color: var(--color-green-600);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: var(--color-pink-500);
    --bs-btn-active-bg: var(--color-green-600);
    --bs-btn-active-border-color: var(--color-green-600);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-pink-300);
    --bs-btn-disabled-bg: var(--color-green-300);
    --bs-btn-disabled-border-color: var(--color-green-300);
}

.btn-primary{
    --bs-btn-color: var(--color-pink-500);
    --bs-btn-bg: var(--color-blue-500);
    --bs-btn-border-color: var(--color-blue-500);
    --bs-btn-hover-color: var(--color-pink-500);
    --bs-btn-hover-bg: var(--color-blue-600);
    --bs-btn-hover-border-color: var(--color-blue-600);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: var(--color-pink-500);
    --bs-btn-active-bg: var(--color-blue-600);
    --bs-btn-active-border-color: var(--color-blue-600);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-pink-300);
    --bs-btn-disabled-bg: var(--color-blue-300);
    --bs-btn-disabled-border-color: var(--color-green-300);
}

.btn-link{
    --bs-btn-color: var(--color-blue-500);
    --bs-btn-bg: none;
    --bs-btn-border-color: none;
    --bs-btn-hover-color: var(--color-blue-400);
    --bs-btn-hover-bg: none;
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--color-blue-600);
    --bs-btn-active-bg: none;
    --bs-btn-active-border-color: none;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--color-blue-200);
    --bs-btn-disabled-bg: none;
    --bs-btn-disabled-border-color: none;
}

.bg-primary {
    background-color: var(--color-blue-500) !important;
}

.text-primary{
    color: var(--color-blue-500) !important;
}

.text-success{
    color: var(--color-green-500) !important;
}

.text-secondary{
    color: var(--color-gray-500) !important;
}

.text-light{
    color: var(--color-gray-300) !important;
}

.text-light span{
    color: var(--color-gray-300) !important;
}

.bg-light{
    background-color: var(--color-pink-400) !important;
}

.border-light{
    border-color: var(--color-pink-400) !important;
}

.border-secondary{
    border-color: var(--color-gray-400) !important;
}
.font-secondary{
    font-family: var(--font-secondary) !important;
}

.border-gray{
    border-color: var(--color-gray-500) !important;
}

.picture{
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
}
.picture img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* animations */
@keyframes float {
    0% {
        transform: translatey(0px)
    }

    50% {
        transform: translatey(-15px)
    }

    100% {
        transform: translatey(0px)
    }
}
@keyframes slideA {
    0% {
        transform: translatex(0px)
    }

    50% {
        transform: translatex(-10px)
    }

    100% {
        transform: translatex(0px)
    }
}
@keyframes slideB {
    0% {
        transform: translatex(0px)
    }

    50% {
        transform: translatex(10px)
    }

    100% {
        transform: translatex(0px)
    }
}
.example_element{
    animation: float 6s ease-in-out infinite;
}
.floating-svg{
    animation: float 6s ease-in-out infinite;
}