:root {
  --ink: #160b3b;
  --navy: #000080;
  --pink: #ff71ce;
  --acid: #dfff00;
  --cyan: #00ffff;
  --silver: #c0c0c0;
  --paper: #fffaf3;
  color-scheme: light;
  font-family: "Times New Roman", Times, serif;
  color: var(--ink);
  background: #34145b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 24px 24px 40px;
  font-size: 18px;
  line-height: 1.5;
  background-color: #34145b;
  background-image:
    radial-gradient(circle, #ff71ce 1px, transparent 1.5px),
    repeating-linear-gradient(45deg, transparent 0 18px, #47206b 18px 20px);
  background-size:
    20px 20px,
    28px 28px;
}
body[data-wallpaper="1"] {
  background-color: #087d80;
  background-image:
    linear-gradient(
      45deg,
      #004f61 25%,
      transparent 25%,
      transparent 75%,
      #004f61 75%
    ),
    linear-gradient(
      45deg,
      #004f61 25%,
      transparent 25%,
      transparent 75%,
      #004f61 75%
    );
  background-position:
    0 0,
    12px 12px;
  background-size: 24px 24px;
}
body[data-wallpaper="2"] {
  background-color: #35113f;
  background-image:
    radial-gradient(
      ellipse at center,
      transparent 42%,
      #ff71ce 44% 48%,
      transparent 50%
    ),
    radial-gradient(circle, #00ffff 1px, transparent 2px);
  background-size:
    48px 24px,
    24px 24px;
}
[hidden] {
  display: none !important;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: #0000aa;
  text-underline-offset: 3px;
}
a:visited {
  color: #680082;
}
a:hover {
  color: #a10063;
}
a,
button,
summary {
  -webkit-tap-highlight-color: #ff71ce77;
}
button,
input {
  font: inherit;
}
button,
summary {
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid #a10063;
  outline-offset: 4px;
}
h1,
h2,
h3 {
  line-height: 1.15;
  text-wrap: balance;
}
h2 {
  font-family: "Comic Sans MS", "Comic Sans", "Finger Paint", cursive;
  font-size: 25px;
}
p {
  margin: 0 0 16px;
  text-wrap: pretty;
}
li + li {
  margin-top: 9px;
}
ul,
ol {
  padding-left: 24px;
}
section[id],
article[id] {
  scroll-margin-top: 16px;
}
figure {
  margin: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 20;
  padding: 12px 18px;
  background: var(--acid);
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}
.desktop-note {
  max-width: 1050px;
  margin: 0 auto 10px;
  color: #fff;
  font:
    12px "Courier New",
    monospace;
  letter-spacing: 1px;
}
.browser-window {
  max-width: 1050px;
  margin: auto;
  background: var(--silver);
  padding: 5px;
  border: 3px outset #e7e7e7;
  box-shadow: 10px 10px 0 #190a30;
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 7px;
  background: linear-gradient(90deg, var(--navy) 35%, #741c94);
  color: white;
  font:
    bold 14px Arial,
    sans-serif;
}
.window-name {
  min-width: 0;
}
.window-decoration {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.window-decoration i {
  display: block;
  width: 18px;
  height: 17px;
  border: 2px outset white;
  background: var(--silver);
  position: relative;
}
.window-decoration i:first-child::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  bottom: 3px;
  left: 3px;
  background: black;
}
.window-decoration i:nth-child(2)::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid black;
  border-top-width: 3px;
}
.window-decoration i:last-child::before,
.window-decoration i:last-child::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 2px;
  top: 6px;
  left: 1px;
  background: black;
  transform: rotate(45deg);
}
.window-decoration i:last-child::after {
  transform: rotate(-45deg);
}
.browser-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 22px;
  padding: 0 12px;
  font:
    13px Arial,
    sans-serif;
}
.browser-toolbar a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: #171717;
}
.toolbar-note {
  margin-left: auto;
  font:
    12px "Courier New",
    monospace;
  color: #313131;
}
.address-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 9px 9px;
  font:
    13px Arial,
    sans-serif;
}
.address-bar a {
  padding: 4px 8px;
  background: white;
  border: 2px inset #eee;
  flex: 1;
  color: #222;
  overflow-wrap: anywhere;
  text-decoration: none;
  min-height: 32px;
}
.page-sheet {
  border: 2px inset #eee;
  background: var(--paper);
}
.marquee {
  overflow: hidden;
  background: var(--acid);
  border-bottom: 2px solid var(--ink);
  color: #271042;
  font:
    bold 14px "Courier New",
    monospace;
}
.marquee p {
  display: block;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 9px 18px;
}
.marquee span {
  margin: 0 18px;
}
body.effects-enabled .marquee p {
  animation: marquee 24s linear infinite;
}
.marquee:hover p {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-24%);
  }
}
.nav-container {
  display: none;
}
.nav {
  display: flex;
  justify-content: center;
  background: var(--navy);
  gap: 0;
  padding: 0 10px;
  font:
    bold 14px "Courier New",
    monospace;
}
.nav a {
  padding: 14px 18px;
  color: white;
  text-align: center;
}
.nav a:hover,
.nav a:focus-visible {
  color: var(--acid);
  background: #331c92;
}
.hero {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 38px 30px 34px;
  background-color: #f4dbf5;
  background-image: radial-gradient(#c486cc 0.7px, transparent 0.7px);
  background-size: 8px 8px;
  border-bottom: 3px solid var(--ink);
}
.hero-copy {
  min-width: 0;
}
.welcome {
  display: inline-block;
  background: var(--cyan);
  border: 1px solid var(--ink);
  padding: 3px 10px;
  font:
    bold 13px "Courier New",
    monospace;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
}
h1 {
  font:
    400 clamp(48px, 6.8vw, 76px)/1.07 "Finger Paint",
    "Comic Sans MS",
    cursive;
  letter-spacing: -5px;
  margin: 14px 0 18px;
  color: var(--navy);
  text-shadow: 3px 3px 0 var(--pink);
}
h1 > span:first-child {
  color: #77106d;
  text-shadow: 3px 3px 0 #fff;
}
.heading-dot {
  color: #8c0064;
}
.hero-intro {
  font-size: 23px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 12px;
}
.hero-location {
  font:
    12px "Courier New",
    monospace;
  margin: 0;
}
.hero-photo {
  position: relative;
  background: #fff;
  padding: 9px 9px 0;
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--pink);
  transform: rotate(3deg);
  margin: 0 6px 0 0;
}
.hero-photo > img {
  display: block;
  width: 100%;
  border: 1px solid var(--ink);
}
.hero-photo figcaption {
  font:
    bold 12px/1.5 "Courier New",
    monospace;
  padding: 10px 2px;
  text-align: center;
}
.photo-sticker {
  position: absolute;
  top: -26px;
  right: -7px;
  padding: 7px 13px;
  background: var(--acid);
  border: 2px solid var(--ink);
  color: var(--ink);
  transform: rotate(5deg);
  font:
    bold 14px "Comic Sans MS",
    cursive;
  box-shadow: 3px 3px 0 var(--ink);
}
.booking-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 23px 26px;
  border-bottom: 3px solid var(--ink);
  background-color: #f5ffae;
  background-image: repeating-linear-gradient(
    135deg,
    #dfff0033 0 2px,
    transparent 2px 9px
  );
}
.booking-banner > div {
  flex: 1;
}
.booking-label {
  font:
    bold 12px "Courier New",
    monospace;
  margin-bottom: 9px;
}
.booking-banner h2 {
  font:
    bold 29px/1.2 Arial,
    sans-serif;
  margin: 0 0 8px;
}
.booking-banner h2 span {
  white-space: nowrap;
  background: var(--acid);
}
.booking-banner p:last-child {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 0;
  max-width: 570px;
}
.button3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px;
  background: #d5d5d5;
  border: 2px solid;
  border-color: #fff #555 #555 #fff;
  box-shadow: 1px 1px 0 #222;
  color: var(--navy);
  font:
    bold 13px/1.3 Arial,
    sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button3d:visited {
  color: var(--navy);
}
.button3d:hover {
  background: #e9e9e9;
  color: #6c0055;
}
.button3d:active {
  border-color: #555 #fff #fff #555;
  transform: translate(1px, 1px);
  box-shadow: none;
}
.booking-button {
  background: var(--pink);
  color: var(--ink);
  max-width: 215px;
  min-height: 54px;
  font-size: 15px;
}
.booking-button:visited {
  color: var(--ink);
}
.booking-button:hover {
  background: var(--cyan);
  color: var(--ink);
}
.fun-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 13px 20px;
  background: #e8e8e8;
  border-bottom: 2px solid #777;
  font:
    12px "Courier New",
    monospace;
}
.hit-counter {
  margin: 0;
}
.counter-digits {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
  font:
    bold 15px "Courier New",
    monospace;
  font-variant-numeric: tabular-nums;
}
.counter-digits > span {
  background: #111;
  color: #5cff78;
  padding: 3px 4px;
  border: 1px inset #888;
}
.hit-counter small {
  display: block;
  font-size: 11px;
  margin-top: 4px;
}
.effect-controls {
  display: flex;
  gap: 8px;
}
.effect-controls .button3d {
  font-size: 11px;
}
.content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
}
.main-content {
  min-width: 0;
  padding: 24px 28px 28px;
  background-color: #f9f5ff;
  background-image: linear-gradient(90deg, #ede1fa 1px, transparent 1px);
  background-size: 24px 24px;
}
.main-content h2 {
  color: #700066;
  border-bottom: 3px double #99789e;
  padding-bottom: 9px;
  margin: 30px 0 17px;
}
.main-content h2:first-child {
  margin-top: 0;
}
.heading-gif {
  width: 45px;
  vertical-align: middle;
  margin-right: 4px;
}
.main-content li {
  color: #58203e;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.sidebar {
  min-width: 0;
  border-left: 2px solid var(--ink);
  padding: 24px 20px;
  background-color: #dbfbff;
  background-image: radial-gradient(#a0d8e0 1px, transparent 1px);
  background-size: 10px 10px;
}
.profile-photo {
  padding: 8px;
  border: 2px solid var(--ink);
  background: #ffb7e6;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-2deg);
}
.profile-photo img {
  width: 100%;
  display: block;
  border: 1px solid var(--ink);
}
.profile-photo figcaption {
  text-align: center;
  font:
    12px/1.5 "Comic Sans MS",
    cursive;
  padding-top: 8px;
}
.music-player {
  margin: 27px 0;
  background: var(--silver);
  padding: 5px;
  border: 3px outset white;
  box-shadow: 3px 3px 0 var(--ink);
}
.mini-title {
  margin: 0 0 5px;
  padding: 6px;
  background: var(--navy);
  color: white;
  font:
    bold 13px Arial,
    sans-serif;
}
.player-display {
  background: #111;
  color: #74ff9c;
  padding: 14px 8px;
  font:
    12px/1.4 "Courier New",
    monospace;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px inset #ddd;
}
.equalizer {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 22px;
  flex-shrink: 0;
}
.equalizer i {
  height: 30%;
  width: 4px;
  background: #74ff9c;
  transform-origin: bottom;
}
.equalizer i:nth-child(2n) {
  height: 80%;
}
.equalizer i:nth-child(3) {
  height: 100%;
}
body.effects-enabled.music-playing .equalizer i {
  animation: equalize 650ms steps(4, end) infinite alternate;
}
body.effects-enabled.music-playing .equalizer i:nth-child(2n) {
  animation-delay: -350ms;
}
@keyframes equalize {
  to {
    transform: scaleY(0.2);
  }
}
.music-player .button3d {
  width: 100%;
  margin: 7px 0;
}
.music-player audio {
  width: 100%;
  margin-top: 8px;
}
.music-player p {
  font:
    11px/1.5 Arial,
    sans-serif;
  margin: 4px;
}
.non-negotiables h2 {
  font-size: 21px;
  color: #64005c;
}
.non-negotiables ol {
  font-size: 16px;
}
.personal-note {
  font-style: italic;
  font-size: 15px;
  border-top: 2px dotted #608b94;
  padding-top: 15px;
}
.construction-zone {
  text-align: center;
  margin-top: 25px;
}
.construction-zone p {
  font:
    bold 12px/1.6 "Courier New",
    monospace;
  margin: 8px 0 15px;
}
.email-link {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  font:
    12px/1.5 Arial,
    sans-serif;
}
.retro-panel {
  margin: 22px;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 22px;
}
.retro-panel h2 {
  margin: 0 0 12px;
}
.guestbook {
  background-color: #ffedf8;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 27px,
    #edcce1 27px 28px
  );
}
.section-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.section-heading > img {
  flex: 0 0 60px;
}
.section-heading h2 {
  margin: 4px 0 0;
  color: #700066;
}
.eyebrow {
  font:
    bold 12px/1.4 "Courier New",
    monospace;
  margin-bottom: 7px;
}
.guestbook-entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
blockquote {
  margin: 0;
  padding: 15px;
  border: 1px solid #927188;
  background: #fffefd;
  box-shadow: 3px 3px 0 #dfbbd1;
}
blockquote p {
  font-size: 16px;
}
blockquote footer {
  font:
    bold 12px/1.6 "Courier New",
    monospace;
  color: #68005b;
}
blockquote footer span {
  font-weight: normal;
}
.more-guests {
  margin: 12px 0 16px;
}
.more-guests summary {
  padding: 10px 0;
  font:
    bold 13px/1.5 Arial,
    sans-serif;
  color: var(--navy);
}
.webring {
  display: flex;
  gap: 24px;
  align-items: center;
  background-color: #ddffd7;
  background-image: repeating-linear-gradient(
    90deg,
    #b7ecc140 0 1px,
    transparent 1px 12px
  );
}
.web-globe {
  flex: 0 0 120px;
  width: 120px;
}
.webring h2 {
  color: #184f26;
}
.webring p {
  margin-bottom: 10px;
}
.reality-check {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  background-color: #eeebff;
  background-image: radial-gradient(#cac3ef 0.7px, transparent 1px);
  background-size: 8px 8px;
}
.reality-check > img {
  width: 100%;
  background: white;
  padding: 5px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--pink);
  transform: rotate(-3deg);
}
.reality-check p {
  font-size: 16px;
}
.footer {
  text-align: center;
  margin: 30px 22px 0;
  border-top: 3px double #876c9d;
  padding: 20px 0 12px;
  font:
    12px/1.8 "Courier New",
    monospace;
}
.footer p {
  margin-bottom: 12px;
}
.badge-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.badge {
  width: 88px;
  height: 31px;
}
.text-badge {
  width: 110px;
  min-height: 31px;
  display: inline-block;
  border: 2px outset white;
  background: var(--navy);
  color: var(--acid);
  font:
    bold 10px/1.3 "Courier New",
    monospace;
  padding: 2px;
}
.back-to-top {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.status-bar {
  display: flex;
  gap: 4px;
  margin-top: 5px;
  font:
    11px/1.4 Arial,
    sans-serif;
}
.status-bar span {
  flex: 1;
  border: 1px inset #eee;
  padding: 4px 6px;
}
.status-bar span:last-child {
  flex: 0 1 auto;
}
.cursor-sparkle {
  position: fixed;
  width: 18px;
  height: 18px;
  background: var(--pink);
  clip-path: polygon(
    50% 0,
    60% 38%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0 50%,
    40% 38%
  );
  pointer-events: none;
  z-index: 15;
  top: 0;
  left: 0;
}
body.effects-paused *,
body.effects-paused *::before,
body.effects-paused *::after {
  animation: none !important;
}
body.effects-paused .animated-art {
  visibility: hidden;
}
body.effects-paused .marquee p {
  width: auto;
}
@media (max-width: 760px) {
  body {
    padding: 12px 12px 24px;
  }
  .desktop-note {
    font-size: 10px;
  }
  .hero {
    padding: 30px 20px;
    gap: 16px;
  }
  h1 {
    font-size: 55px;
    letter-spacing: -4px;
  }
  .hero-intro {
    font-size: 20px;
  }
  .booking-banner {
    flex-wrap: wrap;
    padding: 20px;
  }
  .booking-banner > div {
    flex-basis: 100%;
  }
  .booking-button {
    max-width: none;
  }
  .main-content {
    padding: 22px 20px;
  }
  .sidebar {
    padding: 22px 15px;
  }
  .nav a {
    font-size: 12px;
    padding: 14px 12px;
  }
  .reality-check {
    grid-template-columns: 140px minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  body {
    padding: 8px 7px 20px;
    font-size: 17px;
  }
  .browser-window {
    padding: 3px;
    box-shadow: 4px 4px 0 #190a30;
  }
  .desktop-note {
    font-size: 9px;
    margin: 0 3px 8px;
    letter-spacing: 0;
  }
  .title-bar {
    font-size: 11px;
    padding: 6px 4px;
    gap: 4px;
  }
  .window-decoration i {
    width: 16px;
  }
  .browser-toolbar {
    padding: 0 7px;
    gap: 0 24px;
  }
  .toolbar-note {
    display: none;
  }
  .address-bar {
    font-size: 10px;
    gap: 5px;
    padding: 0 5px 7px;
  }
  .address-bar a {
    display: flex;
    align-items: center;
    padding: 4px;
  }
  .marquee {
    font-size: 12px;
  }
  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    gap: 8px;
    background: var(--navy);
    color: white;
    font:
      11px "Courier New",
      monospace;
  }
  .nav-container .button3d {
    min-width: 66px;
    min-height: 40px;
    font-size: 12px;
  }
  .nav {
    flex-wrap: wrap;
    padding: 0;
  }
  .nav a {
    flex: 1 1 50%;
    padding: 14px 5px;
  }
  body.menu-ready .nav:not(.is-open) {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 25px 20px 29px;
    gap: 40px;
  }
  h1 {
    font-size: clamp(47px, 13vw, 72px);
    letter-spacing: -3px;
    margin: 15px 0;
  }
  .hero-intro {
    font-size: 22px;
  }
  .hero-photo {
    margin: 0 4px 0 2px;
  }
  .hero-photo figcaption {
    font-size: 11px;
  }
  .photo-sticker {
    top: -22px;
    font-size: 12px;
  }
  .booking-banner {
    padding: 19px 16px;
    gap: 16px;
  }
  .booking-banner h2 {
    font-size: 25px;
  }
  .booking-banner h2 span {
    display: block;
    width: fit-content;
    margin-top: 3px;
  }
  .booking-banner p:last-child {
    font-size: 16px;
  }
  .booking-button {
    width: 100%;
  }
  .fun-toolbar {
    padding: 14px 16px;
    gap: 14px;
  }
  .effect-controls {
    width: 100%;
  }
  .effect-controls button {
    flex: 1;
  }
  .content-wrapper {
    grid-template-columns: 1fr;
  }
  .main-content {
    padding: 24px 18px;
  }
  .main-content h2 {
    font-size: 23px;
  }
  .sidebar {
    border-left: 0;
    border-top: 2px solid var(--ink);
    padding: 24px;
  }
  .profile-photo {
    max-width: 285px;
    margin: auto;
  }
  .music-player {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .retro-panel {
    margin: 18px 12px;
    padding: 17px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .retro-panel h2 {
    font-size: 22px;
  }
  .section-heading {
    gap: 10px;
  }
  .section-heading > img {
    flex-basis: 42px;
    width: 42px;
  }
  .guestbook-entries {
    grid-template-columns: 1fr;
  }
  .webring {
    display: block;
  }
  .web-globe {
    display: block;
    margin: 0 auto 16px;
  }
  .webring .button-row a {
    flex: 1 1 100%;
  }
  .reality-check {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .reality-check > img {
    width: 180px;
    margin: 0 auto;
  }
  .footer {
    margin: 26px 16px 0;
    font-size: 11px;
  }
  .status-bar {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .animated-art {
    visibility: hidden;
  }
  .marquee p {
    width: auto;
  }
  .cursor-sparkle {
    display: none !important;
  }
}