/* 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 {
  background-color: white;
  color: black;
  font-family: Verdana;
}
/* CSS pour le début d'un jeu questionnaire sur l'ascension du K2, avec des animations de rochers et éléments thématiques */
body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(to bottom, #e6f7ff, #ffffff); /* Dégradé bleu ciel pour évoquer le ciel alpin */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.quiz-container {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  position: relative;
}
h1 {
  color: #2c3e50;
  font-size: 2.5em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
p {
  color: #34495e;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.start-button {
  background: linear-gradient(45deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.2em;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.start-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}
/* Animations de rochers flottants pour un effet immersif */
.rock {
  position: absolute;
  background: #95a5a6;
  border-radius: 50%;
  opacity: 0.7;
  animation: float 6s ease-in-out infinite;
}
.rock:nth-child(1) {
  width: 50px;
  height: 50px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}
.rock:nth-child(2) {
  width: 30px;
  height: 30px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}
.rock:nth-child(3) {
  width: 40px;
  height: 40px;
  bottom: 30%;
  left: 20%;
  animation-delay: 4s;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}
/* Effet de neige légère pour l'ambiance montagneuse */
.snow {
  position: absolute;
  top: -10px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.snowflake {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fall 10s linear infinite;
}
.snowflake:nth-child(1) { left: 10%; animation-delay: 0s; }
.snowflake:nth-child(2) { left: 20%; animation-delay: 1s; }
.snowflake:nth-child(3) { left: 30%; animation-delay: 2s; }
.snowflake:nth-child(4) { left: 40%; animation-delay: 3s; }
.snowflake:nth-child(5) { left: 50%; animation-delay: 4s; }
.snowflake:nth-child(6) { left: 60%; animation-delay: 5s; }
.snowflake:nth-child(7) { left: 70%; animation-delay: 6s; }
.snowflake:nth-child(8) { left: 80%; animation-delay: 7s; }
.snowflake:nth-child(9) { left: 90%; animation-delay: 8s; }
@keyframes fall {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(100vh); }
}