/* declaring fonts*/ 

@font-face { 
    font-family: alpine;
    src: url(fonts/HighAlpine.otf);
}

@font-face {
    font-family: bell;
    src: url(fonts/BellTopoSans-Regular.otf);
}


.title {
  color: #728fb8;
  font-family: alpine;
  text-align: center;
  padding: 2rem;
}

.title-background {
  background-size: cover;
}

.author {
  font-family: bell;
  color: rgb(255, 255, 255);
}

/* arrow  */
#scrollPrompt {
  position: fixed;
  top: 85%;
  right: 30px; /* distance from the right edge */
  left: auto;  /* remove or override centered position */
  transform: none; /* remove the horizontal centering */
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  font-family: bell;
  color: #444;
  z-index: 9999;
  animation: fadein 1s ease-in-out;
}

.arrow {
  font-size: 2rem;
  margin-top: 5px;
  animation: bounce 1s infinite;
}

/* Bouncing animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Fade out animation (if you want it to auto-disappear) */
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* migration chart style*/ 
#migrationChart {
  max-width: 700px;
  margin: 2rem auto;
  display: block;
}


/* windy map styling */
.iframe-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.iframe-container.disabled {
  pointer-events: none;
}

#toggleMapBtn {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 999;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.windy-toggle-btn {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 16px;
  font-family: bell;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.windy-toggle-btn:hover {
  background-color: #f0f0f0;
  border-color: #999;
}

.windy-toggle-btn.active {
  background-color: #1b6695;
  color: white;
  border-color: #1b6695;
  font-weight: 600;
}



/* POP UP STYLING*/
.leaflet-popup-content {
  margin: 10px 12px;
  font-family: bell;
  line-height: 1.35;
}
.leaflet-popup-content p { margin: 0 0 6px; }
.leaflet-popup-tip { opacity: 0.95; }

/* Climate popup look */
.popup-climate .leaflet-popup-content-wrapper {
  background: #f4fbff;                 /* soft ice-blue */
  border: 1px solid #b9e2ff;           /* light blue border */
  box-shadow: 0 6px 18px rgba(0, 60, 120, 0.15);
  border-radius: 12px;
}
.popup-climate .leaflet-popup-tip {
  background: #f4fbff;
  border: 1px solid #b9e2ff;
}
.popup-climate .leaflet-popup-content {
  color: #2b4a63;
  font-size: 14px;
}
.popup-climate .leaflet-popup-close-button {
  color: #2b4a63;
}

/* Step popup look (same as climate) */
.popup-step .leaflet-popup-content-wrapper {
  background: #f4fbff;                 /* soft ice-blue */
  border: 1px solid #b9e2ff;           /* light blue border */
  box-shadow: 0 6px 18px rgba(0, 60, 120, 0.15);
  border-radius: 12px;
}
.popup-step .leaflet-popup-tip {
  background: #f4fbff;
  border: 1px solid #b9e2ff;
}
.popup-step .leaflet-popup-content {
  color: #2b4a63;
  font-size: 14px;
}
.popup-step .leaflet-popup-close-button {
  color: #2b4a63;
}


/* FONT STYLES */

.text-1 {
  color: #5f85a6;
  font-family: bell;
  font-size: 26px;
}

.header-open {
  color: #5f85a6;
  font-family: bell;
  font-size: 40px;
}

.caption {
  color: #84a3bf;
  font-family: bell;
  font-size: 14px;
  font-style: italic;
}

.header {
  color: #527695;
  font-family: alpine;
  font-size: 80px;
}

.text-2 {
  color: #4a6c8b;
  font-family: bell;
  font-size: 24px;
}

.text-3 {
  color: #4a6c8b;
  font-family: bell;
  font-size: 30px;
}


.credits-header {
  color: #527695;
  font-family: alpine;
  font-size: 50px;
}

.creds {
  color: #84a3bf;
  font-family: bell;
  font-size: 18px;
}