/* FAQ-knapp med myk grå bakgrunn */
.faq-btn {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 4px 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.faq-btn:hover {
  background-color: #e9ecef;
}

/* Weather effects */
@keyframes fallRain {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes fallSnow {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes fallLeaf {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
@keyframes moveCloud {
  0% { transform: translateX(0); }
  100% { transform: translateX(110vw); }
}

body.sunny {
  background: linear-gradient(to bottom, #87CEEB, #FFD700);
}
body.rainy {
  background: linear-gradient(to bottom, #4a90e2, #1c1c1c);
}
body.snowy {
  background: linear-gradient(to bottom, #e0f7fa, #ffffff);
}
body.cloudy {
  background: linear-gradient(to bottom, #d3d3d3, #808080);
}

/* Snølag, pytt og løvhaug */
#snow-layer {
  transition: height 0.3s ease;
}
#puddle {
  transition: width 0.3s ease, height 0.3s ease;
}
#leaf-pile span {
  display: inline-block;
  margin: 0 2px;
}

/* Skyer i ulike størrelser */
.cloud-small {
  font-size: 2rem;
  opacity: 0.8;
  position: fixed;
}
.cloud-medium {
  font-size: 3.5rem;
  opacity: 0.9;
  position: fixed;
}
.cloud-large {
  font-size: 5rem;
  opacity: 1;
  position: fixed;
}
@keyframes moveCloudSlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(110vw); }
}
@keyframes moveCloudMedium {
  0% { transform: translateX(0); }
  100% { transform: translateX(110vw); }
}
@keyframes moveCloudFast {
  0% { transform: translateX(0); }
  100% { transform: translateX(110vw); }
}