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

}


  
  
  
  
  
  
  

  
  .footer p {
  
    font-size: 11px;
    /*font-weight: 100 !important;*/
    font-family:  -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif !important;
    font-weight: normal;
    font-style: normal;
    text-align: center;
  }
  
  
  
  
    
.time p {
    font-family: "aesthet-nova", serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
      
  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;
  
  }
  
  
  
  
  
  
      
    
  
  
  
  /* 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: 11px; /* Optionally adjust for small screens */
      /*font-size: 14px;*/
    }
  }
  
        
      
    
  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 */
  
  }
  
        
p {
 
    color: #565656 ;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif !important;
    font-weight: normal !important;
    font-style: normal;
    font-size: 11px !important;
    letter-spacing: normal;
      }

    h1 {
    
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size:38px ;
    }

    #randImg {
        opacity: 0;
        transition: opacity 3s ease-in-out;
    }
  

    p, h1, h2, h3 {
        color: #565656 !important; 
        text-decoration:none ;
      }

      a {
        color: #565656 !important; 
        text-decoration:none ;
        font-family: "aesthet-nova", serif !important;
        font-weight: 500 !important;
        font-style: normal !important;
      }
    
  
    body {
        background-color:#f4f0ec !important;
    }
    




    ::selection {
      background: none !important;
      color: hsla(30,26.7%,94.1%, 0%);
      
      /* same green as contact form #007d00 */
      
      
            /*
            color: hsla(30,26.7%,94.1%, 0%);
            background: hsla(30,26.7%,94.1%, 0%);
            */
          }

    ::-moz-selection { /* Code for Firefox */
      background: none !important;
      color: hsla(30,26.7%,94.1%, 0%);
      

      /* same green as contact form #007d00 */

   /*   color: hsla(30,26.7%,94.1%, 0%);
      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 */
  }