body {
  background: #1f4262;
  background: linear-gradient(to bottom right, rgba(26, 81, 105, 1) 0%, rgba(45, 105, 70, 1) 50%, rgba(148, 150, 50, 1) 100%); */
  background-color: #1f4262;
  color: aliceblue;
  font-family: "Asap Condensed", sans-serif;
}

html, body { height: 100%; }
body { margin: 0; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }        /* content grows */
footer { margin-top: 0 !important; }  /* ensure no extra gap */

#map {
  height: 500px;
  width: 80%;
  border-radius: 20px;
}

.devise-links a {
  color: aliceblue;
}

.devise-links a:hover{
  color: rgb(145, 197, 244);
}

.forecast-table, th, td {
  color: black;
  background-color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
  border-radius: 15px;
}



.nav-font {
  color: aliceblue;
}

.gameon {
  padding-top: 50px;
  color: aliceblue;
}

.gameon h1 {
  font-size: 4rem;
}

.features {
  background-color: #ffffff;
  border-radius: 20px;

}

.features-image-size {
  height: 100px;
  width: auto;
  object-fit: scale-down;
}

.asap-condensed-extralight {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.asap-condensed-light {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.asap-condensed-regular {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.asap-condensed-medium {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.asap-condensed-semibold {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.asap-condensed-bold {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.asap-condensed-extrabold {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.asap-condensed-black {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.asap-condensed-extralight-italic {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.asap-condensed-light-italic {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.asap-condensed-regular-italic {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.asap-condensed-medium-italic {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.asap-condensed-semibold-italic {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.asap-condensed-bold-italic {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.asap-condensed-extrabold-italic {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.asap-condensed-black-italic {
  font-family: "Asap Condensed", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.hover-shadow:hover {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow 0.2s ease-in-out;
}

.catch-photo {
  max-height: 500px;
  /* adjust for your layout */
  width: auto;
  object-fit: contain;
  /* keeps full image visible */
}

.carousel-inner {
  background-color: #000;
  /* optional for contrast */
  border-radius: 10px;
}

/* Safe area custom properties */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

/* Give the page breathing room under the Dynamic Island */
body {
  padding-top: max(0px, var(--safe-top));
  padding-right: var(--safe-right);
  padding-left: var(--safe-left);
}

/* Fixed or sticky navbar */
.navbar.fixed-top,
.navbar.sticky-top,
.header-sticky {
  top: 0;
  position: sticky;
  /* or fixed if you already use fixed-top */
  padding-top: max(12px, var(--safe-top));
  /* keep tappables out of the notch */
  z-index: 1040;
}

/* Keep the hamburger clear of the battery area on the right */
.navbar .navbar-toggler,
.header .menu-button {
  margin-right: max(12px, var(--safe-right));
}

/* Optional utility helpers */
.pt-safe {
  padding-top: max(12px, env(safe-area-inset-top));
}

.pr-safe {
  padding-right: env(safe-area-inset-right);
}

.pl-safe {
  padding-left: env(safe-area-inset-left);
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

.ios-safe-top {
  padding-top: env(safe-area-inset-top);
}

/* If you want the navbar itself to be padded (often better) */
.ios-safe-top .navbar {
  padding-top: calc(0.5rem + env(safe-area-inset-top));
}