form {
  position: relative;
  z-index: 30;
}

  input, textarea {
    border-radius: 15px;
}
     

.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 300px;    
  margin: 0 auto 15px;
}
  #message {
    padding: 5px 15px;
    margin-top: 5%;
    width: 70%;
    height: 30%;
    border-radius: 15px;
    
    
  }

/* Labels float to the left but stay visible */
.input-container label {
  position: absolute;
  left: -130px;              /* adjust this number to move labels left/right */
  width: 120px;              /* keeps alignment similar to your old layout */
  text-align: right;
  font-weight: bold;
  white-space: nowrap;
}

/* Input fields stay centered */
.input-container input {
  width: 300px;
  height: 25px;
  max-width: 80%;
  font-size: 20px;
  padding: 5px 10px;
}



/* textarea stays controlled by #message */


@media (max-width: 1000px) {

  /* Slightly shrink the input container so it doesn't touch edges */
  .input-container {
    width: 95%;
    max-width: 95%;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin: 0 auto 15px;
  }

  /* Reset the absolute-positioned labels */
  .input-container label {
    position: static;
    left: 0;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
    white-space: normal;
  }

  /* Reset the fixed input width */
  .input-container input {
    width: 100%;
    max-width: 100%;
    height: 36px;
    font-size: 18px;
    padding: 8px 12px;
    box-sizing: border-box;
  }

  /* Message box full width with slight inward margin */
  #message {
    width: 95%;
    max-width: 95%;
    padding: 10px 12px;
    height: auto;
    box-sizing: border-box;
    margin: 0 auto;
  }

  /* Prevent any horizontal scrolling */
  html, body {
    overflow-x: hidden;
  }
}