/* ============================================================
   THE IMMACULATE RECEPTION
   a personal homepage. made with notepad. best viewed at 800x600.
   ============================================================ */

body{
  margin:0; padding:22px 12px 30px;
  min-height:100svh;
  background-color:#1a0a10;
  background-image:var(--wallpaper);
  background-size:cover;
  background-position:center 18%;
  background-attachment:fixed;
  background-repeat:no-repeat;
  font-family:"Times New Roman", Times, serif;
  color:#000;
  text-align:center;
  -webkit-text-size-adjust:100%;
}

/* ---------- the scrolling banner. non-negotiable. ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(20,8,14,.55) 0%,
    rgba(20,8,14,.22) 12%,
    rgba(20,8,14,.05) 24%,
    rgba(20,8,14,.05) var(--fade,66%),            /* the photo runs clear to here */
    rgba(20,8,14,.62) calc(var(--fade,66%) + 11%),
    rgba(20,8,14,.92) calc(var(--fade,66%) + 21%),
    rgba(20,8,14,.97) 100%);
}

.banner{
  max-width:560px; margin:0 auto 12px;
  background:#000; color:#ffd700;
  border:3px ridge #ffd700;
  font-family:"Courier New", Courier, monospace;
  font-size:13px; font-weight:bold; letter-spacing:.08em;
  padding:5px 0;
}

/* ---------- the page itself ---------- */
.page{
  position:relative; z-index:1;
  max-width:460px; margin:0 auto;
  padding:2px 6px 6px;
  min-height:calc(100svh - 56px);
  display:flex; flex-direction:column; justify-content:space-between;
}

.details{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(6px,1.9vw,10px);
}
.details > *{ margin:0; }

/* on a photograph, everything needs a hard shadow behind it */
.of,.aside,.address,.bring,.subject{
  text-shadow:0 2px 10px #000, 0 1px 3px #000, 0 0 22px rgba(0,0,0,.9);
}

/* ---------- WordArt. gold. outlined. glorious. ---------- */
.wordart{
  font-family:"Comic Sans MS","Comic Neue",cursive;
  font-size:clamp(30px,9.4vw,46px);
  font-weight:bold; line-height:1.16;
  margin:6px 0 2px; padding-bottom:.1em;
  background:linear-gradient(#fff6c0 0%,#ffd700 38%,#b8860b 62%,#ffd700 82%,#fff6c0 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.6px #4a0d0d;
  paint-order:stroke fill;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.42));
  transform:rotate(-1.4deg);
}

.invite{ font-size:16px; font-style:italic; margin:10px 0 0; color:#fff8e0; }

/* ---------- the sacred photograph, in a gold frame ---------- */
.frame{
  display:inline-block; margin:12px 0 4px;
  border:7px ridge #ffd700; background:#000;
  padding:3px; max-width:100%;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.frame img{ display:block; width:100%; max-width:250px; height:auto; }
.caption{ font-size:12px; font-style:italic; color:#444; margin:5px 0 0; }

/* ---------- classic rainbow rule ---------- */
.rule{
  height:5px; margin:15px auto; max-width:94%; border:1px solid #333;
  background:repeating-linear-gradient(90deg,
    #ff0000 0 14px,#ff9900 14px 28px,#ffee00 28px 42px,#33cc33 42px 56px,
    #0099ff 56px 70px,#6633cc 70px 84px);
  animation:slide 2.4s linear infinite;
}
@keyframes slide{ to{ background-position:84px 0; } }

/* ---------- the details ---------- */
.of{ font-size:17px; font-style:italic; margin:0; color:#fff8e0; }
.subject{
  font-family:"Comic Sans MS","Comic Neue",cursive;
  font-size:clamp(19px,5.6vw,25px); font-weight:bold;
  color:#ffd700; margin:3px 0 7px; line-height:1.2;
}
.aside{ font-size:16px; color:#fff8e0; margin:0 0 4px; }

/* the date, in a box, because it is IMPORTANT */
.datebox{
  display:inline-block; margin:12px auto 4px;
  background:#ffffcc; border:3px double #7a0d1e;
  padding:8px 15px;
  font-size:clamp(15px,4.6vw,19px); font-weight:bold; color:#7a0d1e;
}
.blink{ animation:blink 1.1s steps(1) infinite; color:#d40000; font-family:"Comic Sans MS","Comic Neue",cursive; font-size:13px; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- windows 95 buttons ---------- */
.buttons{
  margin:8px auto 0; width:100%; max-width:330px;
  display:flex; flex-direction:row; justify-content:center; align-items:stretch; gap:12px;
}
.btn95{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 0; min-width:0; white-space:nowrap;
  padding:12px 8px;
  font-family:"Comic Sans MS","Comic Neue",cursive;
  font-size:clamp(14px,4.2vw,17px); font-weight:bold; color:#000; text-decoration:none;
  background:#d4d0c8;
  border-top:3px solid #fff; border-left:3px solid #fff;
  border-right:3px solid #5a5a5a; border-bottom:3px solid #5a5a5a;
  -webkit-tap-highlight-color:transparent;
}
.btn95:active{
  border-top:3px solid #5a5a5a; border-left:3px solid #5a5a5a;
  border-right:3px solid #fff; border-bottom:3px solid #fff;
  padding:13px 9px 11px 11px;
}
.btn95:hover{ background:#e4e0d8; }

.bring{
  font-size:16px; font-weight:bold; color:#8dff8d;
  margin:2px 0 0; font-family:"Comic Sans MS","Comic Neue",cursive;
  line-height:1.4;
}

/* ---------- the footer nobody read ---------- */
.counter{
  display:inline-block; margin:4px 0 6px;
  background:#000; color:#33ff33;
  font-family:"Courier New",Courier,monospace; font-size:16px; font-weight:bold;
  letter-spacing:.22em; padding:4px 9px; border:2px inset #888;
}
.smallprint{ font-size:11px; color:#555; line-height:1.7; margin:6px 0 0; }
.smallprint a{ color:#0000ee; }

/* under construction, forever */
.construction{
  max-width:560px; margin:12px auto 0; padding:5px 0;
  font-family:"Courier New",Courier,monospace; font-size:11px; font-weight:bold;
  color:#000; letter-spacing:.1em;
  background:repeating-linear-gradient(45deg,#ffcc00 0 11px,#000 11px 22px);
  border:2px solid #000;
}
.construction span{ background:#ffcc00; padding:3px 8px; }

@media (prefers-reduced-motion:reduce){
  .blink,.rule{ animation:none; }
}

.frame img{ aspect-ratio:3/4; object-fit:cover; object-position:center 20%; }

.address{
  font-size:16px; line-height:1.5; color:#fff8e0;
  margin:0;
}
.address b{ color:#ffd700; }

/* a button label with no business being this long */
.buttons--wide{ max-width:370px; }
.btn95--long{
  white-space:normal; overflow-wrap:anywhere; hyphens:auto;
  line-height:1.4;
  font-size:clamp(12.5px,3.5vw,14.5px);
  padding:13px 14px;
}