body{
    background: #10002b;
    font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
    flex-direction: column; 
    overflow: auto;
    height: 250vh;
    scroll-behavior: smooth;
    display: flex;
    
}

.navbar{
    background: linear-gradient(#7b2cbf,#c77dff);
    padding-inline: 10%;
    height: auto;
    border-radius: 10px;
}
.navdiv img{
    width: 17%;
    height: auto;
}
.tellus img{
    width: 36%;
    position: absolute;
    top: 34%;
    left: 6%;
}
.enter{
    position: absolute;
    background: linear-gradient(to right,#000000,#3c096c);
    padding: 0;  
   width: 40%;  
   height: 60%; 
   top: 30%;
   left: 55%;
    border-radius: 20px;
    border: none;
    overflow: hidden;
    
}
textarea {
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: aliceblue;
    border: none;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 100%;
    margin-left: 20px;
    margin-top: 25px;
    outline: none;
  }
button{
    color: aliceblue;
    position: absolute;
    top: 80%;
    left:16%;
    padding: 1% 3.5%;
    border-radius: 15px;
    font-size: 1.2rem;
    font-family: "Poppins", sans-serif;;
    background: linear-gradient(to right, #070012, #240343);
    text-decoration: none;
    border: none;
    box-shadow: 0 0 10px rgba(109, 22, 191, 0.8); 
    transition: box-shadow 0.2s ease;
}
button:hover{
    transform: scale(1.3);
    transition: 2s;
    box-shadow: 0 0 20px rgba(109, 22, 191, 1.0), 0 0 30px rgba(109, 22, 191, 0.8); /* Stronger glow on hover */
}
button a {
    text-decoration: none;
    color: aliceblue;
}
.output {
    background: linear-gradient(to right,#000000,#3c096c);
    position: absolute;
    top: 125%;
    left: 8%;
    width: 82%;
    height: 75%;
    padding: 20px;
    color: white;
    border-radius: 25px;
    overflow-y: auto;  /* Enable vertical scrolling if content exceeds height */
    
  }
  footer {
    background: #10002b;
    color: white;
    text-align: center;
    padding: 0.2%;
    position: fixed; 
    bottom: 0;
    width: 100%;
    font-size: 0.8rem;
  }
  @keyframes appear {
    from{
      opacity: 0;
      scale: 0.5;
    }
    to{
      opacity: 1;
      scale:1.2;
    }
  }
  .responseheader h1{
    position: absolute;
    top: 105%;
    left: 43%;
    color: aliceblue;

  }
  /* ------------------ Responsive Media Queries ------------------ */
  /* Phones (up to 480px) */
@media (max-width: 480px) {
  .navbar {
    padding-inline: 5%;
  }
  .navdiv img {
    width: 40%;
  }
  .tellus img {
    top: 15%;
    left: 15%;
    width: 70%;
  }
  .enter {
    top: 40%;
    left: 10%;
    width: 80%;
    height: 30%;
  }
  button {
    top: 75%;
    left: 25%;
    width: 50%;
    font-size: 1.3rem;
    padding: 3% ;
  }
  .output {
    top: 130%;
    left: 0.7%;
    width: 80%;
    height: 60%;
    left: 5%;
  }
  .responseheader h1 {
    top: 120%;
    left: 36%;
    font-size: 1.5rem;
  }
  .footer{
    background: linear-gradient(#7b2cbf,#c77dff);
  }
}
/* Laptops (481px to 1024px) */
@media (min-width: 481px) and (max-width: 1024px) {
  .navbar {
    padding-inline: 10%;
  }
  .navdiv img {
    width: 20%;
  }
  .tellus img {
    top: 32%;
    left: 5%;
    width: 45%;
  }
  .enter {
    top: 28%;
    left: 50%;
    width: 45%;
    height: 60%;
  }
  button {
    top: 80%;
    left: 16%;
    width: 30%;
    font-size: 1.2rem;
    padding: 1% 3.5%;
  }
  .output {
    top: 115%;
    left: 8%;
    width: 82%;
    height: 75%;
  }
  .responseheader h1 {
    top: 105%;
    left: 43%;
    font-size: 1.6rem;
  }
}
/* Desktops (1025px and above) */
@media (min-width: 1025px) {
  .navbar {
    padding-inline: 10%;
  }
  .navdiv img {
    width: 17%;
  }
  .tellus img {
    top: 34%;
    left: 6%;
    width: 36%;
  }
  .enter {
    top: 30%;
    left: 55%;
    width: 40%;
    height: 60%;
  }
  button {
    top: 76%;
    left: 16%;
    width: auto;
    font-size: 1.4rem;
    padding: 2% 4.5%;
  }
  .output {
    top: 120%;
    left: 8%;
    width: 82%;
    height: 75%;
  }
  .responseheader h1 {
    top: 105%;
    left: 43%;
    font-size: 2rem;
  }
}