/* ============================================================
   aurora moreno's corner of the web !!
   style.css -- hand-coded by aurora, do NOT steal my css lol
   (jk take whatever u want, that's the geocities way)
   last updated: whenever i felt like it
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Caveat:wght@500;700&family=Comic+Neue:wght@400;700&display=swap');

:root{
  --hot-pink:   #ec1c8d;
  --deep-pink:  #b30e6b;
  --mid-pink:   #ff6fc4;
  --light-pink: #ffb3e0;
  --pale-pink:  #ffe3f4;
  --bg-pink:    #fff5fb;
  --teal:       #3fd4e6;
  --deep-teal:  #0f8fa3;
  --pale-teal:  #d3f7fb;
  --gold:       #ffd23f;
  --plum:       #5c0d3f;
  --purple:     #8a2be2;
  --shadow-pink: #7a0a49;
}

/* -----------------------------------------------------------
   reset-ish (but keep it old-web chunky, not flat/modern)
------------------------------------------------------------ */
*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  padding: 18px;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
  color: var(--plum);
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--bg-pink);
  background-image:
    radial-gradient(var(--light-pink) 1.6px, transparent 1.8px),
    radial-gradient(var(--pale-teal) 1.6px, transparent 1.8px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHRleHQgeT0iMTgiIGZvbnQtc2l6ZT0iMTgiPuKcqDwvdGV4dD48L3N2Zz4=') 8 8, auto;
}

a{ cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHRleHQgeT0iMTgiIGZvbnQtc2l6ZT0iMTgiPvCfkpY8L3RleHQ+PC9zdmc+') 8 8, pointer; }

/* scrollbar glamour (webkit only, progressive enhancement) */
::-webkit-scrollbar{ width: 18px; }
::-webkit-scrollbar-track{ background: var(--pale-pink); border-left: 3px dashed var(--hot-pink); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--hot-pink), var(--teal)); border-radius: 0; border: 3px solid var(--bg-pink); }

::selection{ background: var(--hot-pink); color: #fff; }

/* -----------------------------------------------------------
   page frame -- everything sits in one big chunky table-ish box
------------------------------------------------------------ */
.page-wrap{
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 6px double var(--hot-pink);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--teal), 10px 10px 0 rgba(179,14,107,0.25);
  padding: 0;
}

/* top marquee ticker bar */
.ticker-bar{
  background: repeating-linear-gradient(45deg, var(--hot-pink) 0 14px, var(--deep-pink) 14px 28px);
  color: #fff;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 4px solid var(--plum);
  text-shadow: 1px 1px 0 var(--plum);
}
.ticker-bar marquee{ font-size: 15px; letter-spacing: 0.5px; }

/* header / banner area */
.site-banner{
  position: relative;
  text-align: center;
  padding: 28px 20px 20px;
  background:
    radial-gradient(ellipse at center, var(--teal) 0%, var(--deep-teal) 70%);
  background-image:
    repeating-conic-gradient(from 0deg, var(--hot-pink) 0deg 8deg, transparent 8deg 20deg);
  background-blend-mode: normal;
  overflow: hidden;
  border-bottom: 6px solid var(--hot-pink);
}
.site-banner::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(63,212,230,0.55) 0%, rgba(15,143,163,0.85) 65%, rgba(15,143,163,0.95) 100%);
}
.site-banner-inner{ position: relative; z-index: 2; }

.site-title{
  font-family: 'Baloo 2', cursive;
  font-size: 3.2em;
  margin: 0;
  color: #fff;
  -webkit-text-stroke: 2px var(--hot-pink);
  text-shadow:
    0 0 8px var(--hot-pink),
    3px 3px 0 var(--deep-pink),
    0 0 26px #fff;
  letter-spacing: 1px;
}
.site-subtitle{
  font-family: 'Caveat', cursive;
  font-size: 1.7em;
  color: var(--pale-pink);
  margin: 6px 0 0;
  text-shadow: 1px 1px 3px var(--plum);
}

/* spinny star decorations */
.star-spin{
  display:inline-block;
  animation: spin 3.5s linear infinite;
}
@keyframes spin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

.wiggle{ display:inline-block; animation: wiggle 1.6s ease-in-out infinite; }
@keyframes wiggle{ 0%,100%{ transform: rotate(-6deg);} 50%{ transform: rotate(6deg);} }

.bounce{ display:inline-block; animation: bounce 1.2s ease-in-out infinite; }
@keyframes bounce{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }

/* -----------------------------------------------------------
   nav -- looks like a table of buttons, is actually a flexbox
------------------------------------------------------------ */
.nav-table{
  display:flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--plum);
  border-bottom: 4px solid var(--hot-pink);
}
.nav-table a{
  flex: 1 1 auto;
  text-align:center;
  padding: 10px 6px;
  color: #fff;
  text-decoration:none;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 0.95em;
  border-right: 2px dashed var(--mid-pink);
  background: linear-gradient(180deg, var(--hot-pink), var(--deep-pink));
  text-shadow: 1px 1px 0 var(--shadow-pink);
}
.nav-table a:last-child{ border-right:none; }
.nav-table a:hover{
  background: linear-gradient(180deg, var(--teal), var(--deep-teal));
  color:#fff;
}
.nav-table a.current{
  background: repeating-linear-gradient(45deg, var(--gold), var(--gold) 6px, #ffe985 6px 12px);
  color: var(--plum);
  text-shadow:none;
}

/* -----------------------------------------------------------
   content layout: sidebar + main (old skool 2-col table feel)
------------------------------------------------------------ */
.layout{
  display:flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.sidebar{
  flex: 0 0 220px;
  background: var(--pale-pink);
  border-right: 4px double var(--hot-pink);
  padding: 16px 14px;
}
.main-col{
  flex: 1 1 420px;
  padding: 20px 26px;
  min-width: 280px;
}

.sidebar h3{
  font-family:'Baloo 2', cursive;
  color: var(--hot-pink);
  border-bottom: 2px dotted var(--deep-teal);
  padding-bottom: 4px;
}

/* polaroid-ish photo frame */
.polaroid{
  background:#fff;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
  padding: 8px 8px 22px;
  width: 160px;
  margin: 10px auto;
  transform: rotate(-4deg);
  font-family:'Caveat', cursive;
  text-align:center;
  font-size: 1.1em;
  color: var(--plum);
}
.polaroid img{ width:100%; display:block; }

/* -----------------------------------------------------------
   typography
------------------------------------------------------------ */
h1,h2,h3,h4{ font-family:'Baloo 2', cursive; color: var(--hot-pink); }
h2{
  border-bottom: 3px solid var(--teal);
  padding-bottom: 4px;
  display:inline-block;
}
h1 .glow, h2 .glow{ text-shadow: 0 0 8px var(--mid-pink); }

.script{ font-family:'Caveat', cursive; font-size:1.3em; color: var(--deep-teal); }

blockquote{
  border-left: 5px solid var(--teal);
  background: var(--pale-teal);
  margin: 14px 0;
  padding: 10px 16px;
  font-family:'Caveat', cursive;
  font-size: 1.25em;
  color: var(--plum);
}

hr.divider{
  border:none;
  height: 10px;
  margin: 22px 0;
  background: repeating-linear-gradient(-45deg, var(--hot-pink) 0 10px, var(--teal) 10px 20px);
  border-radius: 6px;
}

hr.stitch{
  border:none;
  border-top: 3px dashed var(--hot-pink);
  margin: 20px 0;
}

a{ color: var(--hot-pink); font-weight:700; }
a:visited{ color: var(--purple); }
a:hover{ color: var(--deep-teal); text-decoration: wavy underline; }

ul.starlist{ list-style: none; padding-left: 4px; }
ul.starlist li::before{ content: "\2726  "; color: var(--hot-pink); }

ul.heartlist{ list-style:none; padding-left: 4px; }
ul.heartlist li::before{ content: "\2665  "; color: var(--deep-teal); }

/* -----------------------------------------------------------
   badges / stamps / blinkies row
------------------------------------------------------------ */
.blinkie-row{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content:center;
  padding: 14px;
  background: var(--plum);
  border-top: 4px double var(--hot-pink);
}
.blinkie{
  width: 88px;
  height: 31px;
  background: #000;
  color: var(--gold);
  font-family: 'Baloo 2', cursive;
  font-size: 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border: 1px solid var(--teal);
  line-height:1.1;
  padding: 2px;
}
.blinkie.pink{ background: var(--hot-pink); color:#fff; }
.blinkie.teal{ background: var(--deep-teal); color:#fff; }

.blink{ animation: blinker 1s step-start infinite; }
@keyframes blinker{ 50%{ opacity:0; } }

.rainbow-text{
  background: linear-gradient(90deg,#ff5a8c,#ff9d5a,#ffe45a,#7de07d,#5ad3ff,#b98bff,#ff5a8c);
  background-size: 300% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: rainbow-move 5s linear infinite;
  font-weight:700;
}
@keyframes rainbow-move{ to{ background-position: 300% center; } }

/* under-construction stripe banner */
.construction{
  background: repeating-linear-gradient(45deg, var(--gold) 0 16px, #2a2a2a 16px 32px);
  color:#2a2a2a;
  text-align:center;
  font-family:'Baloo 2', cursive;
  font-weight:800;
  padding: 8px;
  border-top: 3px solid #2a2a2a;
  border-bottom: 3px solid #2a2a2a;
}
.construction span{
  background:#fff;
  padding: 2px 10px;
  border: 2px dashed var(--hot-pink);
}

/* hit counter, old odometer style */
.hit-counter{
  display:inline-flex;
  background:#111;
  padding: 6px 8px;
  border: 3px solid var(--hot-pink);
  gap: 3px;
  font-family: 'Courier New', monospace;
}
.hit-counter span{
  background: var(--gold);
  color:#111;
  font-weight:700;
  width: 18px;
  text-align:center;
  border-radius: 2px;
}

/* guestbook entry cards */
.gb-entry{
  border: 3px solid var(--teal);
  background: var(--pale-pink);
  border-radius: 0 16px 0 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  position: relative;
}
.gb-entry::before{
  content: "\2726";
  position:absolute;
  top:-14px; left:-14px;
  background: var(--hot-pink);
  color:#fff;
  border-radius:50%;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid #fff;
}
.gb-name{ font-family:'Baloo 2', cursive; color: var(--hot-pink); }
.gb-date{ font-size:0.8em; color: var(--deep-teal); float:right; }

/* buttons */
.button-88x31{
  display:inline-block;
  width: auto;
  padding: 6px 14px;
  background: linear-gradient(180deg, var(--mid-pink), var(--hot-pink));
  color:#fff !important;
  text-decoration:none;
  border: 2px outset var(--light-pink);
  font-family:'Baloo 2', cursive;
  font-weight:700;
  font-size: 0.85em;
  text-shadow: 1px 1px 0 var(--shadow-pink);
}
.button-88x31:hover{ background: linear-gradient(180deg, var(--teal), var(--deep-teal)); }

/* footer */
.site-footer{
  text-align:center;
  font-size: 0.8em;
  color: var(--plum);
  padding: 16px;
  background: var(--pale-teal);
  border-top: 4px double var(--hot-pink);
}

/* fun little tables (used for favorites lists etc, real <table> tags) */
table.retro{
  border-collapse: collapse;
  width:100%;
  margin: 14px 0;
}
table.retro caption{
  font-family:'Baloo 2', cursive;
  color: var(--hot-pink);
  text-align:left;
  padding-bottom:4px;
}
table.retro th, table.retro td{
  border: 2px solid var(--hot-pink);
  padding: 8px 10px;
  text-align:left;
}
table.retro th{
  background: var(--hot-pink);
  color:#fff;
  font-family:'Baloo 2', cursive;
}
table.retro tr:nth-child(even) td{ background: var(--pale-pink); }
table.retro tr:nth-child(odd) td{ background:#fff; }

/* webring badge box */
.webring-box{
  border: 3px ridge var(--deep-teal);
  background: var(--pale-teal);
  padding: 12px;
  text-align:center;
  margin: 16px 0;
  font-family:'Baloo 2', cursive;
}

/* small responsive love for phones, still keep the chaos */
@media (max-width: 640px){
  .site-title{ font-size: 2.1em; }
  .layout{ flex-direction: column; }
  .sidebar{ border-right:none; border-bottom: 4px double var(--hot-pink); flex-basis:auto; width:100%; }
}