html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.arial {
  font-family: Arial, sans-serif;
}

.comforter {
  font-family: "Comforter", cursive;
}

.gloock {
  font-family: "Gloock", Georgia, serif;
}

.kranky {
  font-family: "Kranky", fantasy;
}

.unkempt {
  font-family: "Unkempt", fantasy;
}

#hero {
  --hero-bleed: 48px;
  --hero-height: calc(100lvh + var(--hero-bleed));
  --hero-accent-shadow: 1px 2px 3px rgba(0, 0, 0, .5);
  --signature-height: clamp(96px, min(38vw, 55lvh), 312px);
  --signature-shift-starts-at-ratio: 1.5;
  --signature-shift-ends-at-ratio: 2;
  --signature-shift-min: 50;
  --signature-shift-max: 35;
  --claim-bottom: 20;
  --claim-bottom-offset: calc(var(--signature-height) * var(--claim-bottom) / 100);
  --claim-size-divisor: 13;
  --claim-size-max: 1.5rem;
  --signature-center: clamp(
         calc(var(--hero-height) * var(--signature-shift-max) / 100),
         calc(var(--hero-height) * var(--signature-shift-min) / 100 -
             (100vw - var(--hero-height) * var(--signature-shift-starts-at-ratio)) *
             (var(--signature-shift-min) - var(--signature-shift-max)) / 100 /
             (var(--signature-shift-ends-at-ratio) - var(--signature-shift-starts-at-ratio))),
         calc(var(--hero-height) * var(--signature-shift-min) / 100)
     );
  --scroll-cue-offset: -20px;
  --scroll-cue-width: min(clamp(120px, 18vw, 200px), 25lvh);
  --scroll-cue-height: calc(var(--scroll-cue-width) * 32 / 200);
  display: flow-root;
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: var(--hero-height);
  text-align: center;
  background-color: var(--hero-background-color, black);
  z-index: 0;
}
#hero {
  --portrait-height: calc(100vh + var(--hero-bleed));
  --portrait-width: calc(var(--portrait-height) * var(--portrait-ratio));
}
@supports (height: 100lvh) {
  #hero {
    --portrait-height: calc(100lvh + var(--hero-bleed));
  }
}
#hero .background {
  position: absolute;
  z-index: -5;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  background-image: var(--hero-background, none);
  background-size: cover;
  visibility: hidden;
}
#hero > .image {
  position: absolute;
  top: 0;
  left: calc((100% - var(--portrait-width)) / 2);
  z-index: -4;
  height: var(--portrait-height);
  width: var(--portrait-width);
  visibility: hidden;
}
#hero {
  --quote-gutter: clamp(6px, calc(4vw - 10px), 40px);
  --quote-contour-clearance: clamp(4px, calc(2.5vw - 6px), 42px);
  --signature-contour-clearance: calc(var(--quote-contour-clearance) * .5);
  --quote-split: 50%;
}
#hero .quote-readable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#hero #quote-wall {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#hero .quote-zone {
  position: absolute;
  opacity: var(--quote-reveal, 0);
  z-index: 1;
  display: flow-root;
  overflow: hidden;
  text-align: left;
  font-size: 0;
  line-height: 0;
  color: rgba(var(--hero-quote-rgb, 20, 18, 20), 0.72);
}
#hero .quote-zone::before {
  content: "";
  float: var(--contour-float);
  width: 100%;
  height: 100%;
  shape-outside: var(--contour);
}
#hero .quote-zone .quote-run {
  display: inline;
  font-style: normal;
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(9px, min(1.15vw + 6px, 3lvh), 20px);
  line-height: 1.3;
  overflow-wrap: normal;
}
#hero .quote-zone .quote-run.font-comforter {
  font-family: "Comforter", cursive;
}
#hero .quote-zone .quote-run.font-gloock {
  font-family: "Gloock", Georgia, serif;
}
#hero .quote-zone .quote-run.font-kranky {
  font-family: "Kranky", fantasy;
}
#hero .quote-zone .quote-run.font-unkempt {
  font-family: "Unkempt", fantasy;
}
#hero .quote-zone .quote-run.featured {
  font-size: clamp(13px, min(2.6vw + 6px - clamp(0px, 2px - 0.25vw, 1px), 4lvh), 44px);
  color: rgba(var(--hero-featured-quote-rgb, var(--hero-quote-rgb, 20, 18, 20)), 0.88);
  line-height: 1.16;
}
#hero .quote-zone .quote-run.medium {
  font-size: clamp(9px, min(1.5vw + 5px, 2.75lvh), 26px);
}
#hero .quote-zone .quote-run.small {
  font-size: clamp(8px, min(0.9vw + 5.5px, 2.25lvh), 16px);
}
#hero .quote-zone .quote-run.large {
  font-size: clamp(10px, min(2vw + 7px - clamp(0px, 6px - 0.75vw, 3px), 3.75lvh), 36px);
}
#hero .quote-zone .quote-separator {
  font-family: "Gloock", Georgia, serif;
  font-size: 0.5em;
  font-style: normal;
  position: relative;
  top: -0.2em;
  margin-inline: 1em;
}
#hero .quote-zone .quote-mark {
  color: var(--hero-accent);
}
#hero .quote-zone:not(.background-quotes) .quote-mark {
  text-shadow: var(--hero-accent-shadow);
}
#hero .quote-zone .quote-attribution {
  font-family: inherit;
  font-size: 0.72em;
  font-style: italic;
  line-height: 1.3;
  opacity: 0.75;
}
#hero .quote-zone.background-quotes {
  z-index: 0;
  opacity: calc(var(--background-quote-opacity, 0.15) * var(--background-quote-reveal, 0));
  color: rgb(var(--hero-quote-rgb, 20, 18, 20));
}
#hero .quote-zone.background-quotes .quote-run {
  font-size: clamp(8px, min(0.75vw + 6px, 2.25lvh), 12px);
}
#hero .quote-zone.background-quotes .quote-attribution {
  font-size: 1em;
  opacity: 1;
}
#hero .quote-zone.background-quotes .quote-mark {
  color: inherit;
}
#hero .quote-zone .quote-character {
  visibility: hidden;
}
#hero .quote-zone .quote-character.visible {
  visibility: visible;
}
#hero #signature {
  display: block;
  fill: var(--hero-signature-color, rgba(255, 255, 255, 0.6));
  width: calc(100% - 40px);
  aspect-ratio: 474.45/184.67;
  height: var(--signature-height);
  max-height: 312px;
  margin: 0 20px;
  position: absolute;
  top: var(--signature-center);
  left: 0;
  translate: 0 -50%;
  z-index: 5;
  visibility: hidden;
  pointer-events: none;
}
#hero #signature svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: none;
}
#hero #signature .claim {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--claim-bottom-offset);
  transform: translateX(-50%);
  color: var(--hero-claim-color, rgba(255, 255, 255, 0.3));
  white-space: nowrap;
  font-size: min(var(--signature-height) / var(--claim-size-divisor), var(--claim-size-max));
  text-transform: uppercase;
  letter-spacing: 0.3em;
}
#hero #signature .claim .plus {
  color: var(--hero-accent);
  text-shadow: var(--hero-accent-shadow);
  font-family: sans-serif;
  font-size: 1.8em;
  font-weight: bold;
  position: relative;
  top: 0.04em;
  line-height: 0;
}
#hero .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--hero-bleed) - var(--scroll-cue-offset));
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--scroll-cue-width);
  height: var(--scroll-cue-height);
  color: var(--hero-accent);
  visibility: hidden;
}
#hero .scroll-cue svg {
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#hero .scroll-cue:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
#hero #hero-calendar-region {
  --gutter: 40px;
  --region-top: calc(var(--signature-center) + var(--signature-height) * .5 - 24px);
  position: absolute;
  inset: var(--region-top) 0 var(--hero-bleed);
  box-sizing: border-box;
  z-index: 3;
}
#hero #hero-calendar-region:not(.ready) {
  visibility: hidden;
}
#hero #hero-calendar-region > .calendar {
  --title-size: min(calc(var(--signature-height) / var(--claim-size-divisor)), var(--claim-size-max));
  --title-space: calc(var(--title-size) * 1.25);
  font-family: Arial, sans-serif;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  box-sizing: border-box;
  container-type: size;
  min-height: 0;
  display: grid;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  isolation: isolate;
}
#hero #hero-calendar-region > .calendar[hidden] {
  display: none;
}
#hero #hero-calendar-region > .calendar > .title {
  z-index: 1;
  justify-self: center;
  font-size: var(--title-size);
  font-weight: bold;
  white-space: nowrap;
}
#hero #hero-calendar-region > .calendar > .items {
  grid-area: 2/1;
  box-sizing: border-box;
  min-height: 0;
}
#hero #hero-calendar-region > .calendar > .items > li {
  box-sizing: border-box;
  min-width: 0;
  display: block;
  overflow-wrap: anywhere;
}
#hero #hero-calendar-region > .calendar > .items > li > .type {
  font-size: 0.4em;
  font-weight: bold;
}
#hero #hero-calendar-region > .calendar > .items > li > .name {
  font-family: "Gloock", Georgia, serif;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1em;
}
#hero #hero-calendar-region > .calendar > .items > li > .composer {
  font-size: 0.5em;
}
#hero #hero-calendar-region > .calendar > .items > li > .dates {
  font-family: "Comforter", cursive;
  font-size: 1.5em;
  line-height: 1em;
  color: var(--hero-accent);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  text-transform: lowercase;
  margin-bottom: -0.15em;
}
#hero #hero-calendar-region > .calendar > .items > li > .organizer {
  font-size: 0.65em;
}
#hero #hero-calendar-region > .calendar > .items > li > .location {
  font-size: 0.4em;
  font-weight: bold;
}
#hero #hero-calendar-region > .calendar.compact {
  --note-gap: 1rem;
  --rotation-footprint: calc(cos(10deg) + sin(10deg));
  --compact-width: max(0px, calc(min(100vw - 40px, var(--signature-height) * 474.45 / 184.67) - 40px));
  --anchor-top: calc(var(--signature-center) + var(--signature-height) * .5 - var(--claim-bottom-offset) - 12px);
  --anchor-space: max(0px, calc(var(--hero-height) - var(--hero-bleed) + var(--scroll-cue-offset) - var(--scroll-cue-height) * .5 - var(--anchor-top)));
  top: calc(var(--anchor-top) + (var(--anchor-space) - max(0px, min((100vw - var(--gutter) * 2) / var(--rotation-footprint), var(--anchor-space) / var(--rotation-footprint), 480px))) * 0.5 - var(--region-top));
  bottom: 0;
  padding: 0.5em 0;
  grid-template-rows: var(--title-space) minmax(0, 1fr);
  width: var(--compact-width);
  z-index: 1;
  color: #444;
}
#hero #hero-calendar-region > .calendar.compact > .title {
  color: #fff;
  translate: 0 max(0px, (100cqh - var(--title-space) - (var(--compact-width) - var(--note-gap) * 2) / 3 * var(--rotation-footprint)) / 2 - 0.5em);
}
#hero #hero-calendar-region > .calendar.compact > .title,
#hero #hero-calendar-region > .calendar.compact > .items > li > div {
  -webkit-mask: url("/images/ink-noise-heavy-soft.png") center/12rem repeat;
  mask: url("/images/ink-noise-heavy-soft.png") center/12rem repeat;
  mix-blend-mode: multiply;
}
#hero #hero-calendar-region > .calendar.compact > .items {
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--note-gap);
  place-items: center;
}
#hero #hero-calendar-region > .calendar.compact > .items > li {
  --note-size: min(calc((var(--compact-width) - var(--note-gap) * 2) / 3), calc((100cqh - var(--title-space)) / var(--rotation-footprint)));
  position: relative;
  isolation: isolate;
  min-height: 0;
  width: var(--note-size);
  aspect-ratio: 1;
  padding: 1em;
  font-size: calc(var(--note-size) * 0.09);
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  transform: rotate(var(--note-angle, 10deg));
  --mask: url("/images/paper-edge-1.svg");
}
#hero #hero-calendar-region > .calendar.compact > .items > li > div {
  flex-shrink: 0;
}
#hero #hero-calendar-region > .calendar.compact > .items > li:nth-child(2) {
  --mask: url("/images/paper-edge-2.svg");
}
#hero #hero-calendar-region > .calendar.compact > .items > li:nth-child(3) {
  --mask: url("/images/paper-edge-3.svg");
}
#hero #hero-calendar-region > .calendar.compact > .items > li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 5px 9px 4px 7px/8px 4px 7px 5px;
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("/images/wrinkled-paper_sd.jpg") center/cover no-repeat, #fff;
  -webkit-mask: var(--mask) center/100% 100% no-repeat;
  mask: var(--mask) center/100% 100% no-repeat;
  filter: grayscale(1) drop-shadow(-12px -8px 32px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
#hero #hero-calendar-region > .calendar.expanded {
  top: calc(var(--signature-center) + var(--signature-height) * 0.5 - var(--claim-bottom-offset) - var(--region-top));
  bottom: calc(var(--scroll-cue-height) - var(--scroll-cue-offset));
  grid-template-rows: min(max(3rem, var(--title-space) + 1rem), 25%) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: max(0px, 100% - var(--gutter) * 2);
}
#hero #hero-calendar-region > .calendar.expanded > .title {
  grid-area: 1/2;
  place-self: center;
  font-size: min(var(--title-size), 16cqh);
  line-height: 1.25;
}
#hero #hero-calendar-region > .calendar.expanded > .items {
  grid-column: 1/-1;
  container-type: size;
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 1em 1.5em;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  opacity: 0.6;
  text-shadow: -0.5px 0 #000, 0.5px 0 #000, 0 -0.5px #000, 0 0.5px #000;
}
#hero #hero-calendar-region > .calendar.expanded > .items > li {
  --event-width: min(100cqw, 16rem, 200cqh);
  flex: 0 0 auto;
  width: var(--event-width);
  padding: 0.5em 1em;
  border-radius: 1.5rem;
  transition: background-color 0.6s ease;
  font-size: calc(var(--event-width) * 0.05);
}
#hero #hero-calendar-region > .calendar.expanded > .items > li[data-phase=PAST] {
  opacity: 0.5;
}
#hero #hero-calendar-region > .calendar.expanded > .items > li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  #hero #hero-calendar-region > .calendar.expanded > .items > li {
    transition: none;
  }
}
#hero #hero-calendar-region > .calendar.expanded > button {
  position: relative;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#hero #hero-calendar-region > .calendar.expanded > button:disabled {
  opacity: 0.3;
  cursor: default;
}
#hero #hero-calendar-region > .calendar.expanded > button.previous, #hero #hero-calendar-region > .calendar.expanded > button.next {
  grid-area: 2/1/3/-1;
  align-self: center;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
}
#hero #hero-calendar-region > .calendar.expanded > button.previous:hover:not(:disabled), #hero #hero-calendar-region > .calendar.expanded > button.next:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.8);
}
#hero #hero-calendar-region > .calendar.expanded > button.previous > svg, #hero #hero-calendar-region > .calendar.expanded > button.next > svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#hero #hero-calendar-region > .calendar.expanded > button.previous {
  justify-self: start;
  translate: -50% 0;
}
#hero #hero-calendar-region > .calendar.expanded > button.next {
  justify-self: end;
  translate: 50% 0;
}
#hero #hero-calendar-region > .calendar.expanded > button.close {
  grid-area: 1/3;
  place-self: center start;
  font-size: min(var(--title-size) * 0.65, 10cqh);
  width: 1.5em;
  height: 1.5em;
  line-height: 1;
  translate: 0 -45%;
}
#hero #hero-calendar-region > .calendar.expanded > button[hidden] {
  display: none;
}
#hero #hero-calendar-region > .calendar.expanded > button:focus-visible,
#hero #hero-calendar-region > .calendar.expanded > .items:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 2px;
}

#feed {
  box-sizing: border-box;
  width: 100%;
  padding: 40px;
  position: relative;
  z-index: 0;
  box-shadow: inset 0 2px 0 0 #ffd5db, inset 0 -2px 0 0 #ffd5db, inset 0 3px 0 0 #DF9FAC, inset 0 -3px 0 0 #DF9FAC;
  background: pink url("../images/backgrounds/pink_sd.jpg") repeat-y;
  background-size: contain;
  font-family: "Unkempt", fantasy;
}
#feed .month {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
}
#feed .month.balanced {
  display: block;
}
#feed .month.balanced .separator {
  display: block;
}
#feed .month.balanced .feed-columns {
  display: grid;
  grid-template-columns: repeat(var(--feed-columns), minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}
#feed .month.balanced .feed-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#feed .month.balanced .post {
  min-width: 0;
  padding: 20px;
}
#feed .month .separator {
  grid-column: span 2;
  font-size: 7rem;
  line-height: 7rem;
  text-align: center;
  margin-top: 40px;
  font-family: "Comforter", cursive;
}
#feed .month .post {
  flex: 1;
  overflow-wrap: anywhere;
  min-width: 30%;
  position: relative;
  padding: 20px;
}
#feed .month .post.left {
  grid-column: 1;
}
#feed .month .post.left .message, #feed .month .post.left .post.facebook .parent_message, #feed .month .post.facebook .post.left .parent_message {
  text-align: right;
}
#feed .month .post.left .message .photo, #feed .month .post.left .post.facebook .parent_message .photo, #feed .month .post.facebook .post.left .parent_message .photo,
#feed .month .post.left .message .video,
#feed .month .post.left .post.facebook .parent_message .video,
#feed .month .post.facebook .post.left .parent_message .video {
  float: left;
  margin: 0 10px 10px 0;
}
#feed .month .post.left .date {
  text-align: right;
}
#feed .month .post.right {
  grid-column: 2;
}
#feed .month .post.right .message, #feed .month .post.right .post.facebook .parent_message, #feed .month .post.facebook .post.right .parent_message {
  text-align: left;
}
#feed .month .post.right .message .photo, #feed .month .post.right .post.facebook .parent_message .photo, #feed .month .post.facebook .post.right .parent_message .photo,
#feed .month .post.right .message .video,
#feed .month .post.right .post.facebook .parent_message .video,
#feed .month .post.facebook .post.right .parent_message .video {
  float: right;
  margin: 0 0 10px 10px;
}
#feed .month .post.right .date {
  text-align: left;
}
#feed .month .post.facebook .message a, #feed .month .post.facebook .parent_message a {
  font-size: 1.2em;
  font-weight: bold;
}
#feed .month .post.facebook .message .share, #feed .month .post.facebook .parent_message .share {
  background-color: rgba(153, 204, 51, 0.39);
  border-radius: 2rem;
  padding: 25px;
  margin-bottom: 15px;
}
#feed .month .post.facebook .message .share .title, #feed .month .post.facebook .parent_message .share .title {
  font-weight: bold;
  margin-bottom: 10px;
}
#feed .month .post.facebook .message::first-letter, #feed .month .post.facebook .parent_message::first-letter {
  font-size: 2.5em;
  line-height: 1em;
}
#feed .month .post.facebook .message .photo, #feed .month .post.facebook .parent_message .photo,
#feed .month .post.facebook .message .cover_photo,
#feed .month .post.facebook .parent_message .cover_photo,
#feed .month .post.facebook .message .album_photo,
#feed .month .post.facebook .parent_message .album_photo {
  max-height: 50px;
  max-width: 50px;
  position: relative;
  z-index: var(--rnd);
  --factor: calc((0.01 * var(--rnd)));
  --media-scale: calc(0.85 + (0.003 * var(--rnd)));
  --shadow-offset-range: calc(60px * var(--factor)) ;
  --shadow-horizontal-offset: calc( 5px * var(--factor) );
  --shadow-vertical-offset: calc( -1 * (var(--progress) - 0.5) * var(--shadow-offset-range) );
  --shadow-blur: calc(15px * var(--factor));
  --scale-range: calc(50% * var(--factor));
  --scale: calc((100% - var(--scale-range)) + (2.0 * var(--scale-range)));
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur) rgba(0, 0, 0, 0.5);
  border: solid black;
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
}
#feed .month .post.facebook .message .photo:nth-child(3n-2), #feed .month .post.facebook .parent_message .photo:nth-child(3n-2),
#feed .month .post.facebook .message .cover_photo:nth-child(3n-2),
#feed .month .post.facebook .parent_message .cover_photo:nth-child(3n-2),
#feed .month .post.facebook .message .album_photo:nth-child(3n-2),
#feed .month .post.facebook .parent_message .album_photo:nth-child(3n-2) {
  clear: both;
}
#feed .month .post.facebook .message .photo:nth-child(5n), #feed .month .post.facebook .parent_message .photo:nth-child(5n),
#feed .month .post.facebook .message .cover_photo:nth-child(5n),
#feed .month .post.facebook .parent_message .cover_photo:nth-child(5n),
#feed .month .post.facebook .message .album_photo:nth-child(5n),
#feed .month .post.facebook .parent_message .album_photo:nth-child(5n) {
  max-height: calc(100px * var(--media-scale));
  max-width: calc(100px * var(--media-scale));
}
#feed .month .post.facebook .message .photo:nth-child(6n), #feed .month .post.facebook .parent_message .photo:nth-child(6n),
#feed .month .post.facebook .message .cover_photo:nth-child(6n),
#feed .month .post.facebook .parent_message .cover_photo:nth-child(6n),
#feed .month .post.facebook .message .album_photo:nth-child(6n),
#feed .month .post.facebook .parent_message .album_photo:nth-child(6n) {
  max-height: calc(70px * var(--media-scale));
  max-width: calc(70px * var(--media-scale));
}
#feed .month .post.facebook .message .photo:first-child, #feed .month .post.facebook .parent_message .photo:first-child,
#feed .month .post.facebook .message .cover_photo:first-child,
#feed .month .post.facebook .parent_message .cover_photo:first-child,
#feed .month .post.facebook .message .album_photo:first-child,
#feed .month .post.facebook .parent_message .album_photo:first-child {
  max-height: calc(200px * var(--media-scale));
  max-width: calc(200px * var(--media-scale));
}
#feed .month .post.facebook .message .photo.landscape, #feed .month .post.facebook .parent_message .photo.landscape,
#feed .month .post.facebook .message .cover_photo.landscape,
#feed .month .post.facebook .parent_message .cover_photo.landscape,
#feed .month .post.facebook .message .album_photo.landscape,
#feed .month .post.facebook .parent_message .album_photo.landscape {
  max-height: calc(170px * var(--media-scale));
  max-width: calc(260px * var(--media-scale));
}
#feed .month .post.facebook .message .photo.portrait, #feed .month .post.facebook .parent_message .photo.portrait,
#feed .month .post.facebook .message .cover_photo.portrait,
#feed .month .post.facebook .parent_message .cover_photo.portrait,
#feed .month .post.facebook .message .album_photo.portrait,
#feed .month .post.facebook .parent_message .album_photo.portrait {
  max-height: calc(260px * var(--media-scale));
  max-width: calc(180px * var(--media-scale));
}
#feed .month .post.facebook .message .unknown, #feed .month .post.facebook .parent_message .unknown {
  display: inline-block;
  background-color: #55ff00;
  border-radius: 2em;
  font-size: 1.5em;
  padding: 10px;
}
#feed .month .post.facebook .message .video, #feed .month .post.facebook .parent_message .video {
  --media-scale: calc(0.85 + (0.003 * var(--rnd)));
  width: clamp(160px * var(--media-scale), 55% * var(--media-scale), 280px * var(--media-scale));
  max-width: 100%;
  overflow: hidden;
  position: relative;
  aspect-ratio: var(--w)/var(--h);
  border: solid black;
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
}
#feed .month .post.facebook .message .video.facebook-video-ready, #feed .month .post.facebook .parent_message .video.facebook-video-ready {
  aspect-ratio: auto;
}
#feed .month .post.facebook .message .video .fb-video, #feed .month .post.facebook .parent_message .video .fb-video,
#feed .month .post.facebook .message .video .fb-video > span,
#feed .month .post.facebook .parent_message .video .fb-video > span,
#feed .month .post.facebook .message .video iframe,
#feed .month .post.facebook .parent_message .video iframe {
  max-width: 100% !important;
  border-radius: inherit;
}
#feed .month .post.facebook .message .video iframe, #feed .month .post.facebook .parent_message .video iframe {
  pointer-events: auto;
}
#feed .month .post.facebook .message .video.landscape, #feed .month .post.facebook .parent_message .video.landscape {
  width: clamp(220px * var(--media-scale), 70% * var(--media-scale), 340px * var(--media-scale));
}
#feed .month .post.facebook .message .video.portrait, #feed .month .post.facebook .parent_message .video.portrait {
  width: clamp(150px * var(--media-scale), 48% * var(--media-scale), 240px * var(--media-scale));
}
#feed .month .post.facebook.review {
  text-align: justify;
  column-count: 3;
  column-gap: 3%;
  background: linear-gradient(to right, rgba(204, 51, 168, 0.2), rgba(204, 86, 181, 0.2));
  border: 1px solid rgba(175, 46, 150, 0.8);
}
#feed .month .post.facebook.review:after {
  content: "REVIEW";
  font-weight: bold;
  font-size: 2em;
  background-color: rgba(255, 0, 0, 0.3);
  color: white;
  position: absolute;
  border: solid black;
  border-width: 3px 3px 5px 5px;
  border-radius: 4% 95% 6% 95%/95% 4% 92% 5%;
  box-shadow: 2px 3px 15px #505050;
  border-color: red;
  transform: rotate(-30deg);
  top: 30px;
  left: -20px;
  padding: 0 15px 0 15px;
}
#feed .month .post.facebook.share .message, #feed .month .post.facebook.share .parent_message {
  text-decoration: underline;
  text-decoration-skip-ink: all;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}
#feed .month .post.facebook .parent_message {
  background-color: #99cc33;
}
#feed .month .post.facebook ul.reactions {
  display: flex;
  justify-content: space-between;
}
#feed .month .post.facebook ul.reactions li {
  display: inline;
}
#feed .month .post.facebook .date {
  margin-top: 10px;
  color: #333333;
  font-family: "Comforter", cursive;
}
#feed .month .post.facebook .date a {
  color: #222222;
}

#contact {
  position: relative;
  z-index: -5;
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  background-image: url("../images/main/p2-bkgnd.jpg");
  background-size: cover;
  text-align: center;
  align-items: center;
  justify-content: center;
}
#contact .text {
  font-family: "Unkempt", fantasy;
  font-size: 1.5rem;
}
#contact .text h1 {
  font-family: "Comforter", cursive;
  font-size: 4em;
}
#contact .text h2 {
  font-size: 1.3em;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 40px;
  margin-bottom: 10px;
}
#contact .text h4 {
  font-weight: bold;
}
#contact .text h6 {
  margin-top: 50px;
}

html {
  scrollbar-width: none;
  overflow-x: clip;
}
html::-webkit-scrollbar {
  display: none;
}

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

body {
  overflow-x: clip;
  background-color: black;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
}

/*# sourceMappingURL=index.css.map */