:root {
    --whg-primary-color: 93 49 255;
    --whg-primary-contrast-color: 255 255 255;
    --whg-secondary-color: 32 230 192;
    --whg-secondary-contrast-color: 93 49 255;
    --whg-light-color: 247 248 248;
    --whg-light-contrast-color: 93 49 255;
    --whg-dark-color: 27 7 110;
    --whg-dark-contrast-color: 255 255 255;
    --whg-info-color: 59 130 246;
    --whg-info-contrast-color: 255 255 255;
    --whg-success-color: 32 230 192;
    --whg-success-contrast-color: 255 255 255;
    --whg-caution-color: 253 224 71;
    --whg-caution-contrast-color: 0 0 0;
    --whg-warning-color: 251 146 60;
    --whg-warning-contrast-color: 255 255 255;
    --whg-danger-color: 239 68 68;
    --whg-danger-contrast-color: 255 255 255;
    --whg-white-color: 255 255 255;
    --whg-white-contrast-color: 93 49 255;

    --upm-primary-color: var(--whg-primary-color);
    --upm-primary-contrast-color: var(--whg-primary-contrast-color);
    --upm-secondary-color: var(--whg-secondary-color);
    --upm-secondary-contrast-color: var(--whg-secondary-contrast-color);
    --upm-light-color: var(--whg-light-color);
    --upm-light-contrast-color: var(--whg-light-contrast-color);
    --upm-dark-color: var(--whg-dark-color);
    --upm-dark-contrast-color: var(--whg-dark-contrast-color);
    --upm-info-color: var(--whg-info-color);
    --upm-info-contrast-color: var(--whg-info-contrast-colo);
    --upm-success-color: var(--whg-success-color);
    --upm-success-contrast-color: var(--whg-success-contrast-color);
    --upm-caution-color: var(--whg-caution-color);
    --upm-caution-contrast-color: var(--whg-caution-contrast-color);
    --upm-warning-color: var(--whg-warning-color);
    --upm-warning-contrast-color: var(--whg-warning-contrast-color);
    --upm-danger-color: var(--whg-danger-color);
    --upm-danger-contrast-color: var(--whg-danger-contrast-color);
    --upm-dm-color: var(--whg-dark-color);
    --upm-dm-contrast-color: var(--whg-dark-contrast-color);
    --upm-lm-color: var(--whg-light-color);
    --upm-lm-contrast-color: var(--whg-light-contrast-color);
}

/* Create smooth scroll to anchor */
html { scroll-behavior: smooth; }

html.mobileNav-isOpen {
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll!important;
    width: 100%;
}

span[data-underline] {
    position: relative;
}

span[data-underline]:after {
    content: "";
    background-image: url('/assets/underline.svg');
    background-repeat: no-repeat;
    position: absolute;
    left: -20%;
    right: 0;
    bottom: -85%;
    min-width: 134px;
    width: 100%;
    height: 100%;
}

/* keyframes */
@keyframes whg {
    0% {
        transform: rotate(0);
    }
    30% {
        transform: rotate(1turn);
    }
    60% {
        transform: rotate(2turn);
    }
    75% {
        transform: rotate(3turn);
    }
    100% {
        transform: rotate(4turn);
    }
}

/* intersection observer animation */
.ribbonOberserverAnimation {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: ribbonOberserverAnimation;
}

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