.logo a {
    color:#565656;
    text-decoration: none;

}


@media (min-width: 500px) {
  .mainContent   {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Adjust to your needs */
    max-width:400px;
    margin:0 auto;
  }}
  
  .about {
    text-align: left;

  }
  


@media (max-width: 500px) {
    .mainContent  {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* Adjust to your needs */
      max-width: 80vw;
      margin:0 auto;
    }
  }
  
  
  html, body {
    height: 100%; /* Ensure the body takes full height of the viewport */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
  }
  
  
  
  
  
  
  
  

  
  .footer p {
  
    font-size: 11px;
    /*font-weight: 100 !important;*/
    font-family: var(--text-font);
    font-weight: 400;
    font-style: normal;
    text-align: center;
  }
  
  
  
  
    

  
  .header .logo  {
    font-family: var(--text-font);
    font-weight: 400 !important;
    font-style: normal;
    font-size:16px;
  
  
  }
  
  
  
  
  
  
  p {
    font-family: var(--text-font);
  font-weight: 400;
  font-style: normal;
  font-size:13px;
  
  /*font-size:16px;*/
  
  }
  
  h6 {
  
    font-family: var(--header-font);
    font-weight: 100;
    font-style: normal;
    /*opacity:%;*/
    font-size: 56px ;
    text-align: center;
  
  }
  
  
  h5 {
    font-family: var(--text-font);
  font-weight: 400;
  text-transform: uppercase;
  font-style: normal;
  font-size:12px;
  padding-top: 15px;
  letter-spacing: px;
  }
  
  h4 {
    font-family: var(--text-font);
  font-weight: 700;
  font-style: normal;
  font-size:12px;
  padding-top: 20px;
  letter-spacing: px;
  }
  
  h3 {
    font-family: var(--header-font);
  font-weight: 700;
  font-style: normal;
  font-size:20px;
  padding-top: 15px;
  letter-spacing: px;
  }
  
  
  h2 {
    font-family: var(--header-font);
  font-weight: 400;
  font-style: normal;
  font-size:20px;
  margin-top: 55px;
  border-bottom: .5px solid #565656; 
  padding-bottom:10px;
  letter-spacing: px;
  text-align: center;
  
  }
  

  
  h1 {
    font-family: var(--header-font);
    font-weight: 700;
    font-style: normal;
    font-size: 56px ;
    text-align: center;
  
    }
    
  
  
      
    
  
  
  
  /* Responsive adjustments */
  @media (max-width: 600px) {
    h1 {
      font-size: 32px; /* Adjusted for small screens */
    }
    h2 {
      font-size: 24px; /* Adjusted for small screens */
    }
    h3 {
      font-size: 20px; /* Adjusted for small screens */
    }
    h4 {
      font-size: 14px; /* Kept at 16px or slightly adjust if needed */
    }
    p {
      font-size: 14px; /* Optionally adjust for small screens */
    }
  }
  
        
      
    
  p, h1, h2, h3 {
            color: #565656; 
            text-decoration:none;
  }
    
  a{
    color:green;
  }
      
        
      
  body {
            background-color:#f4f0ec;
            margin:0;
            padding:0;
            box-sizing: border-box;
  }
  
  
  
.footer {
    /* Ensures the footer stays at the bottom and is not obscured by iOS UI elements */
    padding: 0rem 0;
      padding-bottom: env(safe-area-inset-bottom); /* Adjust for iOS safe area */
  
  }
  
        
    
  :root {
          
          --system-ui:  system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  
  
  :root {
          --header-font: "neue-haas-grotesk-display", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  
  
  :root {
          --text-font: "neue-haas-grotesk-text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  
  
  
  
  

  
  
  
  
  
  ::-moz-selection {
        color: green;
        background: hsla(30,26.7%,94.1%, 0%);
  }
      
  ::selection {
        color: green;
        background: hsla(30,26.7%,94.1%, 0%);
  }