.logo a {
  color: black;
  text-decoration: none;

}


















/*
.header .logo  {
  font-family: var(--text-font);
  font-weight: bold !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-family: "forma-djr-text", sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    text-align: center;
    font-size: 12px;  }
}

      
    
  
p, h1, h2, h3 {
          color: #565656; 
          text-decoration:none;
}
  
a{
  color:#565656;
}
    
      
    
body {
  /* background-color:#f4f0ec !important; */
  /*background-color: #eae0c8 !important; */
  background-color: #f4f0ec !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: black !important; 
      text-decoration:none ;
    }

    a {
      color: black; 
      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: #f4f0ec !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: 0 auto !important;
  text-align:center !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: #565656; 
    }
  

  
  body {
      background-color:#f4f0ec !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:#1c1c1c !important;
    font-family: sans-serif !important;
    font-weight: 100 !important;
}}



@media (min-width: 600px) {
.right {
right: 10px; 
/*font-weight: 400;*/
    /*color: black; */
    color:#1c1c1c !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:#1c1c1c !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:#1c1c1c !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:#1c1c1c !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:#1c1c1c !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: #d7d7d7;
  /*outline: none;*/
  outline: .1px black 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: black;

  
  border-radius: 0%;
  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: #bfbfbf;
  border-radius: 0%;
  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, #d7d7d7 0%, #5c5c5c var(--slider-percentage), #d7d7d7 var(--slider-percentage), #d7d7d7 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;

}

.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;
}

.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;

}

/* 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: #1c1c1c !important;
  font-family: sans-serif !important;
  letter-spacing: .5px !important;
  font-style: normal !important;
font-size: 11px !important;
font-weight: 400 !important;


}










.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;
  }
}





#datetime-container {
  display: flex;
  justify-content: space-between;
  width: 0px; /* Set the total width as per your requirement */
}

#ct7 {
  white-space: nowrap;
}




p {
  font-family: "forma-djr-text", sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  text-align: center;
  font-size:12px;

    }



    .logo-link
    {font-weight:bold !important;
    color:#565656 !important;
  
  
  
  }