.logo a {
    color: #FFF7E8;
    text-decoration: none;
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .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: 14px; /* Optionally adjust for small screens */
    }
  }
  
        
      
    
  p, h1, h2, h3 {
            color: #FFF7E8; 
            text-decoration:none;
  }
    
  a{
    color:#FFF7E8;
  }
      
        
      
  body {
    /* background-color:#f4f0ec !important; */
    /*background-color: #eae0c8 !important; */
    background-color: #00416A !important;
                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 {
    /*font-family: "aesthet-nova", serif !important;*/
    font-weight: 400 !important;
    font-style: normal !important;
      }
  
    h1 {
    
      /*  font-family: "aesthet-nova", serif !important;*/
    font-weight: 500 !important;
    font-style: normal !important;
    font-size:38px ;
    }
  
    #randImg {
        opacity: 0;
        transition: opacity 3s ease-in-out;
    }
  
  
    p, h1, h2, h3 {
        color: #FFF7E8 !important; 
        text-decoration:none ;
      }
  
      a {
        color: #FFF7E8; 
        text-decoration:none ;
       /* font-family: "aesthet-nova", serif !important;*/
        font-weight: 400 !important;
        font-style: normal !important;
      }
    
  
    body {
        /* background-color:#f4f0ec !important; */
    /*background-color: #eae0c8 !important; */
    background-color: #00416A !important;
    }
    
  
    ::-moz-selection { /* Code for Firefox */
      color: hsla(30,26.7%,94.1%, 0%);
      background: hsla(30,26.7%,94.1%, 0%);
    }
    
    ::selection {
      color: hsla(30,26.7%,94.1%, 0%);
      background: hsla(30,26.7%,94.1%, 0%);
    }
  
  
    
  
  
  
  
  
  
  
  
  
  
  
  ::-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) {
    .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;
  /*background-color: #f0f0f0; */
      /* background-color:#f4f0ec !important; */
    /*background-color: #eae0c8 !important; */
    background-color: none !important;
  }
  
  /* 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; /* 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: 1ch !important; /* Space between date and time */
    margin: 0px auto !important; 
    text-align:center !important;
    padding-left:1px !important;
  /*  padding-left: 2px !important; */
  }
  
  
  
  
  /* isb styles below */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /*
  #datetime-container {
    display: flex;
    justify-content: space-between;
    width: 0px;
  }
  */
  
  #ct7 {
    white-space: nowrap;
  }
  
  
  
  .middle-menu p
  {color:white !important;
  }
  
  .middle-menu
  {
    animation: fadeIn 8s ease-in-out;
    /*animation: fadeIn 6s ease-in-out;*/
  
  }
  
  
  
  @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
  }
  
  
  
  
  
  
  .header {
    line-height: 5px;
    padding-top:6px;
  }
  
  
  /*
  p {
    font-family: "forma-djr-text", sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    text-align: center;
    font-size:12px;
  
      }
    */
  
    h1 {
    
    /*font-family: "forma-djr-deck", sans-serif !important;
    font-weight: 700 !important;
        letter-spacing: -.9px;
  */
    font-family: elmhurst, serif;
    font-style: normal !important;
    text-align: center;
    font-size:22px;
  letter-spacing: px;
  }
  
    p, h1, h2, h3 {
        color: #FFF7E8; 
      }
    
  
    
    body {
        background-color:#00416A !important;
    }
    
    ::-moz-selection { /* Code for Firefox */
      color: hsla(30,26.7%,94.1%, 0%);
      background: hsla(30,26.7%,94.1%, 0%);
    }
    
    ::selection {
      color: hsla(30,26.7%,94.1%, 0%);
      background: hsla(30,26.7%,94.1%, 0%);
    }
  
  
  
  
  
  
  
  
  /* Existing styles for arrows */
  .arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 10; /* Ensure arrows are above other content */
  }
  
  
  
  
  @media (min-width: 600px) {
  .left {
  left: 10px;
  /*font-weight: 400;*/
      /*color: black; */
      color:#FFF7E8 !important;
      font-family: sans-serif !important;
      font-weight: 100 !important;
  }}
  
  
  
  @media (min-width: 600px) {
  .right {
  right: 10px; 
  /*font-weight: 400;*/
      /*color: black; */
      color:#FFF7E8 !important;
      font-family: sans-serif !important;
     font-weight: 100 !important;
  
  }}
  
  
  
  @media (max-width: 600px) {
  .left {
    /*left: 10px;*/
    left:.3em !important;
    padding-left: 0px !important;
    /*font-weight: 400;*/
    /*color: black;*/
   /* font-family: "forma-djr-text", sans-serif !important;*/
  
   color:#FFF7E8 !important;
   font-family: sans-serif !important;
   font-weight: 100 !important;
    
    }}
    
    @media (max-width: 600px) {
    .right {
    /*right: 10px;*/
    right:.3em !important;
    padding-right: 0px !important;
    /*font-weight: 400;
    color: black;*/
     /* font-family: "forma-djr-text", sans-serif !important;*/
     color:#FFF7E8 !important;
     font-family: sans-serif !important;
     font-weight: 100 !important;
    
    }}
  
  
  
  
  
  
  /* Media query for mobile devices */
  @media (max-width: 768px) {
  .arrow {
      position: absolute; /* Change position to absolute for mobile */
      top: auto; /* Remove fixed vertical positioning */
      bottom: 14px; /* Distance from the bottom of the screen */
      transform: translateY(0); /* Remove the transform */
      position: fixed;
      top: 50%;
      transform: translate(0%, -50%);
  }
  
  .left {
      left: 10px; /* Keep to the far left, but below the image */
      /*color: black; */
      color:#FFF7E8 !important;
      font-family: sans-serif !important;
  /* font-weight: 300;*/
  font-weight: 100 !important;
  }
  
  .right {
      right: 10px; /* Keep to the far right, but below the image */
     /*color: black; */
     color:#FFF7E8 !important;
     font-family: sans-serif !important;
  /*font-weight: 300;*/
  font-weight: 100 !important;
  
      }
  
  #currentPhoto {
      position: relative; /* Adjust for mobile */
      top: auto; /* Reset any specific top positioning */
  }}
  
  
  
  
  
  
  
  
  
  
  
  
  
  /*
  #cycleControl,   .dot , .left, .right
  
  {
    animation: fadeIn 8s ease-in-out;
  
  
  }
  
  */
  
  
  
  #cycleControl {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 10; /* Ensure it's above any overlay for dots */
    }
    
    #cycleSpeed {
    -webkit-appearance: none;
    appearance: none;
    width: 150px; /* Adjusted for visibility */
  
  
     height: 7.5px !important;  /* Thicker track for better visibility */
  
  
    background-color: #FFF7E8 !important;
    border-radius: 0px !important;
    /*outline: none;*/
    /*outline: .1px #FFF7E8 solid;*/
    outline: 1px #FFF7E8 solid;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative; /* Needed for the dots' positioning */
    
    }
    
    #cycleSpeed::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px; /* Larger thumb for easier grabbing */
    height: 7.5px; /* Larger thumb for easier grabbing */
  
  
    /*background-color: #bfbfbf; */ /* More visible color */
    background-color: #FFF7E8;

    border-radius: 0px !important;
    cursor: pointer;
    /*box-shadow: none; */
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
    
    
    }
    
    #cycleSpeed::-moz-range-thumb {
    width: 15px;
    height: 7.5px;
    background-color: #FFF7E8 !important;
    border-radius: 0px !important;
    cursor: pointer;
    box-shadow: none; /* Remove drop shadow or any box shadow effect */
    /*box-shadow: none; */
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
    }
    
    
    
    /*color bar filled in*/
    /* Chrome, Safari, Opera */
    #cycleSpeed::-webkit-slider-runnable-track {
      /*
    background: linear-gradient(to right, #bfbfbf 0%, #bfbfbf var(--slider-percentage), #d7d7d7 var(--slider-percentage), #d7d7d7 100%);
    */
    background: linear-gradient(to right, #4c4c4c 0%, #7c7c7c var(--slider-percentage), #1c1c1c var(--slider-percentage), #1c1c1c 100%) ;
    height: 7.5px;
  
    }
    
    /* Firefox */
    #cycleSpeed::-moz-range-track {
    background: linear-gradient(to right, #bfbfbf 0%, #bfbfbf var(--slider-percentage), #d7d7d7 var(--slider-percentage), #d7d7d7 100%);
    }
    
    /* IE */
    #cycleSpeed::-ms-fill-lower {
    background: #bfbfbf;
    }
    
    #cycleSpeed::-ms-fill-upper {
    background: #d7d7d7;
    }
    
    /* Thumb styles to maintain consistency */
    /*
    #cycleSpeed::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -8px;
    }
    
    #cycleSpeed::-moz-range-thumb {
    margin-top: 0; 
    }
    
    #cycleSpeed::-ms-thumb {
    margin-top: 0; 
    }*/
    
    
    #currentPhoto {
    animation: fadeIn 2s ease-in-out;
    }
    
    
    .logo-link {
    text-decoration: none;
    color: inherit; /* or specify a color */
    cursor: pointer;
    }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Existing styles for the image */
  #currentPhoto {
    /* max-height: 400px; 
     max-width: 95%;
    
    */
    height: auto; /* Adjusted to maintain aspect ratio */
    width: auto; /* Ensures the image does not become too small */
    border-radius: 2.5px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:-9999999999;
    }
    
  
  
  
  
  /* Style adjustments for the image */
  #currentPhoto.small { 
  width: 300px; /* Small size */
  height: 400px; 
  object-fit: cover; /* Adjust as needed to avoid distortion */
  }
  
  #currentPhoto.fullscreen {
  width: 100vw; 
  height: 100vh; 
  object-fit: cover;
  }
  
  @media (max-width: 768px) { 
  #currentPhoto.fullscreen {
    width: 100vw;
    height: auto; 
    object-fit: cover;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 100vh;
  }
  }
  
  
  
  .image-size-toggle 
  { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif  ;}
  
  
  
  
  /*
  @media (max-width: 374px) { 
    .dot {
      margin-top:10px; 
      margin-right: 5px;
      }}
      
    
    
    @media (min-width: 375px) and (max-width: 425px) { 
    .dot {
    margin-top: 10px;
    margin-right: 7.5px;
    }}
    
    
    @media (min-width: 426px) { 
      .dot {
          margin-top: 10px;
          margin-right: 10px;
    
        }}
    */
  
  
  /*
  .image-size-toggle {
    position: fixed;
    top: 13px;
    left: 10px;
    z-index: 1000; 
  font-size:11px;
  }
  */
  
  
  
  
  
  .dot {
    background-color: #d7d7d7;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    letter-spacing: none !important;
  
  }
  
  
  
  .small-dot {
    height: 10px;
    width: 10px;
    background-color: transparent;
    /* border:solid 1px #d7d7d7; */
    border:none !important;
    /* padding: 0px 5px 0px 10px !Important; */
    padding: 0px 25px 0px 25px !Important;
    letter-spacing: none !important;
    box-sizing: border-box !important;
    margin:none !important;
    color: #FFF7E8 !important;
  
  }
  
  .medium-dot {
   height: 12.5px;
    width: 12.5px;
   background-color: transparent;
    /* border:solid 1px #d7d7d7; */
    border:none !important;
    /* padding: 0px 5px 0px 10px !Important; */
    padding: 0px 25px 0px 25px !Important;
    letter-spacing: none !important;
    box-sizing: border-box !important;
    margin:none !important;
    color: #FFF7E8 !important;
  }
  
  .large-dot {
    height: 15px;
    width: 15px;
    background-color: transparent;
    /* border:solid 1px #d7d7d7; */
    border:none !important;
    /* padding: 0px 5px 0px 10px !Important; */
    padding: 0px 25px 0px 25px !Important;
    letter-spacing: none !important;
    box-sizing: border-box !important;
    margin:none !important;
    color: #FFF7E8 !important;
  
  }
  
  /* Additional style for the active dot */
  .active-dot {
   /* background-color: #bfbfbf !important;  */
   background-color: none !important;
    /* border:solid 1px #d7d7d7; */
    border:none !important;
  
  }
  
  
  
  /* Remove tap or click highlight on all elements across devices */
  a {
    -webkit-tap-highlight-color: transparent !important; /* Removes tap highlight on iOS and Android */
    outline: none !important; /* Removes focus outline across all devices */
  }
  
  
  
  
  
  
  
  
  
  
  
  
  /* first best*/
  
  .info-popup p {
    background: linear-gradient(90deg, #ffffff, #efefef, #eae0c8, #f1e7d5, #ffffff);
    background-size: 200% 200%;  
    animation: shimmerEffect 6s ease infinite; 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-weight: 400; 
    font-size: 18px;  
    text-decoration: none;
    
    /*text-transform:uppercase !important;
    word-spacing:5px !important;*/
    text-transform:lowercase !important;
    /*
    word-spacing:50px !important;
    */
  }
  
  
  @keyframes shimmerEffect {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
    
  
   
  
  
  
  
  
  
  
  /* 2ND BEST*/
  /*
  .info-popup p {
    position: relative;
    font-weight: 400;
    font-size: 18px;
    color: transparent;
    background: linear-gradient(
      90deg,
      #ffffff,
      #efefef,
      #eae0c8,
      #f9f5eb,
      #ffffff
    );
    background-size: 300% 300%;
    -webkit-background-clip: text;
      background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: randomShimmerText 3s infinite ease-in-out;
  
    text-transform:uppercase !important;
    word-spacing:5px !important;
  }
  
  
  
  @keyframes randomShimmerText {
    0% {
      background-position: 0% 0%;
    }
    25% {
      background-position: 25% 50%;
    }
    50% {
      background-position: 50% 100%;
    }
    75% {
      background-position: 75% 50%;
    }
    100% {
      background-position: 100% 0%;
    }
  }
    */
  
  
  
  
  
  
  /*
  .info-popup p {
   
  
     color: #eae0c8 ;
  
  
  }
  */
  
  
  
  
  
  
  .info-popup  {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    opacity: 1;
    margin: auto;
    text-align: justify;
    text-align-last: justify;
    line-height: 1;
  
    width: 100%;
  
    /* max-width: 200px ; 
   font-size: 11px !important; */
    /*max-width:350px;*/
   font-size:18px !important;
  
   font-family:  sans-serif !important;
  
  /*
   max-width:300px;
   */
   max-width: 200px ;
  
  }
  
  /*
  .info-popup p::after {
    content: "" !important;
    display: inline-block !important;
    width: 100% !important;
  }
  */
  
  
  @media (max-height: 600px) {
    .info-popup  {
  
      max-width:200px !important;
      font-size:9px !important;
    }
  }
  
  @media (max-height: 600px) {
    .info-popup p  {
      font-size:9px !important;
      max-width:200px !important;  }
  
     
  }
  
  @media (min-width: 768px) and (max-height: 600px) {
    .info-popup   {
      max-width: 100px !important;
       
   }}
  
  
   @media (max-width:375px) {
    .info-popup p, .info-popup  {
        font-size: 11px !important;
    }
  }
  
  @media (min-width: 375px) and (max-width: 600px) {
    .info-popup p, .info-popup  {
        font-size: 14px !important;
    }
  }
  
  @media (max-width: 600px) {
   .info-popup   {
  max-width: 60vw !important;
   }}
  
   @media (max-width: 600px) and (max-height: 600px) {
    .info-popup   {
      max-width: 200px !important;
       
   }}
  
  
  .info-popup.show {
    display: block;
  }
  
  
  
  
  
  /*
  menu to match amatona.com
  */
  
  
  /* before matcHING TO AMATONA.COM
  
  
  
  .footer p {
    font-family: "aesthet-nova", serif !important;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
  }
  
  
  .info-button {
    position: fixed;
    cursor: pointer;
    user-select: none;
    z-index: 9999;
    font-family: "aesthet-nova", serif !important; 
   
  font-size: 11px;
  font-weight: 400;
  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;
  }
  
  
  
  
  
  
  */
  
  
  /*.footer p,*/ .footer a, .info-button, .time p, .header-left p, .header-right p, .header-left a, .header-right a
  
  {
    color: #FFF7E8 !important;
    font-family: sans-serif !important;
    letter-spacing: .5px !important;
    font-style: normal !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  }