html {
            font-size: 20px; /* Base font size */
              }
              
        body {
                text-wrap: pretty;
                font-size: 1.5rem; /* Equivalent to 16px, scales with root */
                line-height: 1.6; /* Unitless line height for proportional scaling */
                background-color: #FF8383; /* CHANGED: Bright pink background */
                color: ##080808; /* CHANGED: White default text color */
                justify-content: center;
                min-height: 100vh;
                text-align: center;
              }
              
        h1 {
                font-size: 4rem; /* Larger heading, scales with root */
              }
              
        p {
                font-size: 3rem;
              }
              
             
              
              /* Example of responsive font sizing with media query */
        @media (max-width: 768px) {
                
        h1 {
                  font-size: 3rem;
                }
                
        p {
                  font-size: 4rem;
                }
      
}
        /* 3. Headings Styling */
        h1, h2 {
            color: #950B0B; /* Dark Red/Maroon for emphasis */
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            text-align: center;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            display: inline-block; /* Helps center the border */
        }

        /* 4. Paragraph Formatting (Centered with Padding) */
        p {
            /* Centering paragraphs as requested */
            text-align: center;
            font-family: courier;
            margin-bottom: 1rem;
            color: #080808; /* Primary text color (Almost Black) to contrast with light container */
        }
        
        nav {
        font-family: "Open Sans", sans-serif;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1.5rem; /* Equivalent to 16px, scales with root */
        line-height: 1.6; /* Unitless line height for proportional scaling */
        background-color: #FF8383; /* CHANGED: Bright pink background */
        color: ##080808; /* CHANGED: White default text color */
}

        nav a {
          text-decoration: none;
          color: #333;
          padding: 10px 15px;
          background-color: #f0f0f0;
          border-radius: 5px;
}

        nav a:hover {
          background-color: #FFC183;
          color: #A824FF;
}

          nav a:active {
            background-color: #ccc;
}

            nav a:focus {
              outline: 2px solid blue; /* Accessibility focus indicator */
}
  
/* Default padding for larger screens */

.flex-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto new lines */
  justify-content: space-around; /* Example: distribute space around items */
}

.flex-item {
  flex: 1 1 200px; /* Example: grow, shrink, and have a base width of 200px */
  /* Other styling for your flex items */
}

.container {
  padding: 10px;
}

/* Styles for screens smaller than 768px (e.g., tablets and mobile) */
@media only screen and (max-width: 768px) {
  .container {
    padding: 15px; /* Reduced padding for smaller screens */
  }

  .flex-item {
    padding: 10px; /* Add padding to individual items if needed */
  }
  
  
}

/* Styles for screens smaller than 480px (e.g., mobile phones) */
@media only screen and (max-width: 480px) {
  .container {
    padding: 10px; /* Even less padding for very small screens */
    
  }
  
  
}