/* --------------------------------------------------- */
/* Stylesheet für Spezial-Effekte Oratorienchor Bern   */
/* Datum: 2. Feb 2024                                  */
/* Änderungen:                                         */
/* -----------                                         */
/* tt. Mon jjjj: ?                                     */
/* --------------------------------------------------- */

@charset "UTF-8";

/* -------------------------------------------------------------------------- */
/* Einen kreisförmigen Patch mit Text erzeugen                                */
/* -------------------------------------------------------------------------- */
/* Quelle: https://www.blogseite.com/css-kreis-mit-text-erstellen-so-gehts/#! */
/* Anwendung:                                                                 */         
/* <p class="ocb-kreis" style="">Die Singwoche in Venedig ist ausgebucht.</p> */
/* oder:                                                                      */
/* <div class="ocb-kreis">Die Singwoche in Venedig ist ausgebucht.</div>      */
/* -------------------------------------------------------------------------- */

.ocb-kreis {
	/*display: table-cell;*/
	width: 350px;
	height: 350px;
	border-radius: 50% 50%;
	font-size: 32px;
	font-weight: bold;
	color: black;
	line-height: 1.2em;
	text-align: center;
	background: Gold;
	transform: rotate(-30deg);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* -------------------------------------------------------------------------- */
/* Glühenden Text mit Plamp-Effekt erzeugen.                                  */
/* -------------------------------------------------------------------------- */
/* Quelle: https://codepen.io/kar_shaiq/pen/MqWMbP                            */
/* Anwendung:                                                                 */
/* <div class="w3-row">                                                       */
/*    <figure class="ocb-wobblefig">                                          */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*		 <h1 class="ocb-gluehwobble">Support Culture</h1>                     */
/*    </figure>                                                               */
/* </div>                                                                     */
/* -------------------------------------------------------------------------- */
.ocb-wobblefig {
	height: var(--figh);
	animation: wobble 5s ease-in-out infinite;
	transform-origin: center center;
	transform-style: preserve-3d;
}

@keyframes wobble {
    0%,100%{ transform: rotate3d(1, 1, 0, 40deg); }
    25%{ transform: rotate3d(-1, 1, 0, 40deg); }
    50%{ transform: rotate3d(-1, -1, 0, 40deg); }
    75%{ transform: rotate3d(1, -1, 0, 40deg);}
}

.ocb-gluehwobble {
	display: block;
	width: 100%;
	/* padding: 40px; */
	margin: 10px 0;
	line-height: 1.5;
	font: 900 6em 'Ink free', sans-serif;
	text-transform: uppercase;
	text-align: center;
	color: #0a0a0a;
	position: absolute;
	animation: glow 10s ease-in-out infinite;
}

@keyframes glow {
   0%,100%{ text-shadow:0 0 30px red; }
   25%{ text-shadow:0 0 30px orange; }
   50%{ text-shadow:0 0 30px forestgreen; }
   75%{ text-shadow:0 0 30px cyan; }
}

h1:nth-child(2) { transform: translateZ(5px); }
h1:nth-child(3) { transform: translateZ(10px); }
h1:nth-child(4) { transform: translateZ(15px); }
h1:nth-child(5) { transform: translateZ(20px); }
h1:nth-child(6) { transform: translateZ(25px); }
h1:nth-child(7) { transform: translateZ(30px); }
h1:nth-child(8) { transform: translateZ(35px); }
h1:nth-child(9) { transform: translateZ(40px); }
h1:nth-child(10) { transform: translateZ(45px);}

/* -------------------------------------------------------------------------- */
/* Auf schmalen Displays soll die Höhe 50vh sein, sonst 25vh.                 */
/* -------------------------------------------------------------------------- */

@media only screen and (max-width: 600px) {
	:root {
		--figh: 50vh;
	}
}

@media only screen and (min-width: 600px) {
	:root {
		--figh: 25vh;
	}
}

/* -------------------------------------------------------------------------- */
/* Glühender Text.                                                            */
/* -------------------------------------------------------------------------- */
/* Quelle: https://www.w3schools.com/howto/howto_css_glowing_text.asp.        */
/* -------------------------------------------------------------------------- */

.ocb-glowtext {
	font-size: 1.33em;
	animation: ocb-glowtext 1s ease-in-out infinite alternate;
}

@keyframes ocb-glowtext {
	from {text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;}
	to {text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;}
}