body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: sans-serif;
  overflow: hidden;
}

.sky {
  height: 100vh;
  width: 100%;
  position: relative;
}

body, input, button {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #eee;
  background: transparent;
}

#worry-form{
    height: 5vh;
}


#worry-input {
  width: 40vw;
  min-height: 20px;
  padding: 1%;
  font-size: 15px;
  border-radius: 8px;
  border: 1.5px solid #ccc;
  background: rgba(255 255 255 / 0.1);
  color: #eee;
  resize: vertical;
  overflow-wrap:break-word;
  white-space: pre-wrap;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.3s ease;
}

#worry-input:focus {
  outline: none;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

#worry-submit {
  width: fit-content;
  height: fit-content;
  font-size: 12px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(145deg, #4a4a6a, #2c2c48);
  color: #e0d7ff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@keyframes buttonTwinkle {
  0%, 100% {
    box-shadow:
      0 0 8px 2px rgba(224, 215, 255, 0.7),
      0 0 15px 5px rgba(200, 180, 255, 0.5);
    background: linear-gradient(145deg, #4a4a6a, #2c2c48);
    color: #e0d7ff;
  }
  50% {
    box-shadow:
      0 0 14px 4px rgba(224, 215, 255, 1),
      0 0 25px 8px rgba(220, 200, 255, 0.7);
    background: linear-gradient(145deg, #5a5a7a, #3c3c58);
    color: #f0eaff;
  }
}

#worry-submit:hover {
  background: linear-gradient(145deg, #6a6a8a, #4c4c68);
  box-shadow:
    0 0 20px 6px rgba(224, 215, 255, 1),
    0 0 35px 12px rgba(220, 200, 255, 0.9);
  color: #f5f0ff;
}


form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

input {
  padding: 10px;
  font-size: 16px;
  width: 300px;
  border-radius: 5px;
  border: none;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background: #ffffffaa;
  border-radius: 5px;
  cursor: pointer;
}

#stars-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #3b2e5a, #524e7b, #2c5364, #0f2027);
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: twinkle 3s ease-in-out infinite alternate;
    pointer-events: none;
    filter: drop-shadow(0 0 2px #fff);
}

#stars-canvas {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      z-index: -1;
      display: block;
    }

@keyframes twinkle {
    0%, 100% { 
        opacity: 0.45; 
    }
    50% { 
        opacity: 2; 
        width: 2.5px;
        height: 2.5px;
    }
}


.shooting-star {
  position: absolute;
  white-space: nowrap;
  color: white;
  font-size: 14px;
  pointer-events: none;
  animation: flyAcross 3s ease-out forwards;
  opacity: 1;
  will-change: transform, opacity;
}

.shooting-star {
  /* other styles */
  animation-timing-function: linear !important;
}

@keyframes flyAcross {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(800px, -300px) rotate(45deg);
  }
}

@keyframes flyCustom {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate));
    opacity: 0;
  }
}
@keyframes flyAcross {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate));
  }
}