/* ~*~ imponnuke dot neocities ~*~
   made in vim, spiritually */

@font-face { font-family: x; src: local("Comic Sans MS"); } /* just in case */

:root{
  --ink:#111;
  --paper:#fffdf0;
  --hot:#ff3b9e;
  --sky:#33bbff;
  --lime:#9dff3b;
  --yellow:#ffe600;
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive,sans-serif;
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:
    repeating-linear-gradient(45deg, #cdefff 0 22px, #b9e7ff 22px 44px),
    #b9e7ff;
  background-attachment:fixed;
}

/* clouds, kind of */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, #ffffffcc 0 60px, transparent 62px),
    radial-gradient(circle at 78% 30%, #ffffffbb 0 80px, transparent 82px),
    radial-gradient(circle at 45% 78%, #ffffffaa 0 70px, transparent 72px),
    radial-gradient(circle at 88% 85%, #ffffffbb 0 55px, transparent 57px);
}

.page{
  max-width:860px;
  margin:14px auto 40px;
  padding:0 10px;
}

/* ---------- HEADER ---------- */
.topbar{
  position:relative;
  background:var(--paper);
  border:5px ridge var(--hot);
  border-radius:14px;
  padding:10px 18px 22px;
  text-align:center;
  box-shadow:6px 6px 0 #00000033;
}
.topmarquee{
  display:block;
  background:#000;
  color:var(--lime);
  font-size:14px;
  padding:3px 0;
  border-radius:6px;
  margin-bottom:12px;
}

.wordart{
  margin:.15em 0 0;
  font-size:clamp(34px,8vw,68px);
  letter-spacing:1px;
  background:linear-gradient(#fff 5%, var(--yellow) 35%, var(--hot) 70%, #7a00ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
  text-shadow:4px 4px 0 #00000030;
  transform:rotate(-1.6deg);
  animation:wobble 5s ease-in-out infinite;
}
@keyframes wobble{
  0%,100%{ transform:rotate(-1.6deg) }
  50%{ transform:rotate(1.6deg) }
}

.subtitle{ font-size:16px; margin:.6em 0 1em; }

.degree{ font-size:15px; margin:.4em 0; }
.small{ font-size:13px; }
.tiny{ font-size:12px; opacity:.8 }

.rainbow{
  background:linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#3bff6d,#00c3ff,#b400ff,#ff004c);
  background-size:400% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:slide 6s linear infinite;
}
@keyframes slide{ to{ background-position:400% 0 } }

.committee{
  margin:14px auto;
  border-collapse:collapse;
  font-size:14px;
  background:#fff;
  border:2px dashed var(--sky);
}
.committee td{ padding:3px 10px; text-align:left; }
.committee .k{ color:#c1008f; font-weight:bold; }

.dedication{ font-size:19px; color:#c1008f; margin-bottom:0 }
.blink-slow{ animation:blink 1.6s steps(1) infinite }
@keyframes blink{ 50%{ opacity:.25 } }

.stamp{
  position:absolute; top:94px; right:8px;
  width:110px; padding:8px 4px;
  border:4px double #c50000;
  color:#c50000;
  font-size:13px; font-weight:bold; line-height:1.15;
  text-align:center;
  transform:rotate(13deg);
  opacity:.85;
  border-radius:8px;
}
.stamp small{ font-size:10px; font-weight:normal }

/* ---------- NAV ---------- */
.webring{
  margin:14px 0;
  padding:10px;
  background:#000;
  border:4px ridge var(--lime);
  border-radius:10px;
  text-align:center;
  font-size:14px;
  color:var(--lime);
}
.webring a{
  display:inline-block;
  margin:3px 4px;
  padding:2px 8px;
  background:var(--yellow);
  color:#000;
  text-decoration:none;
  border:2px outset #fff;
  border-radius:5px;
}
.webring a:hover{ background:var(--hot); color:#fff; transform:rotate(-3deg) }

/* ---------- BOXES ---------- */
.box{
  background:var(--paper);
  border:4px solid #000;
  border-radius:12px;
  padding:14px 20px 18px;
  margin:18px 0;
  box-shadow:5px 5px 0 #00000030;
}
.box:nth-child(odd){ border-color:#7a00ff }
.box:nth-child(even){ border-color:#009e5c }

h2{
  margin:.2em 0 .5em;
  font-size:26px;
  color:#fff;
  background:linear-gradient(90deg,var(--hot),#7a00ff);
  display:inline-block;
  padding:4px 14px;
  border-radius:9px;
  border:3px outset #ffffffaa;
  transform:rotate(-1deg);
  text-shadow:2px 2px 0 #0006;
}
h3{
  margin:1.1em 0 .3em;
  font-size:19px;
  color:#0060a8;
  text-decoration:underline wavy var(--hot);
}
p{ margin:.7em 0 }
b.hl{ background:var(--yellow); padding:0 3px; border-radius:3px }
b.hl2{ background:var(--lime); padding:0 3px; border-radius:3px }

.new-gif{ vertical-align:middle; margin-left:6px; animation:blink 1s steps(1) infinite }
.keywords{ font-size:14px; border-top:2px dotted #999; padding-top:8px }
.aside{ font-style:italic; color:#555 }

/* ---------- FORMULA ---------- */
.formula{
  margin:16px auto;
  padding:18px 10px;
  max-width:420px;
  text-align:center;
  font-size:34px;
  background:#000;
  color:#fff;
  border:5px ridge var(--yellow);
  border-radius:12px;
  font-family:"Courier New",monospace;
}
.f-var{ color:var(--lime); }
.formula .f-var:nth-of-type(2){ color:var(--hot) }
.wherelist{ list-style:"→ "; font-size:15px }

/* ---------- RECIPE ---------- */
.recipe{
  background:#fff8bd;
  border:4px dashed #e0a800;
  border-radius:12px;
  padding:6px 18px 14px;
  margin:14px 0;
}
.recipe-title{ text-align:center; font-size:20px; font-weight:bold; color:#a35c00 }
.recipe ol{ margin:0; padding-left:24px }
.recipe li{ margin:.5em 0 }

.instrument{
  background:#e7f7ff; border:3px dotted var(--sky);
  border-radius:10px; padding:8px 12px; text-align:center;
}

/* ---------- FIGURE / TABLE ---------- */
.fig{
  margin:18px 0;
  text-align:center;
  background:#fff;
  border:4px groove var(--sky);
  border-radius:10px;
  padding:12px;
}
.fig img{
  max-width:100%; height:auto;
  border:3px solid #000;
  border-radius:6px;
  background:#fff;
}
figcaption, .caption{ font-size:14px; margin-top:8px; text-align:left }

table.data{
  width:100%;
  border-collapse:collapse;
  margin:12px 0;
  font-size:15px;
  background:#fff;
  border:3px solid #000;
}
table.data th{
  background:#7a00ff; color:#fff; padding:6px 8px; border:2px solid #000;
}
table.data td{ padding:6px 8px; border:2px solid #000 }
table.data tr:nth-child(even) td{ background:#f3f0ff }
td.good{ background:#c9ffbe !important; font-weight:bold }
td.bad{ background:#ffc9c9 !important; font-weight:bold }
tr.ceiling td{ border-top:5px double #c50000 }

.outlier{
  background:#ffe1e1; border:3px solid #c50000; border-radius:10px;
  padding:8px 12px; font-size:15px;
}

/* ---------- QUOTE ---------- */
blockquote.central{
  margin:16px 0;
  padding:16px 20px;
  background:linear-gradient(90deg,#fff3b0,#ffd0ec);
  border-left:10px solid var(--hot);
  border-radius:0 12px 12px 0;
  font-size:21px;
  font-weight:bold;
  transform:rotate(-.6deg);
}
.final{
  text-align:center; font-size:24px; font-weight:bold; color:#7a00ff;
  text-shadow:2px 2px 0 var(--yellow);
  margin:18px 0;
}

.refs{ font-size:14px }
.refs li{ margin:.45em 0 }

/* ---------- BIG BUTTON ---------- */
.bigbutton-wrap{ text-align:center; margin:18px 0 6px }
.bigbutton{
  font-family:inherit; font-size:22px; font-weight:bold;
  padding:12px 22px;
  color:#000; background:var(--lime);
  border:5px outset #fff;
  border-radius:12px;
  cursor:pointer;
  box-shadow:4px 4px 0 #0004;
}
.bigbutton:hover{ background:var(--yellow) }
.bigbutton:active{ border-style:inset }
#gobutton-msg{ min-height:1.4em; font-weight:bold; color:#c1008f }

.minibutton{
  font-family:inherit; font-size:12px;
  padding:4px 10px; margin:0 4px;
  border:3px outset #fff; border-radius:8px;
  background:var(--sky); cursor:pointer;
}
.minibutton:active{ border-style:inset }

/* ---------- CLIPS ---------- */
.clips{ background:#1a1a2e; color:#eaeaff; border-color:var(--hot) }
.clips h2{ background:linear-gradient(90deg,#00c3ff,var(--lime)); color:#000; text-shadow:none }
.clipmarquee{
  display:block; background:#000; color:var(--yellow);
  font-size:13px; padding:3px 0; border-radius:6px; margin:6px 0 10px;
}
#clip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;
}
.clip{
  background:#000;
  border:3px ridge var(--lime);
  border-radius:10px;
  padding:8px;
}
.clip h4{ margin:.2em 0 .4em; font-size:16px; color:var(--yellow) }
.clip video{ width:100%; border-radius:6px; background:#000; display:block }
.clip p{ font-size:13px; margin:.5em 0 0; color:#cfe }
.clip .rank{
  display:inline-block; font-size:11px; background:var(--hot); color:#fff;
  padding:1px 7px; border-radius:20px; margin-bottom:4px;
}
.noclips{
  grid-column:1/-1;
  border:4px dashed var(--yellow);
  border-radius:12px;
  padding:18px;
  text-align:center;
  font-size:15px;
}
.noclips code{
  display:inline-block; background:#000; color:var(--lime);
  padding:2px 6px; border-radius:4px; font-size:13px;
}

/* ---------- GUESTBOOK ---------- */
.guestbook{ background:#fff0f8; border-color:var(--hot) }
.entry{
  background:#fff; border:2px dotted #c1008f; border-radius:8px;
  padding:6px 10px; margin:8px 0; font-size:15px;
}
#gb-form{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px }
#gb-form input{
  font-family:inherit; font-size:14px; padding:6px 8px;
  border:3px inset #ddd; border-radius:6px; flex:1 1 140px;
}
#gb-form button{
  font-family:inherit; font-weight:bold; padding:6px 14px;
  border:3px outset #fff; border-radius:8px;
  background:var(--yellow); cursor:pointer;
}

/* ---------- FOOTER ---------- */
footer{
  margin-top:22px; text-align:center;
  background:var(--paper);
  border:4px ridge #009e5c;
  border-radius:12px;
  padding:12px;
}
.underconstruction{
  background:repeating-linear-gradient(45deg,#000 0 14px,var(--yellow) 14px 28px);
  color:#fff;
  -webkit-text-stroke:0;
  text-shadow:0 0 4px #000, 0 0 4px #000, 2px 2px 0 #000;
  font-weight:bold; padding:8px; border-radius:8px; margin-bottom:10px;
  font-size:15px;
}
.counter{
  font-family:"Courier New",monospace; font-weight:bold;
  background:#000; color:#0f0; padding:2px 8px; border-radius:4px;
  letter-spacing:3px;
}
a{ color:#c1008f }

/* ---------- SPARKLES ---------- */
#sparkles{ position:fixed; inset:0; pointer-events:none; z-index:9999 }
.sp{
  position:absolute;
  font-size:16px;
  color:#3dff6a;
  text-shadow:0 0 6px #9dff3b, 0 0 12px #00ff88;
  animation:fall 1.1s linear forwards;
}
@keyframes fall{
  from{ transform:translate(0,0) scale(1) rotate(0); opacity:1 }
  to{ transform:translate(var(--dx),36px) scale(.2) rotate(360deg); opacity:0 }
}

/* ---------- SERIOUS ACADEMIC MODE ---------- */
body.serious{
  font-family:Georgia,"Times New Roman",serif;
  background:#f4f4f4;
}
body.serious::before{ display:none }
body.serious .wordart{
  background:none; color:#000; -webkit-text-stroke:0; text-shadow:none;
  animation:none; transform:none; font-size:32px;
}
body.serious h2{
  background:none; color:#000; border:0; transform:none; text-shadow:none;
  font-size:22px; padding:0; border-bottom:1px solid #000; display:block;
  border-radius:0;
}
body.serious h3{ color:#000; text-decoration:none; font-style:italic }
body.serious .box, body.serious footer, body.serious .topbar{
  background:#fff; border:1px solid #bbb; border-radius:0; box-shadow:none;
}
body.serious .webring{ background:#fff; color:#000; border:1px solid #bbb; border-radius:0 }
body.serious .webring a{ background:none; border:0; color:#00e; text-decoration:underline }
body.serious .rainbow{ background:none; color:#000; animation:none }
body.serious .formula{ background:#fff; color:#000; border:1px solid #bbb; font-size:24px }
body.serious .f-var{ color:#000 }
body.serious .recipe, body.serious .instrument, body.serious .outlier,
body.serious blockquote.central, body.serious .fig, body.serious .guestbook,
body.serious .clips{
  background:#fff; border:1px solid #bbb; color:#000; transform:none; border-radius:0;
}
body.serious .clips h2{ background:none }
body.serious .clip{ background:#fff; border:1px solid #bbb }
body.serious .clip h4{ color:#000 }
body.serious .clip p{ color:#333 }
body.serious .final{ color:#000; text-shadow:none }
body.serious .stamp, body.serious .new-gif, body.serious .underconstruction,
body.serious marquee{ display:none }
body.serious .dedication{ color:#000; animation:none; font-style:italic }
body.serious .committee{ border:1px solid #bbb }
body.serious .committee .k{ color:#000 }
body.serious .bigbutton, body.serious .minibutton{
  background:#eee; border:1px solid #999; border-radius:3px; font-weight:normal;
  box-shadow:none; font-size:14px;
}
body.serious b.hl, body.serious b.hl2{ background:none }
body.serious table.data th{ background:#ddd; color:#000 }
body.serious td.good, body.serious td.bad{ background:#fff !important }

@media (max-width:640px){
  .stamp{ display:none }
  .box{ padding:12px 14px }
}