@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

html, body {
  min-height: 400vh; /* ensure enough height for background pattern */
  margin: 0;
  padding: 0;
  background-color: #2d9b7a; /* lighter grid cell color as fallback for fast scroll */
}

html {
  background-image: 
    repeating-linear-gradient(
      0deg,
      #1a6f5e 0px,
      #1a6f5e 1px,
      #2d9b7a 1px,
      #2d9b7a 20px
    ),
    repeating-linear-gradient(
      90deg,
      #1a6f5e 0px,
      #1a6f5e 1px,
      #2d9b7a 1px,
      #2d9b7a 20px
    );
  background-attachment: fixed;
  background-repeat: repeat;
}

body {
  color: white;
  font-family: 'Unbounded', sans-serif;
  text-align: center;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  background-image: 
    repeating-linear-gradient(
      0deg,
      #1a6f5e 0px,
      #1a6f5e 1px,
      #2d9b7a 1px,
      #2d9b7a 20px
    ),
    repeating-linear-gradient(
      90deg,
      #1a6f5e 0px,
      #1a6f5e 1px,
      #2d9b7a 1px,
      #2d9b7a 20px
    );
  background-attachment: scroll, scroll;
  background-repeat: repeat;
}

/* Shop label and oval container */
.shop-text {
  font-size: 30px;
  color: #ffffff;
  margin: 0;
}

.shop-oval {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15); /* color, color, color, opacity */
  border-radius: 20px;
  padding: 8px 28px;
  margin-top: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Navigation link boxes */
.site-nav {
  margin-top: 25px;
}

.site-nav a {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.site-nav a:hover,
.site-nav a:focus {
  transform: scale(1.06);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.site-nav a:active {
  transform: scale(0.98);
}

/* Header bar for a bit of contrast */
header {
  /* darker edges blend into the main header color */
  background-color: #0f7f5a; /* fallback */
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80' viewBox='0 0 60 80'%3E%3Cstyle%3E.wave%7Bstroke:%231a6f5e;fill:none;opacity:0.5;stroke-linecap:round%7D%3C/style%3E%3Cpath class='wave' stroke-width='1.6' d='M5,0 Q3,10 5,20 T5,40 T5,60 T5,80'/%3E%3Cpath class='wave' stroke-width='1.4' d='M15,0 Q13,10 15,20 T15,40 T15,60 T15,80'/%3E%3Cpath class='wave' stroke-width='1.2' d='M25,0 Q23,10 25,20 T25,40 T25,60 T25,80'/%3E%3Cpath class='wave' stroke-width='1.2' d='M35,0 Q33,10 35,20 T35,40 T35,60 T35,80'/%3E%3Cpath class='wave' stroke-width='1.4' d='M45,0 Q43,10 45,20 T45,40 T45,60 T45,80'/%3E%3Cpath class='wave' stroke-width='1.6' d='M55,0 Q53,10 55,20 T55,40 T55,60 T55,80'/%3E%3C/svg%3E"),
    linear-gradient(
      to right,
      #0b6b49 0%,
      #0b6b49 12%,
      #0f7f5a 32%,
      #0f7f5a 68%,
      #0b6b49 88%,
      #0b6b49 100%
    );
  background-size: 60px 80px, 100% 100%;
  background-position: 0 0, 0 0;
  background-attachment: fixed, scroll; /* keep SVG pattern fixed to viewport */
  background-repeat: repeat; /* allow both layers to repeat for seamless coverage */
  padding: 12px 0;
  margin-bottom: 12px;
}

/* Large page title */
.page-title {
  font-size: 48px;
  color: #ffffff;
  font-weight: 700;
  margin: 10px 0 30px 0;
  padding: 0;
  font-family: 'Michroma', sans-serif;
  font-style: italic;
}

/* oval display*/
.shop-oval {
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 8px 28px;
  margin-top: 18px;
  background: rgba(26, 155, 111, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* General text color tweaks */
p, a {
  color: #ffffff;
}

/* Slight spacing for nav links and remove separators */
.site-nav a {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 8px;
  background-color: #1a9b6f;
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

/* Hidden message */
.hidden-message {
  display: block;
  margin-top: auto;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  font-family: 'Space Mono', monospace;
  letter-spacing: 3px;
  transform: scaleY(1.4);
  transform-origin: center;
  max-width: 90%;
  white-space: nowrap;
}

/* Back to top button */
#backToTop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 120ms ease;
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
#backToTop.show { opacity: 1; pointer-events: auto; }
#backToTop:active { transform: scale(0.96); }

/* Footer credit */
.footer-credit {
  position: fixed;
  bottom: 10px;
  left: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  font-family: 'Unbounded', sans-serif;
}