/* Der Scheiß ist einfach überall praktisch */
.animcolor {
    animation: colorrgb 3s infinite linear;
}

@keyframes colorrgb {
    0% {color: red;}
    25% {color: yellow;}
    50% {color: blue;}
    75% {color: green;}
    100% {color: red;}
}

.animbordercolor {
    animation: colorrgbborder 3s infinite linear;
}

@keyframes colorrgbborder {
    0% {border-color: red;}
    25% {border-color: yellow;}
    50% {border-color: blue;}
    75% {border-color: green;}
    100% {border-color: red;}
}

/* Misc */
.hidden {
	display: none;
}
.initially-hidden {
	display: none; /* yeah whatever */
}

/* Flash Messages */
.rudi-flash {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* Sprechblasenrudi */
.sprechblasenrudi {
	display: flex;
	align-items: flex-start;
	max-width: 80em;
	margin-bottom: 1em;
	margin-left: 1em;
	margin-right: 1em;
}

.sprechblase-text {
	position: relative;
	background: #e9ecef;
	border-radius: .4em;
	padding: 1em 1.5em;
	width: 100%;
	margin-left: 1em;
	border-right-color: #e9ecef;
}

.sprechblase-text:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 0.625em solid transparent;
	border-right-color: inherit;
	border-left: 0;
	border-top: 0;
	margin-top: -0.312em;
	margin-left: -0.625em;
}

.sprechblasenrudi img.rudi {
	animation-name: rotate;
	animation-duration: 1000ms;
	animation-play-state: paused;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.sprechblasenrudi img.rudi:hover {
	animation-play-state: running;
}

.sprechblasenrudi .sprechblase-inhalt {
	margin-bottom: 0;
}

@keyframes rotate {
	100% { transform:rotate(360deg); }
}