/* ===========================================================
   NUDE MATH  -  nudemath.com  -  hand coded (in spirit) in Notepad
   Font: Comic Neue (SIL Open Font License) - self hosted in /fonts
   =========================================================== */

@font-face{font-family:"Comic Neue";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ComicNeue-Regular.woff2") format("woff2"),url("../fonts/ComicNeue-Regular.woff") format("woff")}
@font-face{font-family:"Comic Neue";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/ComicNeue-Bold.woff2") format("woff2"),url("../fonts/ComicNeue-Bold.woff") format("woff")}
@font-face{font-family:"Comic Neue";font-style:italic;font-weight:400;font-display:swap;
  src:url("../fonts/ComicNeue-Italic.woff2") format("woff2"),url("../fonts/ComicNeue-Italic.woff") format("woff")}
@font-face{font-family:"Comic Neue";font-style:italic;font-weight:700;font-display:swap;
  src:url("../fonts/ComicNeue-BoldItalic.woff2") format("woff2"),url("../fonts/ComicNeue-BoldItalic.woff") format("woff")}
@font-face{font-family:"Comic Neue Angular";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/ComicNeueAngular-Bold.woff2") format("woff2"),url("../fonts/ComicNeueAngular-Bold.woff") format("woff")}

:root{
  --magenta:#ff00ff; --cyan:#00ffff; --yellow:#ffff00; --lime:#00ff00;
  --red:#ff0000; --blue:#0000ff; --orange:#ff6600; --navy:#000080; --purple:#800080;
}

html{scrollbar-color:var(--magenta) var(--yellow)}
::-webkit-scrollbar{width:16px;background:var(--yellow)}
::-webkit-scrollbar-thumb{background:var(--magenta);border:3px outset #ff80ff}
::selection{background:var(--magenta);color:var(--yellow)}

body{
  margin:0;padding:10px 0 30px;
  background:#ffff33 url("../img/bg-tile.png");
  font-family:"Comic Neue","Comic Sans MS","Chalkboard SE","Comic Neue Angular",cursive;
  font-size:17px;line-height:1.35;color:#000;
  cursor:crosshair;
}
a:link{color:#0000ee}
a:visited{color:#551a8b}
a:hover{color:var(--red);background:var(--yellow)}
a:active{color:var(--lime)}
img{max-width:100%}
h1,h2,h3{font-family:"Comic Neue Angular","Comic Neue","Comic Sans MS",cursive;line-height:1.1;margin:.6em 0 .4em}
h1{color:var(--red);font-size:2.2em;text-decoration:underline;text-shadow:2px 2px 0 var(--cyan)}
h2{font-size:1.5em;background:var(--blue);color:var(--yellow);padding:4px 10px;border:3px outset #8080ff;display:inline-block}
h3{font-size:1.2em;color:var(--purple);border-bottom:3px dotted var(--magenta)}
p{margin:.6em 0}
hr{border:0;height:6px;background:url("../img/hr-rainbow.gif") repeat-x;margin:14px 0}
code,.mono{font-family:"Courier New",Courier,monospace}
small{font-size:.78em}
sup{font-size:.7em}

/* ---- blink / effects ---- */
.blink{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.shake{display:inline-block;animation:shake .4s linear infinite}
@keyframes shake{0%{transform:translate(1px,1px) rotate(0)}25%{transform:translate(-1px,-2px) rotate(-1deg)}50%{transform:translate(-2px,0) rotate(1deg)}75%{transform:translate(2px,2px) rotate(0)}100%{transform:translate(1px,-1px) rotate(1deg)}}
.rainbow{font-weight:700}
.wordart{
  font-family:"Comic Neue Angular","Comic Neue","Comic Sans MS",cursive;font-weight:700;
  font-size:4.4em;letter-spacing:.04em;margin:0;line-height:1;font-style:italic;
  text-shadow:3px 3px 0 #000,6px 6px 0 var(--yellow),9px 9px 0 #000;
  text-decoration:none;
}
.wordart span{display:inline-block;animation:bounce 1.2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.wordart span:nth-child(2n){animation-delay:.15s}
.wordart span:nth-child(3n){animation-delay:.3s}
.wordart span:nth-child(5n){animation-delay:.45s}
@media (prefers-reduced-motion:reduce){*{animation:none!important}marquee{overflow:visible!important}}

/* ---- page frame ---- */
.page{width:800px;max-width:100%;margin:0 auto}
table.frame{width:100%;background:#fff;border:8px ridge var(--magenta);border-collapse:separate;border-spacing:0}
td.header{
  background:var(--cyan);text-align:center;padding:14px 10px 8px;
  border-bottom:6px groove var(--orange);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 12px,transparent 12px 24px);
}
td.header .tagline{font-size:1.25em;font-weight:700;color:var(--navy);margin:6px 0 0}
.ticker{background:#000;color:var(--lime);font-weight:700;padding:3px 0;border-top:3px solid var(--red);border-bottom:3px solid var(--red)}
.ticker marquee{font-family:"Courier New",monospace;font-size:16px}
td.sidebar{width:175px;background:var(--lime);vertical-align:top;padding:10px 8px;border-right:5px double var(--blue)}
td.content{vertical-align:top;padding:12px 16px 20px;background:#fff}
td.footer{background:var(--magenta);color:var(--yellow);text-align:center;padding:10px;font-size:.85em;border-top:6px groove var(--orange)}
td.footer a{color:#fff}

/* ---- nav ---- */
.nav a{
  display:block;margin:5px 0;padding:6px 8px;text-align:center;font-weight:700;text-decoration:none;
  background:var(--blue);color:var(--yellow)!important;border:4px outset #8080ff;font-size:1em;
}
.nav a:hover{background:var(--magenta);border-style:inset;color:#fff!important}
.nav a.here{background:var(--red);border-style:inset}
.sidebox{background:#fff;border:3px inset #c0c0c0;padding:6px;margin:12px 0;font-size:.85em;text-align:center}
.sidebox h4{margin:0 0 4px;color:var(--red);font-size:1em;text-decoration:underline}
.counter{display:inline-block;background:#000;color:var(--lime);font-family:"Courier New",monospace;font-size:1.3em;font-weight:700;letter-spacing:3px;padding:2px 6px;border:3px inset #808080}
.buttons img{margin:2px 0;image-rendering:pixelated}

/* ---- content widgets ---- */
table.box{border:4px double var(--blue);border-collapse:separate;border-spacing:0;margin:10px 0;width:100%}
table.box th{background:var(--yellow);color:var(--red);font-size:1.1em;padding:6px;border-bottom:3px solid var(--blue);text-align:left}
table.box td{padding:8px;vertical-align:top}
table.box.pink{border-color:var(--magenta);background:#fff0ff}
table.box.pink th{background:var(--magenta);color:var(--yellow);border-color:var(--magenta)}
table.box.cyan{border-color:#008080;background:#f0ffff}
table.box.cyan th{background:var(--cyan);color:var(--navy);border-color:#008080}
.photo{border:6px ridge var(--orange);background:#fff;padding:3px}
.caption{font-size:.8em;font-style:italic;text-align:center;margin:4px 0 10px}
.center{text-align:center}
.right{float:right;margin:0 0 10px 16px}
.left{float:left;margin:0 16px 10px 0}
.clear{clear:both}
.news-item{margin:0 0 14px;padding:0 0 10px;border-bottom:2px dashed var(--purple)}
.news-item .date{font-size:.8em;color:var(--purple);font-weight:700;font-family:"Courier New",monospace}
.news-item h3{margin:.2em 0;border:0}
.news-item img.new{vertical-align:middle;margin-left:6px}
ul.stars{list-style:none;padding-left:0}
ul.stars li{padding-left:24px;background:url("../img/sigma-spin.gif") no-repeat 0 0/18px 18px;margin:4px 0}
.notice{background:var(--yellow);border:4px dashed var(--red);padding:8px 12px;font-weight:700;margin:10px 0}
.quiet{background:#eee;border:2px inset #ccc;padding:6px;font-size:.85em}

/* ---- forms ---- */
input,select,textarea,button{font-family:inherit;font-size:1em}
input[type=text],input[type=email],input[type=tel],select,textarea{border:2px inset #808080;padding:4px;background:#fff;width:100%;box-sizing:border-box}
button,.btn{background:#c0c0c0;border:3px outset #fff;padding:4px 14px;font-weight:700;cursor:pointer;color:#000}
button:active{border-style:inset}
button.go{background:var(--lime);border-color:#80ff80;font-size:1.15em}
button.danger{background:var(--red);color:#fff;border-color:#ff8080}
label{font-weight:700}
form td{padding:4px}

/* ---- scheduler ---- */
.cal{width:100%;border-collapse:collapse;table-layout:fixed;margin:8px 0}
.cal th{background:var(--navy);color:var(--yellow);padding:4px;border:1px solid #000}
.cal td{border:1px solid #808080;height:52px;vertical-align:top;padding:3px;font-weight:700}
.cal td.day{background:#e0ffe0;cursor:pointer}
.cal td.day:hover{background:var(--yellow)}
.cal td.past{background:#ddd;color:#999}
.cal td.today{outline:3px solid var(--red);outline-offset:-3px}
.cal td.picked{background:var(--magenta);color:#fff}
.cal td .dot{display:block;font-size:.7em;font-weight:400;color:var(--red)}
.cal-nav{display:flex;justify-content:space-between;align-items:center;background:var(--cyan);padding:4px 8px;border:3px outset #80ffff}
.slots{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.slots button{min-width:100px}
.slots button.taken{background:#999;color:#444;text-decoration:line-through;cursor:not-allowed;border-style:inset}
.slots button.on{background:var(--magenta);color:#fff;border-style:inset}
.req{border:2px solid var(--blue);background:#f0f0ff;padding:6px 8px;margin:6px 0;display:flex;justify-content:space-between;align-items:center;gap:8px}

/* ---- gallery ---- */
.gallery{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.gallery figure{margin:0;width:230px;text-align:center}
.gallery img{border:5px ridge var(--magenta);background:#fff;padding:2px}
.gallery figcaption{font-size:.8em;font-style:italic}
.video{background:#000;color:var(--lime);width:100%;max-width:480px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;border:6px ridge #808080;margin:8px auto;font-family:"Courier New",monospace}

/* ---- sparkle cursor trail ---- */
.sparkle{position:fixed;pointer-events:none;font-size:14px;z-index:9999;animation:sparkle .7s linear forwards;color:var(--magenta)}
@keyframes sparkle{to{transform:translateY(24px) scale(.2);opacity:0}}

/* ---- mobile nav lives in the header; hidden on desktop ---- */
.mnav{display:none}

/* ---- small screens (sorry, it's 1999) ---- */
@media (max-width:640px){
  body{font-size:16px;padding-top:4px}
  table.frame,table.frame>tbody,table.frame>tbody>tr>td{display:block;width:auto!important}
  /* each row becomes a column; content goes above the sidebar junk */
  table.frame>tbody>tr{display:flex;flex-direction:column}
  td.content{order:1;padding:10px 12px 16px}
  td.sidebar{order:2;border-right:0;border-top:5px double var(--blue);padding:8px}
  td.header{padding:10px 6px 6px}
  td.header .tagline{font-size:1.05em;margin-top:2px}
  .wordart{font-size:2.6em;text-shadow:2px 2px 0 #000,4px 4px 0 var(--yellow)}
  .ticker marquee{font-size:13px}
  /* compact nav in the header */
  .mnav{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:8px 0 6px}
  .mnav a{flex:1 1 30%;background:var(--blue);color:var(--yellow)!important;text-decoration:none;font-weight:700;font-size:.9em;padding:5px 4px;border:3px outset #8080ff;text-align:center;white-space:nowrap}
  .mnav a:hover{background:var(--magenta);color:#fff!important;border-style:inset}
  /* the big sidebar nav is redundant on mobile */
  td.sidebar .nav{display:none}
  /* counter, clock, e-mail, buttons: a tidy row at the bottom */
  td.sidebar{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:8px}
  td.sidebar .sidebox{flex:1 1 40%;box-sizing:border-box;margin:0}
  td.sidebar .buttons{flex:1 1 100%;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
  td.sidebar .buttons br{display:none}
  td.sidebar > .center{flex:1 1 100%}
  h1{font-size:1.8em}
  .right,.left{float:none;margin:8px auto 4px;display:block;text-align:center}
  .right img,.left img{display:inline-block}
  .gallery figure{width:46%}
  .cal td{height:40px;font-size:.85em}
  .req{flex-direction:column;align-items:stretch}
}