html, body {
  min-height: 100%;
  margin: 0;
}

html {
  overflow-y: scroll;
}

body {
background-image: radial-gradient(circle at 50% 300px, rgba(12, 38, 86, 0.9), rgba(0, 13, 37, 0.8) 100%), 
                  url('../img/MediaMagneten_Tannenbaum.svg'), 
                  url('../img/MediaMagneten_Tannenbaum.svg');
background-position: center, bottom right -8%, bottom left -10%;
background-size: auto, 485px, 350px;
background-repeat: no-repeat, no-repeat, no-repeat;
background-attachment: fixed;
margin: 0;



}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-v20-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("../fonts/open-sans-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v20-latin-regular.woff2") format("woff2"), url("../fonts/open-sans-v20-latin-regular.woff") format("woff"), url("../fonts/open-sans-v20-latin-regular.ttf") format("truetype"), url("../fonts/open-sans-v20-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */
}
html,
button,
input,
select,
textarea,
.pure-g {
  font-family: "Open Sans";
  font-weight: 400;
  overflow: hidden;
}

h1 {
  font-size: 0.55rem;
  color: white;
}

p {
  font-size: 0.5rem;
  margin-bottom: 0.2rem;
}

.text {
  position: absolute;
  top: 0px;
  padding-top: 0;
  text-align: center;
  width: 100%;
}

.unterschrift {
  max-width: 53px;
}

.klickmich {
  position: absolute;
  bottom: 0;
  left: 40%;
  animation: color_change 1s infinite alternate;
  color: #585447;
}

.klickmich p {
  margin-bottom:3rem;
  margin-left:5rem;

}

@media screen and (min-width:569px){
  .klickmich p {
    margin-bottom:4rem;
    margin-left:6rem;
}
}

@media screen and (min-width:768px){
  .klickmich p {
    margin-bottom:6rem;
    margin-left:9rem;
 
}
}

@keyframes color_change {
  to {
    color: #585447;
  }
  to{
    color:#7f95ac;
  }
}
@media screen and (min-width: 380px) {
  h1 {
    font-size: 0.8rem;
  }
  .text {
    top: 10px;
  }
  p {
    font-size: 0.55rem;
  }
}
@media screen and (min-width: 420px) {
  p {
    font-size: 0.65rem;
  }
}
@media screen and (min-width: 480px) {
  h1 {
    font-size: 1rem;
  }
  p {
    font-size: 0.72rem;
  }
  .text {
    top: 20px;
  }
  .unterschrift {
    max-width: 63px;
  }
}
@media screen and (min-width: 530px) {
  h1 {
    font-size: 1.2rem;
  }
  p {
    font-size: 0.8rem;
  }
}
@media screen and (min-width: 600px) {
  h1 {
    font-size: 1.2rem;
  }
  p {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
  }
  .unterschrift {
    max-width: 80px;
  }
}
@media screen and (min-width: 660px) {
  h1 {
    font-size: 1.6rem;
  }
  p {
    font-size: 1rem;
  }
  .text {
    top: 25px;
  }
  .unterschrift {
    max-width: 90px;
  }
}
@media screen and (min-width: 710px) {
  h1 {
    font-size: 1.8rem;
  }
  .unterschrift {
    max-width: 97px;
  }
}
@media screen and (min-width: 800px) {
  .unterschrift {
    max-width: 110px;
  }
  .text {
    top: 60px;
  }
}
@media only screen and (min-width: 800px) and (min-width: 700px) {
  .text {
    width: 100%;
  }
}
.snowflake {
  --size: 1vw;
  width: var(--size);
  height: var(--size);
  background: white;
  border-radius: 50%;
  position: absolute;
  top: -5vh;
}

@keyframes snowfall {
  0% {
    transform: translate3d(var(--left-ini), 0, 0);
  }
  100% {
    transform: translate3d(var(--left-end), 110vh, 0);
  }
}
.snowflake:nth-child(1) {
  --size: 0.2vw;
  --left-ini: 9vw; /* random initial translation */
  --left-end: -7vw; /* random final translation */
  left: 32vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(2) {
  --size: 0.8vw;
  --left-ini: 5vw; /* random initial translation */
  --left-end: -9vw; /* random final translation */
  left: 8vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(3) {
  --size: 0.8vw;
  --left-ini: -2vw; /* random initial translation */
  --left-end: 6vw; /* random final translation */
  left: 42vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(4) {
  --size: 0.2vw;
  --left-ini: 5vw; /* random initial translation */
  --left-end: 3vw; /* random final translation */
  left: 91vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -3s;
}

.snowflake:nth-child(5) {
  --size: 0.4vw;
  --left-ini: 1vw; /* random initial translation */
  --left-end: 8vw; /* random final translation */
  left: 32vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(6) {
  --size: 1vw;
  --left-ini: 2vw; /* random initial translation */
  --left-end: 2vw; /* random final translation */
  left: 32vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(7) {
  --size: 0.4vw;
  --left-ini: 10vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 46vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(8) {
  --size: 1vw;
  --left-ini: -8vw; /* random initial translation */
  --left-end: 7vw; /* random final translation */
  left: 24vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(9) {
  --size: 0.8vw;
  --left-ini: -3vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 43vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(10) {
  --size: 1vw;
  --left-ini: 9vw; /* random initial translation */
  --left-end: 0vw; /* random final translation */
  left: 93vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(11) {
  --size: 0.6vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: 7vw; /* random final translation */
  left: 76vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(12) {
  --size: 0.4vw;
  --left-ini: 0vw; /* random initial translation */
  --left-end: 0vw; /* random final translation */
  left: 86vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(13) {
  --size: 0.4vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: -2vw; /* random final translation */
  left: 58vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(14) {
  --size: 0.8vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: -6vw; /* random final translation */
  left: 2vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(15) {
  --size: 0.8vw;
  --left-ini: -3vw; /* random initial translation */
  --left-end: 10vw; /* random final translation */
  left: 31vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(16) {
  --size: 0.4vw;
  --left-ini: -2vw; /* random initial translation */
  --left-end: -3vw; /* random final translation */
  left: 96vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(17) {
  --size: 0.8vw;
  --left-ini: -5vw; /* random initial translation */
  --left-end: -9vw; /* random final translation */
  left: 42vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(18) {
  --size: 0.8vw;
  --left-ini: -5vw; /* random initial translation */
  --left-end: 2vw; /* random final translation */
  left: 45vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(19) {
  --size: 0.8vw;
  --left-ini: 2vw; /* random initial translation */
  --left-end: -7vw; /* random final translation */
  left: 42vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -10s;
}

.snowflake:nth-child(20) {
  --size: 0.4vw;
  --left-ini: -5vw; /* random initial translation */
  --left-end: 8vw; /* random final translation */
  left: 85vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(21) {
  --size: 0.2vw;
  --left-ini: -5vw; /* random initial translation */
  --left-end: 0vw; /* random final translation */
  left: 73vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(22) {
  --size: 0.4vw;
  --left-ini: 3vw; /* random initial translation */
  --left-end: 5vw; /* random final translation */
  left: 83vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(23) {
  --size: 0.4vw;
  --left-ini: 0vw; /* random initial translation */
  --left-end: 9vw; /* random final translation */
  left: 70vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -7s;
}

.snowflake:nth-child(24) {
  --size: 0.6vw;
  --left-ini: -8vw; /* random initial translation */
  --left-end: 3vw; /* random final translation */
  left: 79vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -9s;
}

.snowflake:nth-child(25) {
  --size: 1vw;
  --left-ini: 4vw; /* random initial translation */
  --left-end: -4vw; /* random final translation */
  left: 52vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(26) {
  --size: 0.6vw;
  --left-ini: 10vw; /* random initial translation */
  --left-end: -2vw; /* random final translation */
  left: 56vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(27) {
  --size: 0.4vw;
  --left-ini: 3vw; /* random initial translation */
  --left-end: 1vw; /* random final translation */
  left: 37vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -3s;
}

.snowflake:nth-child(28) {
  --size: 0.6vw;
  --left-ini: -8vw; /* random initial translation */
  --left-end: -3vw; /* random final translation */
  left: 58vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -9s;
}

.snowflake:nth-child(29) {
  --size: 0.2vw;
  --left-ini: 6vw; /* random initial translation */
  --left-end: 3vw; /* random final translation */
  left: 32vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(30) {
  --size: 0.2vw;
  --left-ini: -3vw; /* random initial translation */
  --left-end: 3vw; /* random final translation */
  left: 97vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(31) {
  --size: 0.2vw;
  --left-ini: 8vw; /* random initial translation */
  --left-end: -6vw; /* random final translation */
  left: 71vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -3s;
}

.snowflake:nth-child(32) {
  --size: 0.2vw;
  --left-ini: 2vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 67vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(33) {
  --size: 0.4vw;
  --left-ini: 9vw; /* random initial translation */
  --left-end: -9vw; /* random final translation */
  left: 68vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(34) {
  --size: 0.2vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: 8vw; /* random final translation */
  left: 34vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(35) {
  --size: 0.2vw;
  --left-ini: 4vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 75vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(36) {
  --size: 0.6vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: 1vw; /* random final translation */
  left: 99vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -10s;
}

.snowflake:nth-child(37) {
  --size: 0.2vw;
  --left-ini: 1vw; /* random initial translation */
  --left-end: -1vw; /* random final translation */
  left: 52vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(38) {
  --size: 0.6vw;
  --left-ini: 3vw; /* random initial translation */
  --left-end: 2vw; /* random final translation */
  left: 97vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -9s;
}

.snowflake:nth-child(39) {
  --size: 0.4vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: -9vw; /* random final translation */
  left: 3vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(40) {
  --size: 0.2vw;
  --left-ini: 6vw; /* random initial translation */
  --left-end: 3vw; /* random final translation */
  left: 52vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -7s;
}

.snowflake:nth-child(41) {
  --size: 0.6vw;
  --left-ini: 1vw; /* random initial translation */
  --left-end: -3vw; /* random final translation */
  left: 42vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -3s;
}

.snowflake:nth-child(42) {
  --size: 0.4vw;
  --left-ini: -1vw; /* random initial translation */
  --left-end: -9vw; /* random final translation */
  left: 69vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(43) {
  --size: 0.4vw;
  --left-ini: 4vw; /* random initial translation */
  --left-end: 10vw; /* random final translation */
  left: 5vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -9s;
}

.snowflake:nth-child(44) {
  --size: 0.6vw;
  --left-ini: -4vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 9vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(45) {
  --size: 0.6vw;
  --left-ini: -5vw; /* random initial translation */
  --left-end: -7vw; /* random final translation */
  left: 56vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(46) {
  --size: 0.2vw;
  --left-ini: -4vw; /* random initial translation */
  --left-end: 2vw; /* random final translation */
  left: 12vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(47) {
  --size: 0.4vw;
  --left-ini: 5vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 18vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(48) {
  --size: 1vw;
  --left-ini: -3vw; /* random initial translation */
  --left-end: 5vw; /* random final translation */
  left: 40vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(49) {
  --size: 0.6vw;
  --left-ini: -4vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 16vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(50) {
  --size: 0.4vw;
  --left-ini: 0vw; /* random initial translation */
  --left-end: -8vw; /* random final translation */
  left: 46vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(51) {
  --size: 0.4vw;
  --left-ini: -4vw; /* random initial translation */
  --left-end: 10vw; /* random final translation */
  left: 92vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(52) {
  --size: 0.6vw;
  --left-ini: -1vw; /* random initial translation */
  --left-end: 10vw; /* random final translation */
  left: 85vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(53) {
  --size: 0.8vw;
  --left-ini: 10vw; /* random initial translation */
  --left-end: 5vw; /* random final translation */
  left: 89vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(54) {
  --size: 0.6vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: 0vw; /* random final translation */
  left: 88vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(55) {
  --size: 1vw;
  --left-ini: 1vw; /* random initial translation */
  --left-end: -1vw; /* random final translation */
  left: 49vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -3s;
}

.snowflake:nth-child(56) {
  --size: 0.2vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: 7vw; /* random final translation */
  left: 18vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -10s;
}

.snowflake:nth-child(57) {
  --size: 0.8vw;
  --left-ini: 1vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 34vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(58) {
  --size: 1vw;
  --left-ini: 10vw; /* random initial translation */
  --left-end: -1vw; /* random final translation */
  left: 96vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(59) {
  --size: 0.2vw;
  --left-ini: -6vw; /* random initial translation */
  --left-end: -7vw; /* random final translation */
  left: 42vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(60) {
  --size: 1vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: -6vw; /* random final translation */
  left: 54vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(61) {
  --size: 0.4vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: 4vw; /* random final translation */
  left: 97vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -7s;
}

.snowflake:nth-child(62) {
  --size: 0.6vw;
  --left-ini: 1vw; /* random initial translation */
  --left-end: 4vw; /* random final translation */
  left: 11vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(63) {
  --size: 1vw;
  --left-ini: 6vw; /* random initial translation */
  --left-end: 6vw; /* random final translation */
  left: 4vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(64) {
  --size: 0.4vw;
  --left-ini: -4vw; /* random initial translation */
  --left-end: 3vw; /* random final translation */
  left: 84vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(65) {
  --size: 0.8vw;
  --left-ini: -2vw; /* random initial translation */
  --left-end: -2vw; /* random final translation */
  left: 82vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(66) {
  --size: 0.8vw;
  --left-ini: -1vw; /* random initial translation */
  --left-end: -6vw; /* random final translation */
  left: 60vw;
  animation: snowfall 7s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(67) {
  --size: 0.4vw;
  --left-ini: 10vw; /* random initial translation */
  --left-end: -2vw; /* random final translation */
  left: 16vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(68) {
  --size: 1vw;
  --left-ini: -4vw; /* random initial translation */
  --left-end: -1vw; /* random final translation */
  left: 65vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(69) {
  --size: 0.2vw;
  --left-ini: -1vw; /* random initial translation */
  --left-end: 3vw; /* random final translation */
  left: 74vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(70) {
  --size: 0.8vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: -6vw; /* random final translation */
  left: 14vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(71) {
  --size: 0.6vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: 6vw; /* random final translation */
  left: 24vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -7s;
}

.snowflake:nth-child(72) {
  --size: 0.2vw;
  --left-ini: -9vw; /* random initial translation */
  --left-end: -8vw; /* random final translation */
  left: 77vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -3s;
}

.snowflake:nth-child(73) {
  --size: 0.4vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: -8vw; /* random final translation */
  left: 48vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -10s;
}

.snowflake:nth-child(74) {
  --size: 0.6vw;
  --left-ini: 1vw; /* random initial translation */
  --left-end: 4vw; /* random final translation */
  left: 47vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(75) {
  --size: 0.2vw;
  --left-ini: -4vw; /* random initial translation */
  --left-end: 7vw; /* random final translation */
  left: 24vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(76) {
  --size: 0.8vw;
  --left-ini: -5vw; /* random initial translation */
  --left-end: 9vw; /* random final translation */
  left: 50vw;
  animation: snowfall 13s linear infinite;
  animation-delay: -10s;
}

.snowflake:nth-child(77) {
  --size: 0.8vw;
  --left-ini: -6vw; /* random initial translation */
  --left-end: 10vw; /* random final translation */
  left: 45vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(78) {
  --size: 0.8vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: 6vw; /* random final translation */
  left: 100vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(79) {
  --size: 0.4vw;
  --left-ini: 0vw; /* random initial translation */
  --left-end: 4vw; /* random final translation */
  left: 60vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(80) {
  --size: 1vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: 10vw; /* random final translation */
  left: 81vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(81) {
  --size: 0.2vw;
  --left-ini: 4vw; /* random initial translation */
  --left-end: -3vw; /* random final translation */
  left: 69vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(82) {
  --size: 0.4vw;
  --left-ini: 5vw; /* random initial translation */
  --left-end: 8vw; /* random final translation */
  left: 17vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(83) {
  --size: 0.6vw;
  --left-ini: 5vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 14vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(84) {
  --size: 0.8vw;
  --left-ini: 8vw; /* random initial translation */
  --left-end: -6vw; /* random final translation */
  left: 43vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(85) {
  --size: 1vw;
  --left-ini: -3vw; /* random initial translation */
  --left-end: 3vw; /* random final translation */
  left: 97vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -9s;
}

.snowflake:nth-child(86) {
  --size: 0.6vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: 2vw; /* random final translation */
  left: 87vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -10s;
}

.snowflake:nth-child(87) {
  --size: 1vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: 0vw; /* random final translation */
  left: 95vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -1s;
}

.snowflake:nth-child(88) {
  --size: 0.2vw;
  --left-ini: 5vw; /* random initial translation */
  --left-end: 8vw; /* random final translation */
  left: 44vw;
  animation: snowfall 11s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(89) {
  --size: 1vw;
  --left-ini: 4vw; /* random initial translation */
  --left-end: 1vw; /* random final translation */
  left: 13vw;
  animation: snowfall 9s linear infinite;
  animation-delay: -8s;
}

.snowflake:nth-child(90) {
  --size: 0.2vw;
  --left-ini: 9vw; /* random initial translation */
  --left-end: 6vw; /* random final translation */
  left: 59vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -9s;
}

.snowflake:nth-child(91) {
  --size: 0.2vw;
  --left-ini: 10vw; /* random initial translation */
  --left-end: -7vw; /* random final translation */
  left: 13vw;
  animation: snowfall 8s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(92) {
  --size: 0.2vw;
  --left-ini: -7vw; /* random initial translation */
  --left-end: 0vw; /* random final translation */
  left: 45vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -2s;
}

.snowflake:nth-child(93) {
  --size: 1vw;
  --left-ini: 7vw; /* random initial translation */
  --left-end: 5vw; /* random final translation */
  left: 15vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -7s;
}

.snowflake:nth-child(94) {
  --size: 0.6vw;
  --left-ini: 6vw; /* random initial translation */
  --left-end: -8vw; /* random final translation */
  left: 99vw;
  animation: snowfall 6s linear infinite;
  animation-delay: -5s;
}

.snowflake:nth-child(95) {
  --size: 0.4vw;
  --left-ini: 2vw; /* random initial translation */
  --left-end: 0vw; /* random final translation */
  left: 48vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -9s;
}

.snowflake:nth-child(96) {
  --size: 0.8vw;
  --left-ini: -9vw; /* random initial translation */
  --left-end: 5vw; /* random final translation */
  left: 19vw;
  animation: snowfall 12s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(97) {
  --size: 0.4vw;
  --left-ini: -5vw; /* random initial translation */
  --left-end: -5vw; /* random final translation */
  left: 53vw;
  animation: snowfall 15s linear infinite;
  animation-delay: -6s;
}

.snowflake:nth-child(98) {
  --size: 0.6vw;
  --left-ini: -9vw; /* random initial translation */
  --left-end: -3vw; /* random final translation */
  left: 20vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -4s;
}

.snowflake:nth-child(99) {
  --size: 0.4vw;
  --left-ini: -8vw; /* random initial translation */
  --left-end: 7vw; /* random final translation */
  left: 84vw;
  animation: snowfall 14s linear infinite;
  animation-delay: -7s;
}

.snowflake:nth-child(100) {
  --size: 0.4vw;
  --left-ini: 6vw; /* random initial translation */
  --left-end: 0vw; /* random final translation */
  left: 9vw;
  animation: snowfall 10s linear infinite;
  animation-delay: -3s;
}

#card-toggle {
  position: absolute;
  left: 50%;
  z-index: 1;
}

.card {
  display: block;
  position: relative;
  z-index: 2;
  top: 25%;
  perspective: 2000px;
  margin: 300px auto 0;
  width: 90%;
  max-width: 750px;
  height: 333px;
}

.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  background: #FAFAFA;
  cursor: pointer;
  transition: all 0.5s ease-out;
  transform-origin: 0 0;
}

.front-flap {
  transform: rotateX(21deg);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}
.front-flap.outside {
  z-index: 5;
}
.front-flap.inside {
  z-index: 4;
}

.front-flap.inside img{
  border-bottom: 1mm #f3f0f0 solid;
}

.stern {
  position: absolute;
  top: 0;
  height: 60%;
  animation-name: star;
  animation-iteration-count: infinite;
}


.stern1 {
  left: 42%;
  top: -4rem;
  animation-duration: 3s;
  animation-delay: 1s;
}

.stern2 {
  left: 51%;
  animation-duration: 2s;
}

.stern3 {
  left: 80%;
  top: -3rem;
  animation-duration: 3s;
  animation-delay: 1s;
}

.stern4 {
  left: 87%;
  top: -7rem;
  animation-duration: 3s;
}

.back-flap.inside {
  z-index: 2;
  transform: rotateX(-4deg);
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.25), 0 5px 10px rgba(0, 0, 0, 0.25);
}

.card:hover .front-flap {
  transform: rotateX(24deg);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}

#card-toggle:checked + .card .front-flap {
  transform: rotateX(165deg);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08), 5px 5px 5px rgba(0, 0, 0, 0.08), -5px 5px 5px rgba(0, 0, 0, 0.08);
  z-index: 400;
}
#card-toggle:checked + .card .back-flap {
  transform: rotateX(-1deg);
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.25), 0 5px 10px rgba(0, 0, 0, 0.25);
}/*# sourceMappingURL=style.css.map */

.pure-img{
  max-width:120%;
}

.stern-mm{
  display:none;
}

@media screen and (min-width:823px){
  .stern-mm{
    display:block;
    position:absolute;
    z-index:100;
    top:6.3rem;
    left:10.45rem;
    width:6%;
    animation-name: star;
    animation-iteration-count: infinite;
  }
  
  @keyframes star {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0px);
    }
  }


  .stern-mm {
    animation: pulsieren 3s infinite ease-in-out, blinken 3s infinite ease-in-out;
    transform-origin: center; /* Mittelpunkt für die Skalierung */
  }
  
  @keyframes pulsieren {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 10px gold) drop-shadow(0 0 20px gold);
    }
    50% {
      transform: scale(1.1);
      filter: drop-shadow(0 0 20px gold) drop-shadow(0 0 40px gold);
    }
  }
  
  @keyframes blinken {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
  
}