@font-face {
    font-family: Indie Flower;
    src: url(./assets/Indie_Flower/IndieFlower-Regular.ttf) format("truetype");
    font-display: swap;
}

body {
    background-image: url(./assets/many-small-birds-perched-on-the-telephone-wiregreyscale.jpg);
    background-size: cover;
    color: black;
    font-family: Indie Flower, system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

.wrap {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    height: 100vh;
    overflow: auto;
}

.navbar {
    padding: 2% 10%;
    background-color: black;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10%;
    border-color: black;
}

.navlinks {
    padding: 0% 10%;
    font-size: 36px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.navlinks a {
    padding: 2% 10%;
}

.navlinks a:link {
    color:white;
    text-decoration: none;
}

.navlinks a:visited {
    color: white;
    text-decoration: none;
}

.navsocials {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.navsocials img {
        width: 30px;
        height: 30px;
}

.hero {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
    height: 100%;
    overflow: auto;
}

.herotext {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: center;
    height: 100%;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.5);  
    backdrop-filter: blur(5px);
}

.mainheadingtext {
    font-size: 180px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.herotext .mainheadingtext {
    font-size: 100px;
}

.bodytext {
    text-align: center;
}

.bodyimg {
    text-align: center;
}

.bodytext img {
    width: 80%;
    height: auto;
    margin-top: -50px;
    margin-bottom: 50px;
}

.bigletter {
    font-size: 220px;
    font-weight: lighter;
}

.footer {
    padding: 2% 10%;
    background-color: black;
    display: flex;
    justify-content: center;
}

.footersocials img {
    width: 30px;
    height: 30px;
}



/* Footer icons should be horizontal */
.footersocials {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* optional: wraps nicely if screen is narrow */
}

/* Keep the <a> wrappers from behaving weird */
.footersocials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


a:hover {
    animation: rainbowwiggle 2.5s linear;
    animation-iteration-count: infinite;
}

@keyframes rainbowwiggle {
    100%,0%{
        color: rgb(255,0,0);
        transform: rotate(10deg);
    }
    8%{
        color: rgb(255,127,0);
    }
    16%{
        color: rgb(255,255,0);
    }
    25%{
        color: rgb(127,255,0);
        transform: rotate(-10deg);
    }
    33%{
        color: rgb(0,255,0);
    }
    41%{
        color: rgb(0,255,127);
    }
    50%{
        color: rgb(0,255,255);
        transform: rotate(10deg);
    }
    58%{
        color: rgb(0,127,255);
    }
    66%{
        color: rgb(0,0,255);
    }
    75%{
        color: rgb(127,0,255);
        transform: rotate(-10deg);
    }
    83%{
        color: rgb(255,0,255);
    }
    91%{
        color: rgb(255,0,127);
    }
}






/* ---------- Mobile/Responsive Patch (paste at bottom) ---------- */

/* Make sizing predictable */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent images from overflowing */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mobile-friendly viewport height (prevents 100vh bugs on phones) */
.wrap {
  min-height: 100svh; /* modern mobile browsers */
  height: auto;       /* override 100vh */
  overflow: visible;  /* let the page scroll normally */
}

/* NAVBAR: allow wrapping and reduce overly large spacing */
.navbar {
  padding: 12px 16px;     /* override 2% 10% */
  gap: 12px;              /* override 10% gap */
  flex-wrap: wrap;        /* critical */
}

.navlinks {
  padding: 0;             /* remove extra padding that causes overflow */
  font-size: clamp(18px, 4.5vw, 28px); /* scales on mobile */
  flex-wrap: wrap;        /* critical */
  gap: 8px 12px;          /* nice wrapping */
  justify-content: center;/* better when wrapped */
}

.navlinks a {
  padding: 6px 10px;      /* override 2% 10% */
}

.navsocials {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.navsocials img,
.footersocials img {
  width: 26px; /* slightly smaller on mobile */
  height: 26px;
}

/* HERO: stop forcing height/overflow */
.hero {
  height: auto;
  overflow: visible;
}

/* Heading: scale instead of fixed gigantic sizes */
.mainheadingtext {
  font-size: clamp(56px, 14vw, 160px); /* replaces 180px */
  flex-wrap: wrap;
  line-height: 0.9;
  padding: 8px 0;
}

.bigletter {
  font-size: clamp(64px, 18vw, 200px); /* replaces 220px */
}

/* Image spacing: your selector was .bodytext img, but image is in .bodyimg */
.bodyimg img {
  width: min(900px, 92vw);
  margin: 0 auto;
}

/* Footer spacing tighter on mobile */
.footer {
  padding: 12px 16px;
}

/* Reduce motion for people who prefer it (nice accessibility win) */
@media (prefers-reduced-motion: reduce) {
  a:hover {
    animation: none;
  }
}

/* Optional: more compact layout on very small screens */
@media (max-width: 420px) {
  .navlinks {
    font-size: 18px;
  }
}


/* --- Fix 1: kill horizontal scroll everywhere --- */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* --- Fix 2: stop 100vh + nested overflow from fighting mobile browsers --- */
.wrap {
  height: auto;        /* override 100vh */
  min-height: 100svh;  /* better mobile viewport */
  overflow: visible;   /* stop creating weird nested scroll areas */
}

/* --- Fix 3: make top bar stay visible + readable while scrolling --- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  padding: 12px 12px;  /* override 2% 10% */
  gap: 12px;           /* override 10% */
  flex-wrap: wrap;     /* allow wrapping instead of overflow */
}

/* Make the links row wrap nicely and not be gigantic */
.navlinks {
  padding: 0; /* override 0% 10% */
  font-size: clamp(18px, 4.5vw, 28px); /* scales down on phones */
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
}

/* Reduce link padding that was causing huge width */
.navlinks a {
  padding: 6px 8px; /* override 2% 10% */
  display: inline-block;
}

/* Social icons: wrap and don't cover links */
.navsocials {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.navsocials img,
.footersocials img {
  width: 26px;
  height: 26px;
}

/* --- Fix 4: heading "P" getting cut off (scale + wrap) --- */
.mainheadingtext {
  font-size: clamp(64px, 16vw, 180px);
  flex-wrap: wrap;
  line-height: 0.9;
  padding: 10px 0;
}

.bigletter {
  font-size: clamp(72px, 18vw, 220px);
}

/* --- Fix 5: band photo too large (contain it in the viewport) --- */
.bodyimg img {
  width: min(1400px, 94vw);

  object-fit: contain; /* keeps full photo visible */
  margin: 0 auto;
  display: block;
}

/* --- Fix 6: footer bar should span screen and not drift with side-scroll --- */
.footer {
  width: 100%;
  padding: 12px 12px; /* override 2% 10% */
}