/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(180deg, #0b1d3a, #123);
  display: block;
  flex-direction: column;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.card {
  margin-top: 60px;
  margin-bottom: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  max-width: 400px;
  animation: float 6s ease-in-out infinite;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container img {
  height: auto;
}

/* linkes & rechtes Bild */
.container .side {
  width: 15%;
}

/* mittleres Bild */
.container .center {
  width: 70%;
}



.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

.tree {
  font-size: 5rem;
  margin: 20px 0;
}

.message {
  font-size: 1rem;
  margin-bottom: 25px;
}

button {
  background: #e63946;
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

button:hover {
  background: #ff4d5a;
  transform: scale(1.05);
}

.hidden {
  display: none;
}

#surprise {
  margin-top: 20px;
  font-size: 1.2rem;
}

footer {
  margin-top: 20px;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Schnee-Effekt */
.snow::before,
.snow::after {
  content: '';
  top: -100vh;
  left: 0;
  width: 100%;
  height: 200vh;
  background-image: radial-gradient(white 1px, transparent 1px);
  background-size: 50px 50px;
  animation: snow 20s linear infinite;
  opacity: 0.4;
}

.snow::after {
  animation-duration: 30s;
  opacity: 0.6;
}

@keyframes snow {
  to {
    transform: translateY(100vh);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}