:root {
  --d: clamp(45vh, 200px, 50vw);
  --scale-factor: 1;
  --factor: 1;

}

body {
  background: linear-gradient(347deg, #c5cad3 0, #c9d2d6 28%, #a0b4c1 50%, #b6c3d9 76%, #b6c4e2 100%);
  /* font-family: "Syne Mono", monospace; */
  font-family: "Orbitron", sans-serif;
  color: #585f6b !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  display: block;

  background: linear-gradient(347deg, #c5cad3 0, #c9d2d6 28%, #a0b4c1 50%, #b6c3d9 76%, #b6c4e2 100%);

  color: #585f6b !important;
  margin: 0;
  padding: 0;
}

.page-wrapper {
  display: block;
  /* padding-top: 50px; */
}
.nav-bar {
  display: grid;
  font-family: Arial, sans-serif;
  position: absolute;
  width: 100vw;
  height: 50px;
  top:0px;
  margin-top:20px;
  right:0%;
  /* background-color: #90a9b460; */
  justify-content: center;
  align-items: center;
  /* display: grid;
  font-family: Arial, sans-serif;
  position: sticky;
  top:0px;
  z-index: 1000; */
}

.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(15px * var(--scale-factor));
  padding: calc(5px * var(--scale-factor));
  width: calc(385px * var(--scale-factor));
  height: calc(80px * var(--scale-factor));
  pointer-events: auto;
}

.btn-wrapper {
  position: relative;
  width: calc(66.2px * var(--scale-factor));
  height: calc(77.6px * var(--scale-factor));
  display: inline-block;
  left: -10.8px;
}

/* .btn {
  width: calc(48px * var(--scale-factor));
  height: calc(30px * var(--scale-factor));
  margin: 0 auto;
  cursor: pointer;
  display: inline-block !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: none;
  background: radial-gradient(circle at 40% 10%, #f0f0f0 0, #dcdcdc 30%, #b0b0b0 60%, #888 100%);
  background-size: cover;
} */

.btn svg {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  display: block;
  margin: auto;
}

.btn-text {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(60px * var(--scale-factor));
  height: calc(60px * var(--scale-factor));
  pointer-events: none;
  padding-left: 27px;
  padding-top: 0;
}

.buttons a {
  display: inline-block;
  text-decoration: none;
  margin: 0 15px;
}

.page-wrapper {
  display: grid;
  justify-content: center;
  align-items: center;
}

.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(15px * var(--scale-factor));
  padding: calc(5px * var(--scale-factor));
  width: calc(385px * var(--scale-factor));
  height: calc(80px * var(--scale-factor));
  pointer-events: auto;
}

.btn-wrapper {
  position: relative;
  width: calc(66.2px * var(--scale-factor));
  height: calc(77.6px * var(--scale-factor));
  display: inline-block;
  left: -10.8px;
}

.btn {
  width: calc(48px * var(--scale-factor));
  height: calc(30px * var(--scale-factor));
  margin: 0 auto;
  cursor: pointer;
  display: inline-block !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border: none;
  background: radial-gradient(circle at 40% 10%, #f0f0f0 0, #dcdcdc 30%, #b0b0b0 60%, #888 100%);
  background-size: cover;
}
@media (max-width:768px) {
  :root {
    --scale-factor: 0.7
  }
  .album-item img {
    width: 300px;
  }

  .btn-text {
    position: absolute;
    top: 10px;
    left: 5px;
    width: calc(60px * var(--scale-factor));
    height: calc(60px * var(--scale-factor));
    pointer-events: none;
    padding-left: 27px;
    padding-top: 0;
  }
}
.buttons a {
  display: inline-block;
  text-decoration: none;
  margin: 0 15px;
}

.social-bar {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(32px * var(--factor));
  background: linear-gradient(180deg, rgba(161, 161, 161, 1) 0%, rgba(235, 235, 235, 1) 50%, rgba(176, 176, 176, 1) 99%, rgba(161, 161, 161, 1) 100%);
  padding: calc(10px * var(--factor)) calc(20px * var(--factor));
  border-radius: calc(30px * var(--factor));
}

.social-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--social-size);
  height: var(--social-size);
  transition: transform 0.14s cubic-bezier(.4,1,.3,1);
  border-radius: 50%;
}

/* .social-bar a:hover {
  transform: scale(1.12);
  background: #ededed;
} */

.social-bar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.16s;
  filter:invert(31%) sepia(0%) saturate(0%) hue-rotate(94deg) brightness(95%) contrast(91%);
  /* Optional: grayscale on hover for effect
  filter: grayscale(0.3);
  */
}

.social-bar a:hover img {
  filter: invert(84%) sepia(9%) saturate(1592%) hue-rotate(153deg) brightness(82%) contrast(87%);
}
.btn:hover {
  background: radial-gradient(circle at 40% 40%,
    /* light source offset to top-left */
    #d2d2d2 0%,
    /* very light silver */
    #c6c6c6 30%,
    /* light silver */
    #909090 60%,
    /* medium silver */
    #4f4f4f 100%
  );
}
.btn-pressed {
  background: radial-gradient(circle at 40% 40%,
    /* light source offset to top-left */
    #d2d2d2 0%,
    /* very light silver */
    #c6c6c6 30%,
    /* light silver */
    #909090 60%,
    /* medium silver */
    #4f4f4f 100%
  );
}
.video-item, .album-item {
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
  text-align: center;
  display: grid;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.shared-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 20px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0;
  margin-top: 100px;
  box-sizing: border-box;
  /* font-family: "Syne Mono", monospace; */
  font-family: "Orbitron", sans-serif;
  color: #585f6b !important;
  position:relative;
}
.shared-grid-container-shop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0;
  margin-top: 100px;
  box-sizing: border-box;
  font-family: "Orbitron", sans-serif;
  color: #585f6b !important;
  position: relative;
  min-height: calc(100vh - 400px); /* account for that top margin */
  place-content: center start; 
  /* key bits */
  grid-auto-rows: minmax(220px, auto); /* give rows some height */
  align-items: center;                  /* vertical centering inside each cell */
  /* optional if you also want horizontal centering: */
  /* justify-items: center; */
}

@media (max-width: 768px) {
  :root {
    --scale-factor: 0.7;
  }
  .social-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(16px*var(--scale-factor));
    background: #a1a1a1;
    background: linear-gradient(180deg, rgba(161, 161, 161, 1) 0%, rgba(235, 235, 235, 1) 50%, rgba(176, 176, 176, 1) 99%, rgba(161, 161, 161, 1) 100%);
    padding: calc(10px*var(--scale-factor)) calc(20px*var(--scale-factor));
    border-radius:calc(30px*var(--scale-factor));
  }
  .shared-grid-container {
    grid-template-columns: 1fr; /* one column */
  }
  .shared-grid-container-shop {
    grid-template-columns: 1fr; /* one column */
  }
}
.more-link {
  color: #008080;
  display: flex;
  justify-content: center;
  margin: 40px auto;
  background: #f0f0f0;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, rgba(161, 161, 161, 1) 0%, rgba(235, 235, 235, 1) 50%, rgba(176, 176, 176, 1) 99%, rgba(161, 161, 161, 1) 100%);
  max-width: fit-content;
  font-family: "Syne Mono", monospace;
  margin-bottom:150px;
  text-decoration: none;
}
.more-link a{
  color: #008080;
  text-decoration: none;
}

.btn {
  position: relative;
  width: calc(48.4px * var(--factor));
  height: calc(30px * var(--factor));
  display: flex;              /* enable flexbox */
  justify-content: center;    /* center horizontally */
  align-items: center;        /* center vertically */
  min-width: 0; /* allows flex children to shrink properly */
  overflow: visible; /* or auto, but visible lets it show fully */

  display: flex !important;
  justify-content: center;
  align-items: center;
}
/* Ensure page content paints over background layer without changing layout */
.page-wrapper { position: relative; z-index: 1; }
:root{
  --bb-img: url("/img/bubblesmall.png"); /* your PNG/WebP (transparent) */
}

/* Background layer (mobile-safe + lighter containment) */
#bubbles, #bubbles * { pointer-events:none; user-select:none; }
#bubbles{
  position:fixed; inset:0; overflow:hidden; z-index:0;
  contain: paint; isolation:isolate;

  /* Viewport fallbacks for older mobile browsers */
  --vw: 100vw; --vh: 100vh;
}
@supports (height: 100dvh) {
  #bubbles { --vw: 100dvw; --vh: 100dvh; }
}

/* X axis wrapper */
.bubblefx{
  position:absolute;
  left:var(--xBase, 0%);            /* per-bubble start offset */
  top:var(--yBase, 0%);
  transform:translateX(0);
  animation-name: bb-move-x;
  animation-duration: var(--xDur, 60s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: var(--xDir, alternate);
  animation-delay: var(--xDelay, 0s);
  will-change: transform;
}

/* Global bubble size + randomness */
#bubbles{
  --bb-img: url("/img/bubblesmall.png");
  --bb-size-base: 120px;   /* master size */
  --bb-size-spread: 0.80;  /* ±spread around base */
}

/* Compute per-bubble size from a seed */
#bubbles .bubblefx{
  --sf: calc(1 + var(--seed, 0) * var(--bb-size-spread));
  --size: calc(var(--bb-size-base) * var(--sf));
  width: var(--size);
  height: var(--size);
}

/* Y axis inner */
.bubblefx__inner{
  width:100%; height:100%; border-radius:50%;
  transform:translateY(0);
  animation-name: bb-move-y;
  animation-duration: var(--yDur, 75s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: var(--yDir, alternate);
  animation-delay: var(--yDelay, 0s);

  background-image: var(--bb-img);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  mix-blend-mode:normal;
}

/* Global speed control: >1 = faster, <1 = slower */
#bubbles { --bb-speed: 2; }
#bubbles .bubblefx       { animation-duration: calc(var(--xDur, 60s) / var(--bb-speed, 1)); }
#bubbles .bubblefx__inner{ animation-duration: calc(var(--yDur, 75s) / var(--bb-speed, 1)); }

/* Bounce distances (use viewport vars + per-bubble travel ratios) */
@keyframes bb-move-x { to { transform: translateX(calc((var(--vw) * var(--travelX, 1)) - var(--size))); } }
@keyframes bb-move-y { to { transform: translateY(calc((var(--vh) * var(--travelY, 1)) - var(--size))); } }

/* --- Per-bubble randomness (ratios instead of svw/svh) --- */
#bubbles .bubblefx:nth-child(1)  { --seed:  0.25; --xDur:68s; --yDur:79s; --xDelay:-12s; --yDelay:-22s; --xDir:alternate;         --yDir:alternate;         --travelX:0.96; --travelY:0.92; --xBase:2vw;  --yBase:1vh;  }
#bubbles .bubblefx:nth-child(2)  { --seed:  0.15; --xDur:92s; --yDur:64s; --xDelay:-33s; --yDelay:-7s;  --xDir:alternate-reverse; --yDir:alternate;         --travelX:0.88; --travelY:0.84; --xBase:10vw; --yBase:6vh;  }
#bubbles .bubblefx:nth-child(3)  { --seed:  0.65; --xDur:54s; --yDur:90s; --xDelay:-9s;  --yDelay:-40s; --xDir:alternate;         --yDir:alternate-reverse; --travelX:1.00; --travelY:0.86; --xBase:4vw;  --yBase:12vh; }
#bubbles .bubblefx:nth-child(4)  { --seed:  0.25; --xDur:84s; --yDur:72s; --xDelay:-50s; --yDelay:-18s; --xDir:alternate-reverse; --yDir:alternate;         --travelX:0.80; --travelY:0.96; --xBase:14vw; --yBase:2vh;  }
#bubbles .bubblefx:nth-child(5)  { --seed:  0.25; --xDur:60s; --yDur:66s; --xDelay:-6s;  --yDelay:-31s; --xDir:alternate;         --yDir:alternate;         --travelX:0.92; --travelY:0.90; --xBase:0vw;  --yBase:8vh;  }
#bubbles .bubblefx:nth-child(6)  { --seed:  0.25; --xDur:78s; --yDur:98s; --xDelay:-28s; --yDelay:-17s; --xDir:alternate-reverse; --yDir:alternate-reverse; --travelX:0.86; --travelY:0.74; --xBase:16vw; --yBase:18vh; }
#bubbles .bubblefx:nth-child(7)  { --seed:  0.25; --xDur:72s; --yDur:102s;--xDelay:-12s; --yDelay:-55s; --xDir:alternate;         --yDir:alternate;         --travelX:0.94; --travelY:0.88; --xBase:6vw;  --yBase:3vh;  }
#bubbles .bubblefx:nth-child(8)  { --seed: -0.25; --xDur:96s; --yDur:70s; --xDelay:-70s; --yDelay:-8s;  --xDir:alternate-reverse; --yDir:alternate-reverse; --travelX:0.78; --travelY:1.00; --xBase:22vw; --yBase:10vh; }
#bubbles .bubblefx:nth-child(9)  { --seed:  0.25; --xDur:88s; --yDur:76s; --xDelay:-44s; --yDelay:-26s; --xDir:alternate;         --yDir:alternate-reverse; --travelX:0.82; --travelY:0.82; --xBase:3vw;  --yBase:22vh; }
#bubbles .bubblefx:nth-child(10) { --seed:  0.25; --xDur:66s; --yDur:58s; --xDelay:-30s; --yDelay:-12s; --xDir:alternate-reverse; --yDir:alternate;         --travelX:1.00; --travelY:0.78; --xBase:18vw; --yBase:14vh; }
#bubbles .bubblefx:nth-child(11) { --seed:  0.25; --xDur:74s; --yDur:96s; --xDelay:-18s; --yDelay:-70s; --xDir:alternate;         --yDir:alternate;         --travelX:0.86; --travelY:0.90; --xBase:8vw;  --yBase:4vh;  }
#bubbles .bubblefx:nth-child(12) { --seed:  0.25; --xDur:104s;--yDur:82s; --xDelay:-77s; --yDelay:-33s; --xDir:alternate-reverse; --yDir:alternate-reverse; --travelX:0.72; --travelY:0.84; --xBase:26vw; --yBase:20vh; }
#bubbles .bubblefx:nth-child(13) { --seed:  0.25; --xDur:88s; --yDur:76s; --xDelay:-44s; --yDelay:-26s; --xDir:alternate;         --yDir:alternate-reverse; --travelX:0.82; --travelY:0.82; --xBase:3vw;  --yBase:22vh; }
#bubbles .bubblefx:nth-child(14) { --seed:  0.25; --xDur:66s; --yDur:58s; --xDelay:-30s; --yDelay:-12s; --xDir:alternate-reverse; --yDir:alternate;         --travelX:1.00; --travelY:0.78; --xBase:18vw; --yBase:14vh; }
#bubbles .bubblefx:nth-child(15) { --seed:  0.25; --xDur:74s; --yDur:96s; --xDelay:-28s; --yDelay:-70s; --xDir:alternate;         --yDir:alternate;         --travelX:0.86; --travelY:0.90; --xBase:8vw;  --yBase:4vh;  }
#bubbles .bubblefx:nth-child(16) { --seed:  0.25; --xDur:104s;--yDur:82s; --xDelay:-77s; --yDelay:-43s; --xDir:alternate-reverse; --yDir:alternate-reverse; --travelX:0.72; --travelY:0.84; --xBase:26vw; --yBase:20vh; }

/* Optional: vary easing a bit to avoid lockstep feeling */
#bubbles .bubblefx:nth-child(3n)   { animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
#bubbles .bubblefx:nth-child(4n)   { animation-timing-function: ease-in-out; }
#bubbles .bubblefx__inner:nth-child(odd)  { animation-timing-function: cubic-bezier(.4,.0,.2,1); }
#bubbles .bubblefx__inner:nth-child(even) { animation-timing-function: linear; }
/* Mobile: <= 768px wide */
@media (max-width: 768px) {
  /* Hide bubbles 7, 8, 9, ... */
  #bubbles .bubblefx:nth-child(n+7) {
    display: none;
    animation: none !important; /* stop any running anim just in case */
  }

  /* Optional: also tweak density/feel on mobile */
  #bubbles {
    --bb-size-base: 96px;  /* smaller default size on mobile */
    --bb-speed: 1.6;       /* modest speed-up or slow-down */
  }

  /* Optional: shorten travel a bit so paths are smaller */
  #bubbles .bubblefx {
    --travelX: 0.9;
    --travelY: 0.9;
  }
}

/* NOTE: Removed the prefers-reduced-motion block so animations always run */