.rainbow {
    background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

sup {
    font-size: 50%;
}

:root {
    --orange: #e97524;
    --water: #aac5da;
    --width: 9.1cm;
    --height: 6.1cm;
    --cutoff: 0.3cm;
    --arschwasser-height: 27px;
    --arschwasser-width: 153px;
    --icon-size: 1em;
}

.WaterCard {
    background: #fff;
    color: #000;
    width: calc(var(--width) - 2 * var(--cutoff));
    height: calc(var(--height) - 2 * var(--cutoff));
    padding: var(--cutoff);
    position: relative;
    align-content: baseline;
    display: block;
    border: 1px solid #000;
    border-radius: 0.42em;
    transform: scale(1.5);
    transform-origin: top left;
}

.WaterCard iframe {
    width: 100%;
    height: 100%;
    border: none;
}

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

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