:root {
    --yp-eggshell: #eae8e0;
    --yp-chBlue-light: #d8e7ff;
    --yp-chBlue-default: #2f80ed;
    --yp-chBlue-medium: #5476aa;
    --yp-chBlue-dark: #3b5378;
    --yp-white: #ffffff;
    --yp-black: #000000;
    --yp-faded: #0000000d;
    --yp-tan-500: #bfa78c;
    --yp-tan-700: #85755f;
    --yp-brown-300: #f1efe3;
    --yp-brown-500: #e7e3d5;
    --yp-brown-600: #c1b9a2;
    --yp-brown-700: #a09981;
    --yp-brown-800: #70664b;
    --yp-brown-900: #221f14;
    --yp-brown-950: #1f2022;
    --yp-peach: #fdebdf;
    --yp-gray-100: #fafafa;
    --yp-gray-200: #f2f2f2;
    --yp-gray-300: #e0e0e0;
    --yp-gray-400: #d5d5d5;
    --yp-gray-500: #bdbdbd;
    --yp-gray-600: #91908b;
    --yp-gray-700: #4f4f4f;
    --yp-gray-800: #333333;
    --yp-gray-900: #1f2022;
    --yp-gray-950: #242420;
    --yp-red-100: #fff5f5;
    --yp-red-200: #fed7d7;
    --yp-red-300: #feb2b2;
    --yp-red-400: #fc8181;
    --yp-red-500: #e24c51;
    --yp-red-600: #e53e3e;
    --yp-red-700: #c53030;
    --yp-red-800: #9b2c2c;
    --yp-red-900: #742a2a;
    --yp-orange-100: #fffaf0;
    --yp-orange-200: #feebc8;
    --yp-orange-300: #fbd38d;
    --yp-orange-400: #ffaf52;
    --yp-orange-500: #fd9a2f;
    --yp-orange-600: #dd6b20;
    --yp-orange-700: #c05621;
    --yp-orange-800: #9c4221;
    --yp-orange-900: #7b341e;
    --yp-yellow-100: #fffff0;
    --yp-yellow-200: #fefcbf;
    --yp-yellow-300: #faf089;
    --yp-yellow-400: #f6e05e;
    --yp-yellow-500: #ffe450;
    --yp-yellow-600: #d69e2e;
    --yp-yellow-700: #b7791f;
    --yp-yellow-800: #975a16;
    --yp-yellow-900: #744210;
    --yp-green-100: #f0fff4;
    --yp-green-200: #e8fcd9;
    --yp-green-300: #9ae6b4;
    --yp-green-400: #68d391;
    --yp-green-500: #00be68;
    --yp-green-600: #38a169;
    --yp-green-700: #2f855a;
    --yp-green-800: #276749;
    --yp-green-900: #22543d;
    --yp-teal-100: #e6fffa;
    --yp-teal-200: #b2f5ea;
    --yp-teal-300: #81e6d9;
    --yp-teal-400: #4fd1c5;
    --yp-teal-500: #38b2ac;
    --yp-teal-600: #319795;
    --yp-teal-700: #2c7a7b;
    --yp-teal-800: #285e61;
    --yp-teal-900: #234e52;
    --yp-blue-100: #ebf8ff;
    --yp-blue-200: #bee3f8;
    --yp-blue-300: #90cdf4;
    --yp-blue-400: #63b3ed;
    --yp-blue-500: #2f80ed;
    --yp-blue-600: #3182ce;
    --yp-blue-700: #2b6cb0;
    --yp-blue-800: #2c5282;
    --yp-blue-900: #2a4365;
    --yp-indigo-100: #ebf4ff;
    --yp-indigo-200: #c3dafe;
    --yp-indigo-300: #a3bffa;
    --yp-indigo-400: #7f9cf5;
    --yp-indigo-500: #667eea;
    --yp-indigo-600: #5a67d8;
    --yp-indigo-700: #4c51bf;
    --yp-indigo-800: #434190;
    --yp-indigo-900: #3c366b;
    --yp-purple-100: #faf5ff;
    --yp-purple-200: #e9d8fd;
    --yp-purple-300: #d6bcfa;
    --yp-purple-400: #b794f4;
    --yp-purple-500: #9f7aea;
    --yp-purple-600: #805ad5;
    --yp-purple-700: #6b46c1;
    --yp-purple-800: #553c9a;
    --yp-purple-900: #44337a;
    --yp-pink-100: #fff5f7;
    --yp-pink-200: #fed7e2;
    --yp-pink-300: #fbb6ce;
    --yp-pink-400: #f687b3;
    --yp-pink-500: #ed64a6;
    --yp-pink-600: #d53f8c;
    --yp-pink-700: #b83280;
    --yp-pink-800: #97266d;
    --yp-pink-900: #702459;
}

.yp-theme[data-theme="light"] {
    --yp-text-primary: var(--yp-gray-900);
    --yp-text-light: var(--yp-gray-600);
    --yp-background: var(--yp-eggshell);
    --yp-foreground: var(--yp-gray-950);
}

.yp-theme[data-theme="dark"] {
    --yp-text-primary: var(--yp-eggshell);
    --yp-text-light: var(--yp-eggshell);
    --yp-background: var(--yp-gray-950);
    --yp-foreground: var(--yp-eggshell);
}

.yp-theme {
    color: var(--yp-text-primary);
    transition: all 0.5s ease 0s;
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: Nunito, sans-serif;
}

.yp-landing {
    height: 100vh;
    background-color: var(--yp-eggshell);
}

.yp-landing header {
    padding: 36px 64px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.yp-nav-links {
    list-style: none;
    display: flex;
    gap: 48px;
    align-items: center;
}

.yp-nav-links li {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

button {
    border-radius: 9999px;
    cursor: pointer;
    min-height: 2rem;
    border: none;
    transition: all 0.5s ease 0s;
    padding: 0.5rem 1.5rem;
    min-width: 8rem;
    font-size: 1.06rem;
    font-family: Nunito, sans-serif;
    font-weight: 800;
    text-transform: unset !important;
}

.yp-btn--compact {
    padding: 0px 0.5rem;
    font-size: 0.875rem;
    min-width: 4rem;
}
.yp-btn--transparent {
    background-color: transparent;
    border-color: var(--yp-text-primary);
    border-width: 2px;
    border-style: solid;
    color: var(--yp-text-primary);
}

.yp-btn--yellow {
    background-color: var(--yp-yellow-500);
    color: var(--yp-gray-950);
    padding: 16px 24px;
    text-transform: uppercase;
}

.yp-btn--transparent:hover {
    background-color: var(--yp-foreground);
    color: var(--yp-background);
}

.yp-btn--borderless {
    border: none;
}
.yp-main-content-container {
    position: fixed;
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content: center;
    width: 100%;
    z-index: 999;
}

#yp-image-dark-theme,
#yp-hand-logo-dark-theme,
#yp-hamburger-menu-dark-theme,
#yp-hamburger-menu-light-theme {
    position: absolute;
    top: 0;
    left: 0;
}

@keyframes slide-bottom {
    0% {
        transform: translateY(1000px);
    }
    70% {
        transform: translateY(-12px);
    }
    85% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes quick-slide-bottom {
    0% {
        transform: translateY(100px);
    }
    70% {
        transform: translateY(-4px);
    }
    85% {
        transform: translateY(1.5px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes quick-slide-out {
    0% {
        transform: translateY(0px);
    }
    30% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(100px);
    }
}

.yp-mount-animation--slide-bottom {
    animation: slide-bottom 1.25s ease-in-out;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.yp-mount-animation--fade {
    animation: fade 0.35s ease-in-out;
}

@keyframes flyOut {
    0% {
        position: relative;
        top: 0;
        opacity: 1;
    }
    100% {
        position: relative;
        top: -64px;
        opacity: 0;
    }
}

.yp-mount-animation--fly-out {
    animation: flyOut 1s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes flyIn {
    0% {
        position: relative;
        top: 64px;
        opacity: 0;
    }
    100% {
        position: relative;
        top: 0;
        opacity: 1;
    }
}

@keyframes flyInRight {
    0% {
        left: 1000px;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}

@keyframes flyOutRight {
    0% {
        left: 0;
        opacity: 1;
    }
    100% {
        left: 1000px;
        opacity: 0;
    }
}

.yp-mount-animation--fly-in-right {
    animation: flyInRight 0.35s ease-out;
    animation-fill-mode: forwards;
}

@keyframes bounce {
    50% {
        transform: translateY(-15px);
    }
}

.yp-mount-animation--fly-in {
    animation: flyIn 1s ease-in-out;
    animation-fill-mode: forwards;
}

.yp-landing-img-container {
    position: relative;
}

#yp-hand-logo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.yp-hand-wave-img-container {
    position: relative;
}

.yp-landing-img {
    height: 96px;
}

#floating-arrow {
    transition: opacity 0.75s ease-in-out;
}

.yp-invisible {
    opacity: 0;
}

.yp-scroll-page {
    background-color: var(--yp-gray-950);
    width: 100%;
    height: 100vh;
    background-size: cover;
    scroll-snap-align: start;
    z-index: 999999999;
}

.yp-social-icon:hover {
    opacity: 75%;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 72px 36px;
    display: flex;
    justify-content: space-between;
    z-index: 999;
}

.yp-footer-links {
    list-style: none;
    display: flex;
    gap: 32px;
    align-items: center;
}
.yp-footer-links li,
.yp-copyright {
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 600;
    color: var(--yp-gray-600);
}

.yp-copyright-year {
    margin-left: 4px;
    margin-right: 4px;
}

.yp-hamburger-copyright {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 14px;
    font-weight: 600;
    color: var(--yp-gray-800);
}

.yp-hamburger-footer .yp-footer-links li {
    font-weight: 700;
    color: var(--yp-gray-800);
}

.yp-hamburger-footer {
    bottom: 128px;
    position: absolute;
}

.yp-hamburger-social-links {
    margin-top: 32px;
}

.yp-footer-links a,
.yp-nav-links a {
    text-decoration: none;
    color: inherit;
}

.yp-footer-links a:hover,
.yp-nav-links a:hover {
    color: var(--yp-orange-600);
}

.yp-copyright {
    display: flex;
    align-items: center;
}

.yp-scroll-text-page--page-1 {
    background-color: var(--yp-blue-500);
}

.yp-scroll-text-page {
    height: 100vh;
    scroll-snap-align: start;
}

.yp-scroll-text-page--page-2 {
    background-color: var(--yp-red-500);
}
.yp-scroll-text-page--page-3 {
    background-color: var(--yp-green-500);
}

.yp-scroll-container {
    position: relative;
    width: 100%;
    height: 100vh;
    scroll-behavior: smooth;
    overflow: auto;
    scroll-snap-type: y mandatory;
    scroll-snap-stop: always;
}

.yp-scroll-cta {
    height: 84px;
    background-color: #242420;
    position: fixed;
    bottom: -42px;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 50% 50% 0 0;
    visibility: hidden;
    z-index: 9999;
    mask-image: paint(smooth-corners);
    -webkit-mask-image: paint(smooth-corners);
    --smooth-corners: 1.3;
}

.yp-scroll-cta--text {
    text-align: center;
    color: #ffe450;
    margin-top: 10px;
}

.yp-floating-arrow {
    animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

@keyframes slideOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-40px);
        opacity: 0;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.yp-main-content-slide-out {
    animation: slideOut 1s ease-in-out;
    animation-fill-mode: forwards;
}
.yp-main-content-slide-in {
    animation: slideIn 1s ease-in-out;
}

.yp-action-text-container {
    font-size: 56px;
    font-weight: 700;
    font-family: "Nunito", sans-serif;
    text-align: center;
    /*margin: 12px 24px;*/
    max-width: 1067px;
    letter-spacing: -0.04em;
    margin: 0 25px;
}

.yp-header-btn {
    height: 60px;
}

.yp-wave-img {
    height: 64px;
}

.yp-hamburger-menu-img {
    height: 20px;
}

#yp-hamburger-menu-container {
    width: 30px;
}

.yp-mobile-menu-container {
    display: none;
}

.yp-mobile-get-app-link {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    text-decoration: none;
    color: var(--yp-text-primary);
    border-bottom-color: var(--yp-text-primary);
    border-bottom-style: solid;
    height: 20px;
    border-bottom-width: 1.5px;
}

.yp-device-restricted--mobile {
    display: none;
}

.yp-footer-links {
    padding-left: 0;
}

#yp-logo-arrow-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.yp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background-color: rgb(36 36 32 / 86%);
}

.yp-overlay-content {
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content: center;
    width: 100%;
}
.yp-modal {
    position: relative;
    height: 602px;
    width: 602px;
    background-color: var(--yp-yellow-500);
}

.yp-modal-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.yp-modal-close-btn-container {
    display: flex;
    position: absolute;
    justify-content: center;
    left: 0;
    right: 0;
    top: 52px;
}

.yp-modal-subtext-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 52px;
    display: flex;
    justify-content: center;
}

.yp-modal-download-arrow {
    transform: rotate(180deg);
    animation: inverted-bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.yp-modal-download-arrow-container {
    display: flex;
    justify-content: center;
}

.yp-modal-subtext {
    font-size: 20px;
    font-weight: 700;
    width: 96px;
    text-align: center;
    margin-top: 22px;
}

.yp-hidden {
    display: none;
}

@keyframes inverted-bounce {
    50% {
        transform: rotate(180deg) translateY(-15px);
    }
}

.yp-hamburger-menu-content {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--yp-yellow-500);
}

.yp-hamburger-menu-close-btn-container {
    display: flex;
    padding: 12px 24px;
    justify-content: flex-end;
}

.yp-scroll-buffer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.5px;
}

.yp-desktop-action-btn-container {
    margin-top: 42px;
}
@media only screen and (max-device-width: 549px) {
    .yp-landing-img {
        height: 48px;
    }

    .yp-landing header {
        /*padding: 18px 24px;*/
        margin: 0 auto;
    width: fit-content;
    }

    .yp-wave-img {
        height: 50px;
    }

    .yp-nav-links {
        display: none;
    }

    .yp-device-restricted--mobile {
        display: block;
    }

    .yp-action-text-container {
        font-size: 32px;
    }

    #yp-get-clubhouse-body-btn--mobile {
        margin: 24px 0;
        text-decoration: none;
        color: var(--yp-gray-950);
    }

    footer {
        display: block;
        padding: 0;
    }

    .yp-footer-links,
    .yp-copyright {
        justify-content: center;
    }

    .yp-mobile-nav-links {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        gap: 42px;
        margin-top: 64px;
    }

    .yp-device-restricted--desktop {
        display: none;
    }

    .yp-scroll-cta {
        --smooth-corners: 1.5;
    }

    .yp-mobile-menu-container {
        display: flex;
        gap: 28px;
    }
}

/* Paint proper squircle for supporting browsers */
@supports (mask-image: paint(smooth-corners)) or
    (-webkit-mask-image: paint(smooth-corners)) {
    .yp-modal {
        mask-image: paint(smooth-corners);
        -webkit-mask-image: paint(smooth-corners);
        --smooth-corners: 2.6;
    }
}

/* Fallback to 41% border radius squircle for non supporting browsers */
@supports (not (mask-image: paint(smooth-corners))) and
    (not (-webkit-mask-image: paint(smooth-corners))) {
    .yp-modal {
        border-radius: 42%;
    }
}
:root {
    --yp-avatar-box-shadow-width: 10px;
}

.yp-avatar-group {
    position: fixed;
    top: 0;
    padding: 8px;
}

.yp-avatar-group--3 {
    height: 180px;
    width: 180px;
}

.yp-avatar-group--4 {
    height: 206px;
    width: 218px;
}

.yp-avatar-group--5 {
    height: 205px;
    width: 288px;
}

.yp-avatar-container {
    position: relative;
    height: 96px;
    width: 96px;
    border-radius: 42%;
}

.yp-avatar {
    background-size: cover;
    height: 100%;
    width: 100%;
}

/* Paint proper squircle for supporting browsers */
@supports (mask-image: paint(smooth-corners)) or
    (-webkit-mask-image: paint(smooth-corners)) {
    .yp-avatar {
        mask-image: paint(smooth-corners);
        -webkit-mask-image: paint(smooth-corners);
        --smooth-corners: 2.6;
    }
}

/* Fallback to 41% border radius squircle for non supporting browsers */
@supports (not (mask-image: paint(smooth-corners))) and
    (not (-webkit-mask-image: paint(smooth-corners))) {
    .yp-avatar {
        border-radius: 42%;
    }
}

.yp-avatar-container:nth-child(2) {
    left: 23px;
    top: -10px;
}
.yp-avatar-container:nth-child(1) {
    left: 88px;
    top: 0px;
}
.yp-avatar-container:nth-child(3) {
    left: 122px;
    top: -82px;
}
.yp-avatar-container:nth-child(4) {
    left: -18px;
    top: -304px;
}
.yp-avatar-container:nth-child(5) {
    left: 192px;
    top: -359px;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(254, 226, 93, 1);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 var(--yp-avatar-box-shadow-width) rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.yp-avatar-container--pulse {
    animation: pulse 2s infinite;
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@media only screen and (max-device-width: 549px) {
    :root {
        --yp-avatar-box-shadow-width: 6px;
    }
    .yp-avatar-container {
        height: 48px;
        width: 48px;
    }

    .yp-avatar-group--3 {
        height: 100px;
        width: 98px;
    }

    .yp-avatar-group--4 {
        height: 100px;
        width: 120px;
    }

    .yp-avatar-group--5 {
        height: 100px;
        width: 150px;
    }

    .yp-avatar-container:nth-child(2) {
        left: 0px;
        top: 0px;
    }
    .yp-avatar-container:nth-child(1) {
        left: 21px;
        top: 0px;
    }
    .yp-avatar-container:nth-child(3) {
        left: 52px;
        top: -52px;
    }
    .yp-avatar-container:nth-child(4) {
        left: 74px;
        top: -149px;
    }
    .yp-avatar-container:nth-child(5) {
        left: 104px;
        top: -151px;
    }
}