Gra:Brzuchatka/Z natłoku nerwów mdleję

A new morning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque in nisl sed quam convallis laoreet a mollis arcu. Sed molestie consequat libero vitae dictum.

Secondary
Primary

This card has ripples in its buttons and its body (along with a hover indicator and cursor change in the body).

```
#demo-standalone-card {
    align-items: center;
    background-color: var(--theme-page-background-color--secondary);
    border-radius: 8px;
    display: flex;
    height: 14em;
    justify-content: center;
    margin: 1em;
    overflow: hidden;
    padding: 24px;
    position: relative;
    text-align: center;
    width: 10em;
}
#demo-standalone-card:hover {
    cursor: pointer;
}
#demo-standalone-card::before {
    background-color: currentColor;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity 15ms linear, background-color 15ms linear;
    width: 100%;
    z-index: 1;
}
#demo-standalone-card:hover::before {
    opacity: 0.04;
}
#demo-standalone-card:active::before,
#demo-standalone-card:focus-within::before {
    opacity: 0.12;
    transition-duration: 75ms;
}

/******************/

.ripple-demo-container {
    padding: 32px;
}

.ripple-demo-container p {
    margin: 0;
}

.ripple-demo-container .demo-buttons-container p {
    clear: both;
    display: flex;
    flex-flow: row wrap;
    gap: 32px;
    justify-content: space-evenly;
}
.ripple-demo-container .wds-button:hover {
    cursor: pointer;
}

.demo-separator {
    border-color: rgba(var(--theme-body-text-color--rgb), .12);
    border-top: none;
    margin: 64px 0;
}

.ripple-demo-container .demo-cards-container {
    display: flex;
    flex-flow: row wrap;
    gap: 2em;
}

.ripple-demo-container .demo-card {
    background-color: var(--theme-page-text-mix-color-95);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: clamp(400px, calc(50% - 1em), 800px);
}

.ripple-demo-container .demo-card .demo-card__body {
    background-color: var(--theme-page-background-color--secondary);
    display: flex;
    position: relative;
}

.ripple-demo-container .demo-card .demo-card__text-container {
    padding: 1.375em 2em;
    position: relative;
}

.ripple-demo-container .demo-card .demo-card__text-container > p {
    display: flex;
    flex-direction: column;
}

.ripple-demo-container .demo-card .demo-card__title {
    font: 500 1.25em/1 var(--theme-page-headings-font), Helvetica, Arial, sans-serif;
    letter-spacing: 0.009375em;
    margin-bottom: 0.75em;
}

.ripple-demo-container .demo-card .demo-card__text {
    font: 400 0.875rem/1.25rem var(--theme-page-headings-font), Helvetica, Arial, sans-serif;
    letter-spacing: 0.0178571429em;
}

.ripple-demo-container .demo-card .demo-card__actions {
    background-color: var(--theme-page-background-color--secondary);
    border-radius: 0 0 16px 16px;
    border-top: 1px solid rgba(var(--theme-body-text-color--rgb), .12);
    padding: 1em 1.5em;
    position: relative;
}

.ripple-demo-container .demo-card .demo-card__actions > p {
    display: flex;
    gap: 1em;
    justify-content: flex-end;
}

.ripple-demo-container .demo-card .demo-card__footer {
    align-items: center;
    background-color: var(--theme-page-text-mix-color-95);
    display: flex;
    padding: 1em;
}

.ripple-demo-container .demo-card .demo-card__footer > p {
    align-items: center;
    color: rgba(var(--theme-body-text-color--rgb), .6);
    font: 400 0.75rem/1.25rem var(--theme-page-headings-font), Helvetica, Arial, sans-serif;
    letter-spacing: 0.0333333333em;
}

/* Card 2 styles. */
.ripple-demo-container #demo-card-2.demo-card {
    --ripple-config__duration--ms: 500;
    --ripple-config__end-duration--ms: 400;
    --ripple-config__max-radius--px: 1000;
    --ripple-config__min-duration--ms: 200;
    --ripple-config__timing-function: cubic-bezier(.4, .0, .2, 1);
}
.ripple-demo-container #demo-card-2.demo-card .demo-card__body:hover {
    cursor: pointer;
}
.ripple-demo-container #demo-card-2.demo-card .demo-card__body::before {
    background-color: var(--theme-body-text-color);
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: opacity 15ms linear, background-color 15ms linear;
    width: 100%;
    z-index: 1;
}
.ripple-demo-container #demo-card-2.demo-card .demo-card__body:hover::before {
    opacity: 0.04;
}
.ripple-demo-container #demo-card-2.demo-card .demo-card__body:active::before,
.ripple-demo-container #demo-card-2.demo-card .demo-card__body:focus-within::before {
    opacity: 0.12;
    transition-duration: 75ms;
}

.demo-card-variables-container {
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
}

.ripple-demo-container .var-card {
    background-color: var(--theme-page-background-color--secondary);
    border-radius: 1em;
    flex: clamp(400px, calc(50% - 3em), 600px);
    padding: 2em;
    margin: 1em;
    min-height: 20em;
}

.ripple-demo-container #var-card-1 {
    --ripple-config__duration--ms: 6000;
    --ripple-config__max-radius--px: 300;
    --ripple-color: #3ea6ff;
}

.ripple-demo-container #var-card-2 {
    --ripple-config__duration--ms: 600;
    --ripple-config__max-radius--px: 150;
    --ripple-config__min-duration--ms: 500;
    --ripple-color: #e91e63;
    --ripple-border-radius: 30%;
    --ripple-opacity: 40%;
}

.ripple-demo-container #var-card-3 {
    --ripple-config__end-duration--ms: 6000;
    --ripple-config__max-radius--px: 1000;
    --ripple-config__timing-function: ease;
    --ripple-color: #64dd17;
    --ripple-border-radius: 0;
    --ripple-opacity: 0.3;
}

.ripple-demo-container #var-card-4 {
    --ripple-config__duration--ms: 1500;
    --ripple-config__end-duration--ms: 1600;
    --ripple-config__max-radius--px: 50;
    --ripple-config__min-duration--ms: 1000;
    --ripple-config__timing-function: ease-out;
    --ripple-color: #d500f9;
    --ripple-border-radius: 50%;
    --ripple-opacity: 0.35;
}

.ripple-demo-container .var-card .var-card__inner {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
    width: 100%;
}

.ripple-demo-container .var-card .mw-highlight,
.ripple-demo-container .var-card .mw-highlight pre {
    height: 100%;
}

.ripple-demo-container .elevation-demo-container {
    --mdc-elevation-1dp_-_background-color: rgba(var(--theme-body-dynamic-color-1--rgb), .05);
    --mdc-elevation-8dp_-_background-color: rgba(var(--theme-body-dynamic-color-1--rgb), .12);
    --mdc-elevation-1dp_-_box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    --mdc-elevation-8dp_-_box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    --mdc-standard-curve-timing-function: cubic-bezier(.4, 0, .2, 1);
    --mdc-acceleration-curve-timing-function: cubic-bezier(.4, 0, 1, 1);
    --mdc-deceleration-curve-timing-function: cubic-bezier(0, 0, .2, 1);
    --mdc-sharp-curve-timing-function: cubic-bezier(.4, 0, .6, 1);
    --mdc-transition-duration-medium-open: 250ms;
    --mdc-transition-duration-medium-close: 200ms;
    display: flex;
    flex-flow: row wrap;
    gap: 3em;
    margin: 3em auto auto;
    justify-content: space-between;
    width: 100%;
}

.ripple-demo-container .elevation-demo-container .elevation-demo-surface {
    align-items: center;
    background-color: var(--mdc-elevation-1dp_-_background-color);
    box-shadow: var(--mdc-elevation-1dp_-_box-shadow);
    cursor: pointer;
    display: inline-flex;
    justify-content: space-around;
    margin: 15px;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    transition: background-color var(--mdc-transition-duration-medium-close, 200ms) var(--mdc-standard-curve-timing-function, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--mdc-transition-duration-medium-close, 200ms) var(--mdc-standard-curve-timing-function, cubic-bezier(.4, 0, .2, 1));
    user-select: none;
    width: 200px;
}
.ripple-demo-container .elevation-demo-container .elevation-demo-surface:hover {
    background-color: var(--mdc-elevation-8dp_-_background-color);
    box-shadow: var(--mdc-elevation-8dp_-_box-shadow);
    transition: background-color var(--mdc-transition-duration-medium-open, 250ms) var(--mdc-standard-curve-timing-function, cubic-bezier(.4, 0, .2, 1)), box-shadow var(--mdc-transition-duration-medium-open, 250ms) var(--mdc-standard-curve-timing-function, cubic-bezier(.4, 0, .2, 1));
}
.ripple-demo-container .elevation-demo-container .elevation-demo-surface::before {
    background-color: var(--theme-body-dynamic-color-1);
    content: '';
    height: 200%;
    left: -50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: -50%;
    transition: opacity 75ms linear;
    width: 200%;
    z-index: 1;
}
.ripple-demo-container .elevation-demo-container .elevation-demo-surface:hover::before {
    opacity: 0.04;
}
.ripple-demo-container .elevation-demo-container .elevation-demo-surface:is(:focus, :focus-within, :active)::before {
    opacity: 0.12;
}

.ripple-demo-container .elevation-demo-container .mdc-demo-table {
    width: 100%;
}

.ripple-demo-container .elevation-demo-container .mdc-demo-table .elevation-demo-surface {
    margin: 1.5em;
}

/* Material Design ripple. */
.ripple-demo-container .elevation-demo-container .mdc-demo-table .mdc-ripple {
    --ripple-config__duration--ms: 225;
    --ripple-config__end-delay--ms: 3000;
    --ripple-config__end-duration--ms: 150;
    --ripple-config__max-radius--px: 2000;
    --ripple-config__min-duration--ms: 75;
    --ripple-config__timing-function: var(--mdc-standard-curve-timing-function, cubic-bezier(.4, 0, .2, 1));
    --ripple-color: currentColor;
    --ripple-border-radius: 50%;
    --ripple-opacity: 0.12;
}

/** x10 slower. **/
.ripple-demo-container .elevation-demo-container .mdc-demo-table #mdc-card-2.mdc-ripple {
    --ripple-config__duration--ms: 2250;
    --ripple-config__end-duration--ms: 1500;
    --ripple-config__min-duration--ms: 750;
}

```