:root {
    --background-color: rgb(89 207 214 / 100%);
    --menu-100-background-color: hsl(183.36deg 60.38% 50%);
    --menu-80-background-color: hsl(183.36deg 60.38% 60%);
    --menu-60-background-color: hsl(183.36deg 60.38% 70%);
    --menu-40-background-color: hsl(183.36deg 60.38% 80%);
    --menu-20-background-color: hsl(183.36deg 60.38% 90%);
    --menu-0-background-color: hsl(183.36deg 60.38% 100%);
    --aquamarine-blue-50: #f0fbfa;
    --aquamarine-blue-100: #d8f5f4;
    --aquamarine-blue-200: #b6ebeb;
    --aquamarine-blue-300: #83dadd;
    --aquamarine-blue-400: #67ccd0;
    --aquamarine-blue-500: #2ea6ac;
    --aquamarine-blue-600: #298791;
    --aquamarine-blue-700: #276e77;
    --aquamarine-blue-800: #275a63;
    --aquamarine-blue-900: #254b54;
    --aquamarine-blue-950: #143138;
    --venice-blue-50: #f3f8fc;
    --venice-blue-100: #e5f0f9;
    --venice-blue-200: #c5e0f2;
    --venice-blue-300: #93c6e6;
    --venice-blue-400: #59a9d7;
    --venice-blue-500: #338fc4;
    --venice-blue-600: #2372a6;
    --venice-blue-700: #1e5c87;
    --venice-blue-800: #1c4e70;
    --venice-blue-900: #1d425d;
    --venice-blue-950: #132b3e;
    --dodger-blue-50: #eefaff;
    --dodger-blue-100: #daf3ff;
    --dodger-blue-200: #bdebff;
    --dodger-blue-300: #8fe0ff;
    --dodger-blue-400: #5accff;
    --dodger-blue-500: #34b1fd;
    --dodger-blue-600: #2196f3;
    --dodger-blue-700: #167bdf;
    --dodger-blue-800: #1863b5;
    --dodger-blue-900: #1a548e;
    --dodger-blue-950: #153456;
    --tree-poppy-50: #fffbea;
    --tree-poppy-100: #fff2c5;
    --tree-poppy-200: #ffe585;
    --tree-poppy-300: #ffd146;
    --tree-poppy-400: #ffbc1b;
    --tree-poppy-500: #ff9800;
    --tree-poppy-600: #e27100;
    --tree-poppy-700: #bb4c02;
    --tree-poppy-800: #983a08;
    --tree-poppy-900: #7c300b;
    --tree-poppy-950: #481700;
    --violet-red-50: #fdf2f7;
    --violet-red-100: #fce7f2;
    --violet-red-200: #fbcfe6;
    --violet-red-300: #f8a9d0;
    --violet-red-400: #f373b0;
    --violet-red-500: #ea428d;
    --violet-red-600: #da286f;
    --violet-red-700: #bd1955;
    --violet-red-800: #9c1847;
    --violet-red-900: #82193e;
    --violet-red-950: #4f0821;
    --azalea-50: #fdf2f7;
    --azalea-100: #fbe8f1;
    --azalea-200: #f9c8de;
    --azalea-300: #f7aacb;
    --azalea-400: #f175a7;
    --azalea-500: #e84c86;
    --azalea-600: #d62c64;
    --azalea-700: #ba1c4b;
    --azalea-800: #9a1a3f;
    --azalea-900: #801b38;
    --azalea-950: #4e091c;
    --tuscany-50: #fcf7ee;
    --tuscany-100: #f5e8d0;
    --tuscany-200: #ebcd9c;
    --tuscany-300: #e0af69;
    --tuscany-400: #d99746;
    --tuscany-500: #d07830;
    --tuscany-600: #be5f29;
    --tuscany-700: #994324;
    --tuscany-800: #7d3523;
    --tuscany-900: #672e20;
    --tuscany-950: #3a150e;
    --wewak-50: #fff1f3;
    --wewak-100: #ffe4e8;
    --wewak-200: #fecdd6;
    --wewak-300: #fca2b3;
    --wewak-400: #fa728f;
    --wewak-500: #f2416b;
    --wewak-600: #df1f56;
    --wewak-700: #bc1448;
    --wewak-800: #9e1343;
    --wewak-900: #87143f;
    --wewak-950: #4b061e;
    --can-can-50: #fbf5f5;
    --can-can-100: #f8ebec;
    --can-can-200: #f1dadd;
    --can-can-300: #e6bbc0;
    --can-can-400: #d897a1;
    --can-can-500: #c56e7e;
    --can-can-600: #ae5066;
    --can-can-700: #913f54;
    --can-can-800: #7a374a;
    --can-can-900: #6a3144;
    --can-can-950: #3a1721;
    --pink-50: #fdf3f5;
    --pink-100: #fae9ec;
    --pink-200: #f5d6dc;
    --pink-300: #efbac6;
    --pink-400: #e3899f;
    --pink-500: #d45f7f;
    --pink-600: #bf3f68;
    --pink-700: #a03057;
    --pink-800: #862b4d;
    --pink-900: #742747;
    --pink-950: #401123;
    --humming-bird-50: #f1fcfb;
    --humming-bird-100: #d2f9f5;
    --humming-bird-200: #9ef1ea;
    --humming-bird-300: #65e3dd;
    --humming-bird-400: #36cbc8;
    --humming-bird-500: #1dafaf;
    --humming-bird-600: #148b8d;
    --humming-bird-700: #146f71;
    --humming-bird-800: #15575a;
    --humming-bird-900: #16494b;
    --humming-bird-950: #062a2d;
    --alizarin-crimson-50: #fef2f2;
    --alizarin-crimson-100: #fee2e2;
    --alizarin-crimson-200: #fecaca;
    --alizarin-crimson-300: #fda4a4;
    --alizarin-crimson-400: #f97070;
    --alizarin-crimson-500: #f04343;
    --alizarin-crimson-600: #df3030;
    --alizarin-crimson-700: #ba1b1b;
    --alizarin-crimson-800: #9a1a1a;
    --alizarin-crimson-900: #801c1c;
    --alizarin-crimson-950: #450a0a;
    --regal-blue-50: #f0f7ff;
    --regal-blue-100: #e0effe;
    --regal-blue-200: #badefd;
    --regal-blue-300: #7dc5fc;
    --regal-blue-400: #38a7f8;
    --regal-blue-500: #0e8ce9;
    --regal-blue-600: #026ec7;
    --regal-blue-700: #0357a1;
    --regal-blue-800: #074b85;
    --regal-blue-900: #0d4375;
    --regal-blue-950: #082849;
    --color-primary-50: var( --venice-blue-50);
    --color-primary-100: var(--venice-blue-100);
    --color-primary-200: var(--venice-blue-200);
    --color-primary-300: var(--venice-blue-300);
    --color-primary-400: var(--venice-blue-400);
    --color-primary-500: var(--venice-blue-500);
    --color-primary-600: var(--venice-blue-600);
    --color-primary-700: var(--venice-blue-700);
    --color-primary-800: var(--venice-blue-800);
    --color-primary-900: var(--venice-blue-900);
    --color-primary-950: var(--venice-blue-950);
    --color-secondary-50: var( --tree-poppy-50);
    --color-secondary-100: var(--tree-poppy-100);
    --color-secondary-200: var(--tree-poppy-200);
    --color-secondary-300: var(--tree-poppy-300);
    --color-secondary-400: var(--tree-poppy-400);
    --color-secondary-500: var(--tree-poppy-500);
    --color-secondary-600: var(--tree-poppy-600);
    --color-secondary-700: var(--tree-poppy-700);
    --color-secondary-800: var(--tree-poppy-800);
    --color-secondary-900: var(--tree-poppy-900);
    --color-secondary-950: var(--tree-poppy-950);
    --font-color-secondary: var(--tree-poppy-950);
    --font-color-ternitary: #546D87;
    --font-color-quadrinary: #293B4E;
    --bg-color-primary: var(--wewak-50);
    --bg-color-secondary: var(--tree-poppy-500);
    --bg-color-ternitary: #FFFFFF;
    --bg-color-quadrinary: #EEF5FD;
}

.text-color-primary-0 {
    color: white !important;
}

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

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

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

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

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

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

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

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

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

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

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

.bg-color-primary-0 {
    background-color: white !important;
}

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

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

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

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

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

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

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

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

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

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

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

.border-color-primary-50 {
    border-color: var(--color-primary-50) !important;
}

.border-color-primary-100 {
    border-color: var(--color-primary-100) !important;
}

.border-color-primary-200 {
    border-color: var(--color-primary-200) !important;
}

.border-color-primary-300 {
    border-color: var(--color-primary-300) !important;
}

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

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

.border-color-primary-600 {
    border-color: var(--color-primary-600) !important;
}

.border-color-primary-700 {
    border-color: var(--color-primary-700) !important;
}

.border-color-primary-800 {
    border-color: var(--color-primary-800) !important;
}

.border-color-primary-900 {
    border-color: var(--color-primary-900) !important;
}

.border-color-primary-950 {
    border-color: var(--color-primary-950) !important;
}


.text-color-secondary-50 {
    color: var(--color-secondary-50);
}

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

.text-color-secondary-200 {
    color: var(--color-secondary-200);
}

.text-color-secondary-300 {
    color: var(--color-secondary-300);
}

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

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

.text-color-secondary-600 {
    color: var(--color-secondary-600);
}

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

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

.text-color-secondary-900 {
    color: var(--color-secondary-900);
}

.text-color-secondary-950 {
    color: var(--color-secondary-950);
}


.bg-color-secondary-50 {
    background-color: var(--color-secondary-50);
}

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

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

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

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

.bg-color-secondary-500 {
    background-color: var(--color-secondary-500);
}

.bg-color-secondary-600 {
    background-color: var(--color-secondary-600);
}

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

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

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

.bg-color-secondary-950 {
    background-color: var(--color-secondary-950);
}

.border-color-secondary-50 {
    border-color: var(--color-secondary-50);
}

.border-color-secondary-100 {
    border-color: var(--color-secondary-100);
}

.border-color-secondary-200 {
    border-color: var(--color-secondary-200);
}

.border-color-secondary-300 {
    border-color: var(--color-secondary-300);
}

.border-color-secondary-400 {
    border-color: var(--color-secondary-400);
}

.border-color-secondary-500 {
    border-color: var(--color-secondary-500);
}

.border-color-secondary-600 {
    border-color: var(--color-secondary-600);
}

.border-color-secondary-700 {
    border-color: var(--color-secondary-700);
}

.border-color-secondary-800 {
    border-color: var(--color-secondary-800);
}

.border-color-secondary-900 {
    border-color: var(--color-secondary-900);
}

.border-color-secondary-950 {
    border-color: var(--color-secondary-950);
}


html {
    height: 100%;
    overflow: auto;
}

header:focus {
    outline: none;
}

body {
    font-family: 'Noto Sans','Roboto', Arial, 'Arial Unicode MS', Helvetica, sans-serif;
    font-size: 14px;
    height: auto;
    min-height: 100%;
    overflow: hidden;
    position: relative;
}

section {
    scroll-margin-top: 3rem;
}

p {
    word-wrap: break-word;
}

img {
    height: auto;
}

.scroll-to-top-visible {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1300;
}

.top-menu-btn-support-us {
    text-wrap-mode: nowrap;
    background-color: var(--color-secondary-500);
    color: var(--color-secondary-50);
    border-color: var(--color-secondary-500);
    border-radius: 4px !important;
    margin-right: 20px;
}

    .top-menu-btn-support-us:hover {
        background-color: var(--color-secondary-600);
        color: var(--color-secondary-50);
        border-color: var(--color-secondary-700);
    }

.top-menu-logo-text {
    font-family: 'Sriracha';
    font-weight: normal;
}

.top-menu-logo {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}

a.top-menu-logo:hover .top-menu-logo-text {
    text-decoration: none;
}

.home-page-icon-pets {
    position: absolute;
    z-index: 0;
    bottom: -25rem;
    left: -35rem;
    font-size: 80rem;
    opacity: 0.5;
    transform: rotate(30deg);
}

.home-page-text-content {
    z-index: 10;
    margin-top: 80px;
}

.home-page-main-text {
    z-index: 10;
    font-weight: bold;
    letter-spacing: -2px;
    line-height: 3.8rem;
    font-size: 3.6rem;
    margin-bottom: 48px;
    margin-top: 20px;
}

.home-page-grid {
    width: calc(100% + 48px);
    margin-left: -24px !important;
}

.home-page-main-button .mud-button-label,
.home-page-secondary-button .mud-button-label {
    justify-content: flex-start;
}

.home-page-main-button:hover {
    background-color: var(--bg-color-secondary);
    border-color: var(--color-secondary-700);
}

.home-page-secondary-button:hover {
    background-color: var(--color-secondary-500);
    color: var(--color-secondary-50);
    border-color: var(--color-secondary-700);
}

.home-page-main-text-buttons {
    margin-top: 48px;
    margin-bottom: 40px;
}

.contribution-main-text {
    font-weight: 500;
}

.help-us-tabs-header {
}

.break-after-two > *:nth-child(2)::after {
    content: "";
    /* make it act like a full-width flex-item */
    flex-basis: 100%;
    height: 0;
}

.mud-chip.mud-chip-size-small {
    font-size: 13px;
}

.mud-typography-subtitle2 {
    font-size: 0.8rem;
}

.list-filter button {
    padding: 0.5rem 1.5rem !important;
    border-width: 1px !important;
}

.eapps-instagram-feed-title-container {
    display: none;
}
/*
.mud-drawer.mud-drawer--open {
    --mud-drawer-content-height: auto !important;
    height: max-content !important;
    max-height: 80dvh;
    overflow-y: auto;
}
*/

li.mud-breadcrumb-item > a > span.mud-icon-root.mud-icon-size-small.home {
    display: none;
}
/* Extra small (xs): up to 599px */
@media (max-width: 599px) {
    /* styles for small to large phones */
    .cat-photos-small {
        position: relative;
        left: 1.5rem;
    }
    .top-menu-btn-support-us {
        font-size: 0rem !important;
    }


    .home-page-main-text-buttons {
        margin: 0 auto;
    }

        .home-page-main-text-buttons a {
            width: calc(100% + 48px);
            text-align: left;
        }

    .home-page-text-content {
        margin-top: 0px;
        text-align: center;
        margin: 0 auto;
    }

    .top-menu-logo-text {
        display: none;
        font-size: 1.5rem;
        line-height: 1.3rem;
        /* allow wrapping at spaces/newlines (default) */
        white-space: normal;
        /* legacy name */
        word-wrap: break-word;
        /* standard name */
        overflow-wrap: break-word;
        /* as a more aggressive fallback, will break within “words” if needed */
        word-break: break-word;
        max-width: 130px; /* or whatever constraint you need */
    }

    .home-page-main-text {
        text-align: center;
        line-height: clamp(2.5rem, 0.4899rem + 8.0402vw, 3.5rem);
        font-size: clamp(2.2rem, 0.592rem + 6.4322vw, 3rem);
        margin-bottom: 2rem;
    }

    .home-page-text-content > p.mud-typography.mud-typography-body1 {
        display: none;
        font-size: clamp(0.5rem, 0.35rem + 1.4vw, 0.85rem);
        line-height: clamp(0.8rem, 0.5rem + 1.4vw, 1.3rem);
    }

    .mud-grid-spacing-xs-6 > .mud-grid-item {
        padding-left: 0;
    }

    .contribution-main-text {
        font-size: clamp(1.7rem, 0.1958rem + 4.0111vw, 2.6rem);
        line-height: clamp(2.5rem, 1.3301rem + 3.1198vw, 3.2rem);
    }
}


/* Small (sm): 600px to 959px */
@media (min-width: 600px) and (max-width: 959px) {
    .cat-photos-small {
        position: relative;
        left: 1.5rem;
    }

    .top-menu-logo-text {
        font-size: 1.5rem;
        line-height: 1.3rem;
        /* allow wrapping at spaces/newlines (default) */
        white-space: normal;
        /* legacy name */
        word-wrap: break-word;
        /* standard name */
        overflow-wrap: break-word;
        /* as a more aggressive fallback, will break within “words” if needed */
        word-break: break-word;
        max-width: 130px; /* or whatever constraint you need */
    }
    /* styles for small to medium tablets */
    .mud-grid-spacing-xs-6 > .mud-grid-item {
        padding-left: 0;
    }

    .home-page-text-content {
        margin-top: 0px;
        text-align: center;
    }

    .home-page-main-text {
        text-align: center;
        font-size: clamp(3rem, 7.1309vw + .3259rem, 4.6rem);
        line-height: clamp(3.5rem, 6.6852vw + .993rem, 5rem);
    }

    .contribution-main-text {
        font-size: clamp(1.7rem, 0.1958rem + 4.0111vw, 2.6rem);
        line-height: clamp(2.5rem, 1.3301rem + 3.1198vw, 3.2rem);
    }
}

/* Medium (md): 960px to 1279px */
@media (min-width: 960px) and (max-width: 1279px) {
    /* styles for large tablets to laptops */
    .home-page-main-text {
        font-size: clamp(2.78rem, 4.5141vw + -.0085rem, 3.6rem);
        line-height: clamp(3rem, 5.0157vw + -.0094rem, 4rem);
    }

    .home-page-text-content > p.mud-typography.mud-typography-body1 {
        font-size: clamp(.9rem, .5016vw + .5991rem, 1rem);
        line-height: clamp(0.8rem, 0.5rem + 1.4vw, 1.3rem);
    }

    .contribution-main-text {
        font-size: clamp(2.8rem, 2.1981rem + 1.0031vw, 3rem);
        line-height: clamp(3.2rem, 2.2972rem + 1.5047vw, 3.5rem);
    }
}

/* Large (lg): 1280px to 1919px */
@media (min-width: 1280px) and (max-width: 1919px) {
    /* styles for desktops */

}

/* Extra Large (xl): 1920px to 2559px */
@media (min-width: 1920px) and (max-width: 2559px) {
    /* styles for HD and 4k screens */
}

/* Extra Extra Large (xxl): 2560px and up */
@media (min-width: 2560px) {
    /* styles for 4k+ and ultra-wide screens */
}

@media (max-width: 660px) {
    .mud-grid-item:first-child .list-filter.mud-button-group-root {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        /* make each button look standalone */
        .mud-grid-item:first-child .list-filter.mud-button-group-root .mud-button-root {
            border-radius: var(--mud-default-borderradius) !important;
        }

            /* cancel the “joined” group borders */
            .mud-grid-item:first-child .list-filter.mud-button-group-root .mud-button-root:not(:first-child) {
                margin-left: 0 !important;
                border-left: none !important;
            }
}