@font-face {
    font-family: 'bpdotsregular';
    src: url('../fonts/BPdots-webfont.woff2') format('woff2'),
         url('../fonts/BPdots-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body {
  background-image: url('/images/coffee-shoes.JPG');
  background-position: top center;
  background-size: cover; 
  background-repeat: no-repeat;
  background-attachment: fixed; 
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden; 

  display: flex;
  flex-direction: column;
  align-items: center;
}


.updates-container {
  width: 300px;
  padding: 10px 12px;
  background: rgba(100, 97, 98, 0.107); 
  backdrop-filter: blur(0.5px);           
  font-size: 0.9rem;
  color: #060606;
  font-family: 'bpdotsregular', sans-serif;
  margin-top: 20px;
  border:#faf9f9  1px dotted;

}

.updates-heading {
  color: #ff00ae;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
}
.updates-scroll {
  max-height: 120px;
  overflow-y: auto;
}
.updates-scroll p {
  margin: 0 0 6px 0;
  line-height: 1.3;
}
.updates-scroll span {
  color: #989597;
  font-weight: bold;
}

.neighborhood {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;     
  gap: 10px;          
  padding: 10px;
  
  max-width: 500px;     
  width: 100%;
  margin: 0px 10px 0px 10px;        
  box-sizing: border-box; 
  border:#faf9f9  1px dotted;
}


.note-container {
  position: relative; 
  width: 100%; 
  height: auto; 
  margin-top: 20px; 
}
.note-stack { 
  width: 100%; 
  margin-inline: auto; 
}
.note-card {
  position: relative;
  width: clamp(350px, 60%, 700px);  
  margin: 0 auto; 
}
.note-bg { 
  display: block; 
  width: 100%; 
  height: auto; 
  pointer-events: none; 
}
.ss-window {
  position: absolute;
  top: 32.6%; 
  left: 23.8%; 
  width: 53.1%; 
  height: 46%;
  overflow: hidden; 
  border-radius: 2px; 
  z-index: 2;
}
.image-ss {
  width: 100%; 
  height: 100%; 
  display: flex; 
  animation: slideX 38s infinite ease-in-out;
}
.image-ss img { 
  flex: 0 0 100%; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center; 
}
.note-caption-top { 
  margin-bottom: 8px; 
  font-size: 1.2rem; 
  text-align: center; 
  letter-spacing: 4px;
  font-weight: 700;
  color: #ff00ae; 
  font-family: 'bpdotsregular', sans-serif;
}
@keyframes slideX {
  0%, 5.5%     { transform: translateX(0%); }
  6.6%, 12.1%  { transform: translateX(-100%); }
  13.3%, 18.8% { transform: translateX(-200%); }
  20%, 25.5%   { transform: translateX(-300%); }
  26.6%, 32.1% { transform: translateX(-400%); }
  33.3%, 38.8% { transform: translateX(-500%); }
  40%, 45.5%   { transform: translateX(-600%); }
  46.6%, 52.1% { transform: translateX(-700%); }
  53.3%, 58.8% { transform: translateX(-800%); }
  60%, 65.5%   { transform: translateX(-900%); }
  66.6%, 72.1% { transform: translateX(-1000%); }
  73.3%, 78.8% { transform: translateX(-1100%); }
  80%, 85.5%   { transform: translateX(-1200%); }
  86.6%, 92.1% { transform: translateX(-1300%); }
  93.3%, 100%  { transform: translateX(-1400%); }
}