/* ==========================================================
   ~*~ MiSA's HOME PAGE ~*~   style.css
   hand-coded in Notepad by a dog. do not steal my HTML!!
   ========================================================== */

:root{
  --hot:        #ff2d95;
  --hotter:     #d6006e;
  --bubble:     #ffd5ec;
  --bubble-2:   #ffeaf6;
  --lav:        #c77dff;
  --cyan:       #00e5ff;
  --lemon:      #fff45c;
  --ink:        #3d0022;
  --paper:      #fff7fc;
  --chrome-lt:  #ffffff;
  --chrome-dk:  #a1005a;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding:14px 10px 40px;
  color:var(--ink);
  font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive,sans-serif;
  font-size:16px;
  line-height:1.55;
  background-color:#ffb6dc;
  /* tiled 90s wallpaper: sparkles + gingham, no image files harmed */
  background-image:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.95) 1.4px, transparent 1.6px),
    radial-gradient(circle at 34px 26px, rgba(255,255,255,.75) 1.1px, transparent 1.3px),
    radial-gradient(circle at 22px 44px, rgba(255,244,92,.85) 1.6px, transparent 1.8px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.16) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 24px);
  background-size:48px 48px,48px 48px,48px 48px,48px 48px,48px 48px;
}

/* ---------- the 800x600 table-layout container ---------- */
.shell{
  max-width:940px;
  margin:0 auto;
  background:var(--paper);
  border:4px ridge var(--hot);
  box-shadow:8px 8px 0 rgba(61,0,34,.35);
}
.pad{ padding:18px; }

/* ---------- typography ---------- */
.pixel{
  font-family:"Press Start 2P","Courier New",monospace;
  letter-spacing:.5px;
  line-height:1.7;
}
h1,h2,h3{ margin:0 0 10px; }

h1.logo{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:clamp(17px,4.4vw,34px);
  line-height:1.5;
  margin:0;
  color:var(--lemon);
  text-shadow:
     3px 3px 0 var(--hotter),
    -1px -1px 0 var(--hotter),
     1px -1px 0 var(--hotter),
    -1px  1px 0 var(--hotter),
     6px 6px 0 rgba(0,0,0,.28);
  animation:hue 6s linear infinite;
}
@keyframes hue{ 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }

h2.bar{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:13px;
  color:#fff;
  background:linear-gradient(90deg,var(--hotter),var(--hot) 45%,var(--lav));
  padding:9px 12px;
  border:2px outset var(--bubble);
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
  margin:0 0 14px;
}
h3.sub{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:11px;
  color:var(--hotter);
  margin:22px 0 8px;
}

a{ color:#0000ee; }
a:visited{ color:#8b008b; }
a:hover{ color:var(--hotter); background:var(--lemon); }

/* ---------- header ---------- */
.topper{
  background:
    repeating-linear-gradient(135deg,#ff2d95 0 14px,#ff7ac0 14px 28px);
  border-bottom:4px double #fff;
  padding:20px 14px 16px;
  text-align:center;
}
.tagline{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:9px;
  color:#fff;
  margin-top:12px;
  text-shadow:1px 1px 0 var(--hotter);
}

/* ---------- marquee ---------- */
.marq{
  background:#000;
  color:var(--lemon);
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:10px;
  padding:7px 0;
  border-top:2px solid var(--cyan);
  border-bottom:2px solid var(--cyan);
  overflow:hidden;
  white-space:nowrap;
}
.marq span{
  display:inline-block;
  padding-left:100%;
  animation:scrollit 26s linear infinite;
}
@keyframes scrollit{ to{ transform:translateX(-100%); } }

/* ---------- nav buttons ---------- */
nav.buttons{
  background:var(--bubble);
  border-bottom:3px groove var(--hot);
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:center;
}
nav.buttons a{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:9px;
  text-decoration:none;
  color:var(--hotter);
  background:linear-gradient(#fff,var(--bubble-2));
  border:3px outset #fff;
  padding:8px 10px;
  display:block;
}
nav.buttons a:hover{ background:var(--lemon); color:#000; }
nav.buttons a.here{
  background:linear-gradient(var(--hot),var(--hotter));
  color:#fff;
  border-style:inset;
}

/* ---------- layout ---------- */
.cols{ display:flex; gap:18px; align-items:flex-start; }
.main{ flex:1 1 auto; min-width:0; }
.side{ flex:0 0 216px; }

@media (max-width:760px){
  .cols{ flex-direction:column; }
  .side{ flex:1 1 auto; width:100%; }
}

/* ---------- sidebar boxes ---------- */
.box{
  background:#fff;
  border:3px ridge var(--lav);
  margin-bottom:16px;
}
.box .cap{
  background:linear-gradient(90deg,var(--lav),var(--hot));
  color:#fff;
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:9px;
  padding:7px 8px;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.box .body{ padding:10px; font-size:14px; }
.box ul{ margin:0; padding-left:18px; }
.box li{ margin-bottom:6px; }

/* ---------- blog posts ---------- */
.post{
  background:#fff;
  border:3px double var(--hot);
  margin-bottom:22px;
}
.post .head{
  background:var(--bubble);
  border-bottom:2px dashed var(--hot);
  padding:10px 12px;
}
.post .title{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:12px;
  color:var(--hotter);
  line-height:1.6;
  margin:0 0 6px;
}
.post .meta{
  font-size:12px;
  color:#8a2f66;
  font-family:"Courier New",monospace;
}
.post .txt{ padding:14px; }
.post p{ margin:0 0 12px; }
.post p:last-child{ margin-bottom:0; }

/* ---------- photos ---------- */
figure{ margin:0 0 14px; }
.snap{
  background:#fff;
  border:6px solid #fff;
  outline:3px solid var(--hot);
  outline-offset:0;
  box-shadow:5px 5px 0 rgba(214,0,110,.3);
  display:block;
  width:100%;
  height:auto;
}
figcaption{
  font-size:13px;
  color:#8a2f66;
  padding:8px 2px 0;
  font-style:italic;
}
.tilt-l{ transform:rotate(-1.6deg); }
.tilt-r{ transform:rotate(1.4deg); }

.floatL{ float:left;  width:44%; margin:2px 16px 10px 0; }
.floatR{ float:right; width:44%; margin:2px 0 10px 16px; }
@media (max-width:620px){
  .floatL,.floatR{ float:none; width:100%; margin:0 0 14px; }
}
.clear{ clear:both; }

.duo{ display:flex; gap:12px; flex-wrap:wrap; }
.duo figure{ flex:1 1 200px; }

/* ---------- album grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;
}
.grid figure{ margin:0; }
.grid .snap{ aspect-ratio:3/4; object-fit:cover; }

/* ---------- misc 90s furniture ---------- */
.rule{
  height:10px;
  border:0;
  margin:20px 0;
  background:linear-gradient(90deg,
    #ff2d95,#ff8a00,#fff45c,#6bff6b,#00e5ff,#c77dff,#ff2d95);
  background-size:200% 100%;
  animation:slide 4s linear infinite;
}
@keyframes slide{ to{ background-position:-200% 0; } }

.construction{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:9px;
  text-align:center;
  color:#000;
  background:repeating-linear-gradient(45deg,var(--lemon) 0 12px,#000 12px 24px);
  padding:0;
  margin:18px 0;
  border:2px solid #000;
}
.construction span{
  background:var(--lemon);
  display:inline-block;
  padding:8px 14px;
  margin:6px 0;
}

.blink{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.counter{
  display:inline-flex;
  gap:2px;
  background:#000;
  padding:4px;
  border:2px inset #888;
}
.counter b{
  font-family:"Courier New",monospace;
  font-weight:700;
  background:#111;
  color:#0f0;
  padding:2px 5px;
  font-size:16px;
  border:1px solid #333;
}

.awards{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.badge{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:7px;
  line-height:1.6;
  width:100px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4px;
  border:2px outset #ccc;
  color:#fff;
  text-decoration:none;
}
.b1{ background:linear-gradient(135deg,#000,#005eff); }
.b2{ background:linear-gradient(135deg,#d6006e,#ff8a00); }
.b3{ background:linear-gradient(135deg,#00a86b,#00e5ff); color:#003; }
.b4{ background:linear-gradient(135deg,#8b008b,#c77dff); }

/* ---------- footer ---------- */
footer{
  background:var(--bubble);
  border-top:3px groove var(--hot);
  padding:16px;
  text-align:center;
  font-size:12px;
  color:#8a2f66;
}
footer .pixel{ font-size:9px; }

/* ---------- guestbook ---------- */
.entry{
  background:#fff;
  border-left:6px solid var(--hot);
  border-top:1px solid var(--bubble);
  padding:10px 12px;
  margin-bottom:12px;
  font-size:14px;
}
.entry .who{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:9px;
  color:var(--hotter);
  display:block;
  margin-bottom:6px;
}
.entry .when{ font-family:"Courier New",monospace; font-size:11px; color:#a06; }

form.gb{ background:#fff; border:3px ridge var(--lav); padding:14px; }
form.gb label{
  display:block;
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:9px;
  color:var(--hotter);
  margin:0 0 6px;
}
form.gb input,form.gb textarea{
  width:100%;
  font-family:"Comic Sans MS",cursive,sans-serif;
  font-size:15px;
  padding:8px;
  border:2px inset #ccc;
  background:#fffdfe;
  margin-bottom:12px;
}
form.gb textarea{ min-height:90px; resize:vertical; }
.btn95{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:10px;
  padding:11px 16px;
  color:var(--hotter);
  background:linear-gradient(#fff,var(--bubble));
  border:3px outset #fff;
  cursor:pointer;
}
.btn95:active{ border-style:inset; }

/* ---------- tables (grievance ledger / stats) ---------- */
table.retro{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:3px ridge var(--hot);
  font-size:14px;
}
table.retro th{
  background:linear-gradient(var(--hot),var(--hotter));
  color:#fff;
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:9px;
  padding:9px 8px;
  text-align:left;
  line-height:1.6;
}
table.retro td{ padding:9px 8px; border-bottom:1px dashed var(--bubble); vertical-align:top; }
table.retro tr:nth-child(even) td{ background:var(--bubble-2); }
.sev{
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:8px;
  color:#fff;
  background:var(--hotter);
  padding:3px 5px;
  white-space:nowrap;
}

/* ---------- media player ---------- */
.player{
  background:#000;
  border:3px outset #666;
  padding:9px;
  color:#0f0;
  font-family:"Courier New",monospace;
  font-size:12px;
}
.eq{ display:flex; gap:3px; align-items:flex-end; height:26px; margin-top:7px; }
.eq i{ width:6px; background:linear-gradient(#0f0,#ff0,#f00); animation:eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(1){ animation-delay:0s }   .eq i:nth-child(2){ animation-delay:.12s }
.eq i:nth-child(3){ animation-delay:.24s } .eq i:nth-child(4){ animation-delay:.36s }
.eq i:nth-child(5){ animation-delay:.48s } .eq i:nth-child(6){ animation-delay:.6s }
.eq i:nth-child(7){ animation-delay:.72s } .eq i:nth-child(8){ animation-delay:.84s }
@keyframes eq{ from{ height:15% } to{ height:100% } }

/* ---------- sparkle cursor ---------- */
.sparkle{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  font-size:13px;
  animation:fall 1s linear forwards;
}
@keyframes fall{
  from{ opacity:1; transform:translateY(0) scale(1) rotate(0); }
  to  { opacity:0; transform:translateY(26px) scale(.4) rotate(140deg); }
}

.tiny{ font-size:11px; font-family:"Courier New",monospace; color:#a06; }
.mailink{ font-family:"Press Start 2P","Courier New",monospace; font-size:9px; }

video.snap{ background:#000; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; }
  .marq span{ padding-left:0; }
}

/* keep side-by-side pairs the same height so rows line up */
.duo .snap{ aspect-ratio:4/5; object-fit:cover; }

/* ---------- narrow screens: the pixel font is very wide ---------- */
h1.logo, h2.bar, .post .title, h3.sub, .box .cap,
nav.buttons a, .construction span, .tagline{ overflow-wrap:anywhere; }

.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tablewrap table.retro{ min-width:460px; }

@media (max-width:560px){
  body{ padding:8px 6px 30px; }
  .pad{ padding:12px; }
  .shell{ border-width:3px; }
  h1.logo{ font-size:clamp(11px,4.1vw,20px); }
  .tagline{ font-size:8px; }
  .marq{ font-size:9px; }
  nav.buttons{ gap:5px; padding:8px; }
  nav.buttons a{ font-size:8px; padding:7px 8px; border-width:2px; }
  h2.bar{ font-size:10px; padding:8px 9px; }
  h3.sub{ font-size:10px; }
  .post .title{ font-size:10px; }
  .post .meta{ font-size:11px; }
  .construction span{ font-size:8px; padding:7px 9px; }
  .box .cap{ font-size:8px; }
  .btn95{ font-size:9px; }
  form.gb label{ font-size:8px; }
  .entry .who{ font-size:8px; }
  table.retro th{ font-size:8px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
  footer .pixel{ font-size:8px; }
  .badge{ font-size:6px; width:86px; }
}