:root {
    --ay-primary: #007B5C;
    --ay-primary-hover: #00624A;
    --ay-primary-pressed: #004A37;
    --ay-on-primary: white;
    --ay-on-primary-80: rgba(255, 255, 255, .8);
    --ay-secondary: #E5FB22;
    --ay-secondary-hover: #B7C91B;
    --ay-on-secondary-container: #2E3207;
    --ay-secondary-pressed: #899714;
    --on-primary: #0A3127;
    --ay-disabled: #E0E0E0;
    --ay-on-disabled: #7A7A7A;
    --ay-success: #429D15;
    --ay-on-success: white;
    --ay-error: #F53032;
    --ay-on-error: white;
    --ay-warning: #FAAD14;
    --ay-on-warning: white;
    --ay-background: white;
    --ay-on-background: #0A3127;
    --ay-background-variant: #F2EEE8;
    --ay-on-background-variant: #004A37;
    --ay-outline: #DAD6D1;
    --ay-background-inverse: #0A3127;
    --ay-on-background-inverse: #FCFCFA;
    --ay-background-dim: #00000033;
    --ay-plain-hover: #0000001A;
    --ay-plain-pressed: #00000033;
    --ay-plain-inverse-hover: #FFFFFF1A;
    --ay-plain-inverse-pressed: #FFFFFF33;
    --ay-border-radius: 6.25rem;
    --ay-card-border-radius: 2rem;
    --ay-card-padding: 2rem;
    --ay-button-height: 3rem;
    --ay-static-padding-xxl: 1.5rem;
    --ay-spacing-sm: 0.5rem;
    --ay-circle-width: 5.625rem;
    --ay-circle-height: 5.625rem;
    --ay-circle-top: 12.5rem;
    --ay-circle-center-percentage: 50%;
    --ay-circle-offset: 6.25rem;
    --ay-animated-card-width: 26.5rem;
    --ay-animated-card-height: 20rem;
    --ay-circle-animation-duration: 3s;
    --ay-card-animation-duration: 1s;
    --ay-card-animation-delay: 1.2s;
    --ay-toolbar-height: 5.625rem;
    --ay-dataprotection-background-color: #FAFAFA;
    --ay-state-outline-focused: #7291FF;
    --ay-snake-green: #027b5c;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', serif;
}

a {
    all: unset;
    cursor: pointer;
}

a:hover {
    all: unset;
    cursor: pointer;
}

a:visited {
    all: unset;
    cursor: pointer;
}

.ay-body-md {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
}

.ay-body-md-hl {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
}

.ay-body-lg {
    font-size: 1.25rem;
    line-height: 1.625rem;
    font-weight: 400;
}

.ay-desktop-headline-md {
    font-size: 3.25rem;
    line-height: 3.625rem;
    font-weight: 600;
}

.ay-desktop-headline-lg {
    font-size: 4rem;
    line-height: 4.375rem;
    font-weight: 600;
}

.ay-desktop-headline-xs {
    font-size: 2rem;
    line-height: 2.375rem;
    font-weight: 500;
}

.ay-desktop-headline-xl {
    font-size: 4.375rem;
    line-height: 4.875rem;
    font-weight: 600;
}

.ay-headline-sm {
    font-size: 2.5rem;
    line-height: 2.75rem;
    font-weight: 600;
}

.ay-headline-text-container {
    margin: 6.938rem 0 1.313rem 0;
    display: flex;
    flex-direction: column;
    width: 57.5rem;
    height: 18.25rem;
    text-align: center;
    gap: 1.5rem;
}

.white {
    color: var(--ay-background);
}

.white-bg {
    background-color: var(--ay-on-primary);
}

.on-background {
    color: var(--ay-on-background);
}

.on-background-bg {
    background-color: var(--ay-on-background);
}

.ay-transparent-bg {
    background-color: transparent;
    border: none;
}

.secondary {
    color: var(--ay-secondary);
}

.ay-primary {
    color: var(--ay-primary);
}

.ay-primary-bg {
    background-color: var(--ay-primary);
}

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

.ay-on-primary {
    color: var(--ay-on-primary);
}

.ay-on-primary-80 {
    color: var(--ay-on-primary-80);
}

.ay-primary-button:hover {
    background-color: var(--ay-primary-hover);
}

.ay-primary-button:active {
    background-color: var(--ay-primary-hover);
}

.ay-secondary-button:hover {
    background-color: var(--ay-secondary-hover);
}

.ay-secondary-button:active {
    background-color: var(--ay-secondary-hover);
}

.ay-secondary-button {
    background-color: var(--ay-secondary);
    color: var(--ay-on-secondary-container);
}

.ay-primary-button {
    background-color: var(--ay-primary);
}

.text-center {
    text-align: center;
}

.ay-button {
    border-radius: var(--ay-border-radius);
    height: var(--ay-button-height);
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
    width: fit-content;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 0.063rem solid transparent;
    padding-left: var(--ay-static-padding-xxl);
    padding-right: var(--ay-static-padding-xxl);
    font-size: 1rem;
    line-height: 1.5;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.ay-circle-button {
    border-radius: 50%;
    padding: 15px;
}

.ay-logo-wrapper {
    display: flex;
    flex: 3;
    justify-content: flex-start;
}

.ay-header-subheader-text {
    opacity: 80%;
    color: var(--ay-on-primary);
    font-size: 1.375rem;
}

.ay-subtitle-lg {
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 600;
}