/* styles.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }
  
  /* Responsive Container with Scaling */
  .responsive-container {
    width: 80vw; /* Container width scales with viewport width */
    max-width: 1200px; /* Maximum width */
    aspect-ratio: 16 / 9; /* Maintain 16:9 aspect ratio */
    background-color: white;
    border: 2px solid #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2vh; /* Padding scales with viewport height */
    overflow: hidden;
  }
  
  .content {
    width: 100%;
    text-align: center;
    color: #333;
  }
  
  /* Scalable Text Block */
  .text-block {
    margin: 2vh 0; /* Margin scales with viewport height */
    font-size: calc(1.2vw + 0.8vh); /* Scalable text size */
    line-height: 1.5;
    padding: 1vh; /* Padding scales with viewport height */
  }
  
  /* Responsive Form Styles */
  .responsive-form {
    display: flex;
    flex-direction: column;
    gap: 1vh; /* Gap scales with viewport height */
    width: 60%; /* Form width scales with container width */
    max-width: 500px; /* Maximum width */
    margin: 0 auto;
  }
  
  .responsive-form label {
    font-size: calc(0.9vw + 0.5vh); /* Scalable label size */
    text-align: left;
  }
  
  .responsive-form input,
  .responsive-form textarea {
    padding: 0.8vh; /* Padding scales with viewport height */
    font-size: calc(1vw + 0.5vh); /* Scalable input text size */
    border: 1px solid #ccc;
    border-radius: 0.5vh; /* Border-radius scales with viewport height */
    width: 100%;
    box-sizing: border-box;
  }
  
  .responsive-form button {
    padding: 1vh; /* Padding scales with viewport height */
    font-size: calc(1vw + 0.5vh); /* Scalable button text size */
    color: white;
    background-color: #333;
    border: none;
    border-radius: 0.5vh; /* Border-radius scales with viewport height */
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .responsive-form button:hover {
    background-color: #555;
  }
  
  /* Media Queries for Very Large Screens */
  @media (min-width: 1440px) {
    .responsive-container {
      width: 70vw; /* Adjust width for very large screens */
    }
  
    .responsive-form {
      width: 50%; /* Adjust form width for very large screens */
    }
  }