* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #EFF5D2;
  background-image: url(../image/pexels-moose-photos-170195-1037998-removebg-preview.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Typewriter */
.body-text {
  text-align: center;
  margin-top: 8%;
  font-size: 32px;
  font-family: 'Gill Sans';
  color: #556B2F;
  margin-bottom: 5%;
}

#typewriter {
  font-family: 'Courier New', monospace;
  font-size: 1.6em;
  color: #004030;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid orange;
  width: fit-content;
  animation: blink 0.7s step-end infinite;
  margin: 20px auto;
  text-align: center;
  background: transparent;
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: orange; }
}

/* Gift Container */
.contianer {
  position: relative;
  background: #8AA624;
  display: block;
  margin: 0 auto;
  width: 50%;
  height: 600px;
  border-radius: 14px;
  border: 8px solid #556B2F;
  overflow: hidden; /* keep particles inside */
}

.box {
  text-align: center;
  background: transparent;
}

.some-qestions {
  background: transparent;
  text-align: center;
  font-size: 30px;
  margin-top: 15px;
  color: #004030;
}

.inputs {
  display: grid;
  grid-column: 1;
  background: transparent;
  margin: 18px 20px;
}

label {
  background: transparent;
  margin-top: 6%;
}

input {
  display: block;
  margin: 0 auto;
  padding: 10px 8px;
  border: 3px solid #8FA31E;
  margin-top: 15px;
  width: 55%;
  text-align: center;
  margin-bottom: 2%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

input:focus {
  outline: 2px solid #90c090;
}

.btn {
  margin-top: 6%;
  text-align: center;
  background: transparent;
}

.btn button {
  border-radius: 8px;
  padding: 10px;
  border: 2px solid yellowgreen;
  color: #8FA31E;
  transition: background-color 0.3s ease, transform 0.3s ease;
  font-size: 100%;
  cursor: pointer;
}

.btn button:hover {
  background: radial-gradient(circle at 3.1% 8.2%, rgb(248, 250, 107) 0%, rgb(238, 148, 148) 98.2%);
  transform: scale(1.05);
}

/* After click gift */
.after {
  text-align: center;
  visibility: hidden;
  margin-bottom: 10%;
  color: #004030;
  background: #EFF5D2;
  border: 1px solid #8AA624;
}

.after p {
  line-height: 160%;
  font-size: 25px;
  background-color: #F0F2BD;
  font-family: 'Segoe UI', sans-serif;
}

/* Footer */
footer {
  margin-top: 3%;
  margin-bottom: 1%;
}

.footer-text p {
  text-align: center;
  font-size: 34px;
  color: #708A58;
  font-family: 'Bottanical', cursive;
}
footer p a{
    color: #004030;
    transition: ease-in-out;
}
footer p a:hover{
    cursor: pointer;
    transform: scale(1.06);
}

/* Particles */
.particle {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: yellow;
  animation: floatUp 4s linear forwards;
}

@keyframes floatUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-650px) scale(0.5); opacity: 0; }
}
/* 📱 Responsive Design */
@media (max-width: 768px) {
  .contianer {
    width: 85%;
    height: auto;
    min-height: 500px;
    padding: 15px;
  }

  .some-qestions {
    font-size: 22px;
  }

  .inputs label {
    font-size: 14px;
  }

  input {
    width: 90%;
    font-size: 16px;
  }

  .btn button {
    font-size: 16px;
    padding: 8px 14px;
  }

  .after p {
    font-size: 18px;
    padding: 10px;
  }

  .footer-text p {
    font-size: 20px;
  }

  #typewriter {
    font-size: 1.2em;
  }
}

@media (max-width: 480px) {
  .contianer {
    width: 95%;
    min-height: 450px;
  }

  .some-qestions {
    font-size: 18px;
  }

  input {
    font-size: 14px;
    padding: 8px;
  }

  .btn button {
    font-size: 14px;
    padding: 6px 12px;
  }

  .after p {
    font-size: 16px;
  }

  #typewriter {
    font-size: 1em;
  }
}