:root {
    --bg: #FFECF3;
    --bg2: #FFF5F9;
    --bg-light: #ffecf3a6;
    --bg-light2: #ffecf36a;
    --bg-dark: #fdafcb;
    
    --tx: #000000;
    --tx2: #252525;

    --cf: #DB155E;
    /* --cf2: #DB155E; */

    --font-main: "Space Grotesk";
    --font-focus: "VT323";
    --font-focus2: "Alegreya Sans SC";
    /* --font-focus3: "Reey"; */
    /* --font-focus4: "Handlee"; */

    --header-height: 120px;
}

::selection {
    background-color: var(--cf);
    color: var(--bg);
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--bg);
    color: var(--tx);
    font-family: var(--font-main);
}

#smooth-content {
    max-width: 1766px;
    margin: 0 auto;
}

/* Masonry-like layout with CSS columns */
.gallery-grid-container {
  column-width: 320px;   /* approximate equal column width */
  column-gap: 12px;      /* equal horizontal gap */
}

.tile-container {
    position: relative;
  break-inside: avoid;              /* standard */
  -webkit-column-break-inside: avoid; /* WebKit */
  margin-bottom: 12px;              /* equal vertical gap */
}

.tile-container img,
.tile-container video {
  display: block;
  width: 100%;
  height: auto;
}

.tile-container video {
    cursor: pointer;
}

/*  */

.mute-toggle-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  
  /* The switch - the box around the speaker */
  .toggleSwitch {
    width: 30px;
    height: 30px;
    position: absolute;     /* place on tile */
    right: -1px;
    bottom: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;
    transition-duration: .3s;
    overflow: hidden;
    z-index: 2;
  }

  .toggleSwitch * {
    position: absolute;
  }
  
  .speaker,
  .mute-speaker {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: .3s;
  }
  
  .speaker svg,
  .mute-speaker svg { width: 18px; }
  
  /* Default: show speaker icon when NOT checked */
  .speaker { opacity: 1; z-index: 2; }
  .mute-speaker { opacity: 0; z-index: 3; }
  
  /* Checked = muted (show mute icon) */
  .mute-toggle-input:checked + .toggleSwitch .speaker { opacity: 0; }
  .mute-toggle-input:checked + .toggleSwitch .mute-speaker { opacity: 1; background-color: var(--bg-light2);}
  
  /* Interaction states */
  .mute-toggle-input:active + .toggleSwitch { transform: scale(0.9); }
  .mute-toggle-input:hover + .toggleSwitch { background-color: var(--bg-dark); }

path {
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.speaker .path1 {
    stroke:var(--tx2);
    stroke-width:1;
    stroke-linejoin:round;
    fill:var(--tx2);
}
.speaker .path2 {
    fill:none;
    stroke:var(--tx2);
    stroke-width:1;
    stroke-linecap:round
}

.mute-speaker svg {
    stroke:var(--tx2);
    stroke-width: 1;
}
.mute-speaker .path1 {
    fill: var(--tx2);
    stroke-linejoin: round;
}
.mute-speaker .path2 {
    fill: var(--tx2);
    stroke-linecap: round;
}