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

}


  
  
  
  
  
  
  

  
  .footer p {
  
    font-size: 11px;
    /*font-weight: 100 !important;*/
    font-family: var(--text-font);
    font-weight: 400;
    font-style: normal;
    text-align: center;
  }
  
  
  
  
    
.time p {
   font-family: var(--text-font);
  font-weight: 400 !important;
  font-style: normal;
  font-size:11px ;
letter-spacing:em;
margin: 0 auto;
text-align: center !important;
/*margin-top:15px;*/
margin-top:11px;
}




  
  .header .logo  {
    font-family: var(--text-font);
    font-weight: 400 !important;
    font-style: normal;
    font-size:16px;
  letter-spacing:em;
  
  }
  
  
  
  
  
  
  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:#565656;
  }
      
        
      
  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: #f4f0ec;
        background: hsla(30,26.7%,94.1%, 0%);
  }
      
  ::selection {
        color: #f4f0ec;
        background: hsla(30,26.7%,94.1%, 0%);
  }
  
  
  

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

  }
  

/*
@media (max-width: 500px) {
    .indexContent  {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; 
      max-width: 80vw;
      margin:0 auto;
    }
  }
  */

  @media (max-width: 500px) {
    .indexPage .indexContent   {
      display:grid;
      justify-content: center;
      align-items: center;
      height: auto; 
      max-width: 80vw;
      margin:0 auto;

    }


     html.indexPage,     body.indexPage{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between; /* Apply justify-content: space-between only here */

  }

  }
  


  
  html, body {
    height: 100%; /* Ensure the body takes full height of the viewport */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
  }
  



  .feedContent {
    margin: 0 auto !important;
  }

  .feedContent {
    text-align: center; /* Optional: To center align the images */
}

.feedContent img {
    display: block;
    margin: 0 auto; /* Optional: To center align the images */
}


.header {
  height: 26px; /* Adjust this height as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Optionally, you can add a background color or other styling */
  background-color: #f0f0f0; /* Example background color */
}

/* Ensure the time container is centered within the header */
.time {
  margin: 0 !important;
      white-space: nowrap; /* Prevent wrapping */

}





/*

  .time-segment {
    display: inline-block !important;
    width: 2ch !important; 
    text-align: right !important;
  }
  .time-separator {
    display: inline-block !important;
    text-align: center !important;
      width: 0px !important;
    margin: 0 -0.25ch !important; 
    text-align: center !important;
    
  }
  .date-time-separator {
    display: inline-block !important;
    width: 2ch !important; 
  }

  */





  .time-segment {
    display: inline-block !important;
    width: 2ch !important; /* 2 character width */
    text-align: center !important;
  }
  .time-separator {
    display: inline-block !important;
    width: 0ch !important;
    text-align: center !important;
    margin: 0 -0.25ch !important; 
    text-align: center !important;
  }
  .date-time-separator {
    display: inline-block !important;
    width: 3ch !important; /* Space between date and time */
  }













@media (min-width: 500px) {
  .indexContentQR   {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
    max-width:400px;
    margin:0 auto;
  }}
  

  @media (max-width: 500px) {
    .indexPage .indexContentQR   {
      display:flex;
      justify-content: center;
      align-items: center;
      height: 100vh; 
      max-width: 80vw;
      margin:0 auto;

    }


  }