/* Schneekugel */
.Schneekugelcontainer {
background-color: #047b83;
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.Schneekugel {
border-radius: 50% 50% 50% 50% / 50% 50% 10% 10%;
--kugelborder: calc(var(--kartenbreite)/100);
border: var(--kugelborder) solid white;
width: calc(0.86 * var(--kartenbreite));
aspect-ratio: 1;
background-color: rgb(4, 4, 59);
position: relative;
clip-path: border-box;
--falldauer: 6s;
}
.Schneekugel:before {
content: "";
border-bottom: 4px solid white;
background-color: grey;
opacity: 0.4;
width: 100%;
height: 20%;
position: absolute;
bottom: -5px;
border-radius: 50%;
z-index: 1;
}
.Schneekugel:after {
content: "";
border-right: 4px solid white;
opacity: 0.2;
width: 100%;
height: 100%;
position: absolute;
border-top-right-radius: inherit;
transform: rotateY(35deg);
pointer-events: none;
}
.Schneekugel:not(.Gedreht):before {
animation: schneeboden linear calc(0.5 * var(--falldauer)) calc(0.8 * var(--falldauer)) forwards;
}
.Schneekugel.Gedreht {
transform-origin: 50% 50%;
animation: dreheSchneekugel 1s ease 2 alternate;
}
.Schneetext {
background-color: transparent;
color: var(--textfarbe);
font-family: monospace;
font-weight: bold;
text-decoration: underline 20%;
-webkit-text-decoration: underline;
position: absolute;
text-shadow: -2px 0 0 var(--textfarbe),
2px 0 0 var(--textfarbe),
-2px 1px 0 var(--textfarbe),
2px 1px 0 var(--textfarbe);
}
.Schneetext.Hinten {
bottom: 18%;
left: 50%;
transform: translateX(-50%);
font-size: calc(var(--kartenbreite) * 0.36);
--textfarbe: #1b70b4;
/* BFO blau */
z-index: 2;
}
.Schneetext.VorneLinks {
bottom: 10%;
left: 6%;
font-size: calc(var(--kartenbreite) * 0.15);
--textfarbe: #b9cc1f;
/* BFO lindgruen */
z-index: 4;
}
.Schneetext.VorneRechts {
bottom: 6%;
right: 10%;
font-size: calc(var(--kartenbreite) * 0.18);
--textfarbe: #742995;
/* BFO lila aufgehellt*/
z-index: 6;
}
.Schneekugel:not(.Gedreht) .Schneetext {
animation: schneewaechst calc(0.4 * var(--falldauer)) calc(0.6 * var(--falldauer)) linear forwards;
}
.Schneekugel:not(.Gedreht) .Schneetext.Hinten {
animation-duration: calc(0.7 * var(--falldauer));
animation-delay: calc(0.3 * var(--falldauer));
}
.Schneetext:focus {
outline: none;
}
.Schneeflocke {
width: 1%;
height: 1%;
border-radius: 50%;
background-color: white;
opacity: 0.8;
position: absolute;
left: 50%;
top: var(--schneestartet);
--schneeliegt: 92%;
}
.Schneeflocke:nth-child(4n) {
--schneestartet: -15%;
}
.Schneeflocke:nth-child(4n+1) {
--schneestartet: -10%;
}
.Schneeflocke:nth-child(4n+2) {
--schneestartet: 5%;
}
.Schneeflocke:nth-child(4n+3) {
--schneestartet: 20%;
}
.Schneeflocke:nth-child(4n) {
z-index: 1;
opacity: 0.7;
}
.Schneeflocke:nth-child(4n+1) {
z-index: 3;
opacity: 0.8
}
.Schneeflocke:nth-child(4n+2) {
z-index: 5;
opacity: 0.9
}
.Schneeflocke:nth-child(4n+3) {
z-index: 7;
opacity: 1
}
.Schneekugel:not(.Gedreht) .Schneeflocke {
animation: schneefaellt linear var(--falldauer) forwards;
}
.Schneekugel:not(.Gedreht) .Schneeflocke:nth-child(4n+1) {
animation-duration: calc(1.2 * var(--falldauer));
}
.Schneekugel:not(.Gedreht) .Schneeflocke:nth-child(4n) {
animation-duration: calc(1.4 * var(--falldauer));
}
.Schneekugel.Gedreht .Schneeflocke {
animation: schneezurueck linear 0.5s forwards;
}
@keyframes schneewaechst {
from {
text-shadow: -2px 0 0 var(--textfarbe),
2px 0 0 var(--textfarbe),
0 1px 0 var(--textfarbe),
-2px 1px 0 var(--textfarbe),
2px 1px 0 var(--textfarbe);
}
to {
text-shadow: -2px 0 0 var(--textfarbe),
2px 0 0 var(--textfarbe),
0 1px 0 var(--textfarbe),
-2px 1px 0 var(--textfarbe),
2px 1px 0 var(--textfarbe),
0 0 1px white,
0 0 2px white,
0 -1px 1px white,
0 -2px 2px white,
0 -3px 3px white,
0 -4px 4px white,
0 -5px 4px white;
}
}
@keyframes schneefaellt {
from {
top: var(--schneestartet);
}
to {
top: var(--schneeliegt);
}
}
@keyframes schneezurueck {
from {
top: var(--schneeliegt);
}
to {
top: var(--schneestartet);
}
}
@keyframes dreheSchneekugel {
to {
transform: rotate(180deg);
}
}
@keyframes schneeboden {
to {
background-color: rgb(255, 255, 255);
opacity: 0.55;
box-shadow: 0 -1px 2px white;
}
}