/* sissytamika.com - authentic late-90s gallery styling */

body {
  margin: 0;
  padding: 18px 8px;
  font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
  color: #4a0033;
  background-color: #ffd9ec;
  background-image:
    repeating-linear-gradient(45deg, #ffe6f2 0 22px, #ffd1e8 22px 44px);
}

.frame {
  max-width: 900px;
  margin: 0 auto;
  background: #fff0f8;
  border: 6px ridge #ff66b3;
  border-radius: 4px;
  padding: 18px 22px 26px;
  box-shadow: 6px 6px 0 #cc3380;
}

.title {
  text-align: center;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 34px;
  color: #cc0066;
  text-shadow: 2px 2px 0 #ffb3d9, 3px 3px 0 #ff80bf;
  margin: 6px 0 14px;
}

.marquee {
  display: block;
  background: #cc0066;
  color: #fff0f8;
  border: 3px outset #ff99cc;
  padding: 6px 0;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 16px;
}

.intro {
  background: #ffe0f0;
  border: 2px dashed #ff66b3;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 4px;
}

.crumbs { font-size: 13px; margin: 0 0 8px; }
.crumbs a, .nav a, .footer a { color: #cc0066; }

/* ---- Web 1.0 personal homepage ---- */
.hero { text-align: center; margin: 4px 0 14px; }

.bigwelcome {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 36px;
  font-weight: bold;
  margin: 8px 0;
  background: linear-gradient(90deg, #ff0080, #ff66cc, #cc00ff, #ff0080);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  animation: huescroll 6s linear infinite;
}
@keyframes huescroll {
  to { background-position: 300% 0; }
}

.sparkle-row {
  font-size: 22px;
  letter-spacing: 6px;
  animation: twinkle 1.6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.94); }
}
.tagline { font-size: 16px; color: #cc0066; font-weight: bold; }

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

.aboutme {
  background: linear-gradient(160deg, #fff0f8, #ffe0f0);
  border: 3px double #ff66b3;
  border-radius: 10px;
  padding: 14px 20px;
  margin: 14px 0;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: inset 0 0 18px #ffd1e8;
}
.aboutme p { margin: 8px 0; }
.signoff {
  text-align: right;
  font-style: italic;
  font-family: "Brush Script MT", "Comic Sans MS", cursive;
  font-size: 20px;
  color: #cc0066;
}

.sectionhead {
  text-align: center;
  font-family: "Times New Roman", Georgia, serif;
  color: #cc0066;
  text-shadow: 1px 1px 0 #ffb3d9;
  margin: 18px 0 6px;
}

.bowdivider {
  text-align: center;
  font-size: 20px;
  letter-spacing: 6px;
  margin: 16px 0;
  animation: floaty 3s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.newtag {
  position: absolute;
  margin: -6px 0 0 -6px;
  background: #ff0000;
  color: #ffff00;
  font-weight: bold;
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid #fff;
  border-radius: 3px;
  transform: rotate(-12deg);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  animation: pulse 0.8s ease-in-out infinite;
  z-index: 2;
}
@keyframes pulse {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50% { transform: rotate(-12deg) scale(1.18); }
}
.folder-body { position: relative; }

.guestbook {
  text-align: center;
  margin: 22px 0 4px;
}
.gbtn {
  display: inline-block;
  margin: 4px 6px;
  padding: 8px 16px;
  background: linear-gradient(#ff80bf, #cc0066);
  color: #fff0f8;
  font-weight: bold;
  text-decoration: none;
  border: 2px outset #ff99cc;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #99004d;
}
.gbtn:hover { background: linear-gradient(#cc0066, #99004d); }

@media (prefers-reduced-motion: reduce) {
  .bigwelcome, .blink, .bowdivider, .newtag, .sparkle-row { animation: none; }
  .bigwelcome { color: #cc0066; -webkit-text-fill-color: #cc0066; }
}

/* ---- Home: folder directory ---- */
.folder-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  margin: 22px 0 8px;
}

.folder {
  display: block;
  width: 200px;
  text-decoration: none;
  color: #4a0033;
  transition: transform 0.1s ease;
}
.folder:hover { transform: translateY(-4px) scale(1.03); }

.folder-tab {
  width: 80px;
  height: 16px;
  margin-left: 10px;
  background: #ffcc00;
  border: 2px solid #d9a300;
  border-bottom: none;
  border-radius: 6px 10px 0 0;
}
.folder-body {
  background: #ffe066;
  border: 2px solid #d9a300;
  border-radius: 0 6px 6px 6px;
  padding: 10px;
  box-shadow: 3px 3px 0 #b38600;
}
.folder-body img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border: 3px ridge #fff;
}
.folder-label {
  margin-top: 8px;
  font-weight: bold;
  font-size: 15px;
  color: #663300;
  text-align: center;
}
.folder-count {
  font-size: 12px;
  text-align: center;
  color: #996600;
}
.locktag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #4a0033;
  color: #fff0f8;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  border: 2px outset #ff99cc;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #99004d;
  z-index: 2;
}
.folder-needs-unlock.is-locked .folder-body {
  background: repeating-linear-gradient(135deg, #e6d0dd 0 14px, #f4e4ed 14px 28px);
  border-color: #996699;
  box-shadow: 3px 3px 0 #7a5d72;
}
.folder-needs-unlock.is-locked .folder-tab {
  background: #d9bfd1;
  border-color: #996699;
}
.folder-needs-unlock.is-locked .folder-body img {
  filter: grayscale(0.45) blur(1px);
  opacity: 0.7;
}
.folder-needs-unlock.is-locked .folder-label,
.folder-needs-unlock.is-locked .folder-count {
  color: #6d4b65;
}
.teasegate {
  background: linear-gradient(180deg, #fff0f8, #ffe0f0);
  border: 3px double #ff66b3;
  border-radius: 10px;
  padding: 16px 20px 18px;
  margin: 24px auto 8px;
  max-width: 720px;
  box-shadow: inset 0 0 18px #ffd1e8;
}
.tease-copy,
.tease-fineprint {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  margin: 8px auto;
  max-width: 580px;
}
.tease-form {
  max-width: 580px;
  margin: 14px auto 0;
}
.tease-label {
  display: block;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.45;
}
.tease-input {
  margin-bottom: 10px;
  background: #fff8fc;
  border: 2px solid #e670ab;
  box-shadow: inset 0 1px 0 #fff;
}
.teasegate .gb-textarea {
  min-height: 110px;
}
.tease-submit {
  display: block;
  min-width: 290px;
  margin: 14px auto 0;
  background: linear-gradient(#b30059, #7a003d);
}
.tease-submit:hover {
  background: linear-gradient(#cc0066, #8f0047);
}
.teasegate.is-unlocked {
  border-color: #66aa66;
  box-shadow: inset 0 0 18px #d9f0d9;
}
.album-lock-screen {
  max-width: 620px;
  margin: 26px auto;
  background: linear-gradient(180deg, #fff0f8, #ffe0f0);
  border: 3px double #ff66b3;
  border-radius: 10px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: inset 0 0 18px #ffd1e8;
}
.album-lock-screen p {
  line-height: 1.55;
  margin: 10px 0;
}
.album-lock-screen .gbtn {
  margin-top: 12px;
}

/* ---- Album: picture grid ---- */
.pic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: 20px 0;
}
.pic {
  display: block;
  background: #fff;
  border: 4px ridge #ff80bf;
  padding: 6px;
  text-decoration: none;
  box-shadow: 3px 3px 0 #cc3380;
  transition: transform 0.1s ease;
}
.pic:hover { transform: scale(1.04); border-color: #cc0066; }
.pic img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
}
.pic-no {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #cc0066;
  font-weight: bold;
  margin-top: 4px;
}

.nav {
  text-align: center;
  margin-top: 18px;
  font-weight: bold;
}
.nav .disabled { color: #cc99b3; }

.rule { border: none; border-top: 3px dotted #ff66b3; margin: 22px 0 10px; }

.footer {
  text-align: center;
  font-size: 12px;
  color: #99004d;
}
.badge {
  background: #000;
  color: #00ff66;
  font-family: "Courier New", monospace;
  padding: 2px 6px;
  border: 1px solid #00ff66;
}
.counter {
  font-family: "Courier New", monospace;
  background: #000;
  color: #ff3366;
  padding: 1px 4px;
}

/* ---- Find Me Everywhere: link cards ---- */
.linksintro {
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  margin: 10px auto 18px;
  max-width: 620px;
}

.link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin: 22px 0 8px;
}

.linkcard {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 260px;
  padding: 12px 14px;
  text-decoration: none;
  color: #4a0033;
  background: linear-gradient(160deg, #fff0f8, #ffe0f0);
  border: 3px double #ff66b3;
  border-radius: 12px;
  box-shadow: 3px 3px 0 #cc3380;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.linkcard:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 5px 5px 0 #cc3380;
  background: linear-gradient(160deg, #ffe0f0, #ffd1e8);
}

.linkcard .ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #ffe066;
  border: 2px solid #d9a300;
  border-radius: 50%;
  box-shadow: 2px 2px 0 #b38600;
}
.linkcard .txt { text-align: left; }
.linkcard .name {
  font-weight: bold;
  font-size: 15px;
  color: #cc0066;
}
.linkcard .blurb {
  font-size: 12px;
  line-height: 1.4;
  color: #99004d;
}

.linkcat {
  text-align: center;
  font-family: "Times New Roman", Georgia, serif;
  color: #cc0066;
  text-shadow: 1px 1px 0 #ffb3d9;
  margin: 26px 0 4px;
  font-size: 20px;
}
.linkcat-note {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: #99004d;
  margin: 0 0 6px;
}

@media (max-width: 480px) {
  .title { font-size: 24px; }
  .pic img { width: 130px; height: 130px; }
  .linkcard { width: 88%; }
}

/* ---- Guestbook panel ---- */
.guestbook-panel {
  margin: 28px 0 8px;
  padding: 16px 18px;
  background: #ffe6f4;
  border: 3px double #ff66b3;
  border-radius: 6px;
}
.guestbook-note {
  text-align: center;
  font-size: 14px;
  margin: 0 0 12px;
}
.guestbook-form {
  max-width: 520px;
  margin: 0 auto 16px;
}
.gb-label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  margin: 8px 0 4px;
  color: #99004d;
}
.gb-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 2px inset #ff99cc;
  border-radius: 4px;
  background: #fff;
  color: #4a0033;
}
.gb-textarea { resize: vertical; min-height: 90px; }
.gb-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.gb-submit {
  display: block;
  margin: 14px auto 0;
  padding: 10px 22px;
  font-weight: bold;
  font-family: inherit;
  font-size: 15px;
  color: #fff0f8;
  background: linear-gradient(#ff80bf, #cc0066);
  border: 2px outset #ff99cc;
  border-radius: 6px;
  cursor: pointer;
}
.gb-submit:hover { background: linear-gradient(#cc0066, #99004d); }
.guestbook-status {
  text-align: center;
  font-size: 13px;
  min-height: 1.2em;
  margin: 10px 0 0;
}
.guestbook-status.ok { color: #006633; font-weight: bold; }
.guestbook-status.err { color: #cc0000; font-weight: bold; }
.guestbook-entries { max-width: 620px; margin: 0 auto; }
.guestbook-empty {
  text-align: center;
  font-style: italic;
  color: #99004d;
}
.guestbook-entry {
  background: #fff;
  border: 2px ridge #ff80bf;
  padding: 10px 12px;
  margin: 10px 0;
  box-shadow: 2px 2px 0 #cc3380;
}
.gb-entry-head { margin: 0 0 6px; font-size: 13px; }
.gb-entry-date { color: #996600; font-size: 12px; }
.gb-entry-msg { margin: 0; line-height: 1.5; font-size: 14px; }

/* ---- Movies / video tiles ---- */
.folder-tab-movies { background: #ff99cc; border-color: #cc0066; }
.folder-movies .folder-body { background: #ffd1e8; border-color: #cc0066; }
.pic-video video {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
  background: #000;
}

/* ---- Diary / posts feed ---- */
.post-list { max-width: 680px; margin: 0 auto; }
.post-card {
  background: #fff;
  border: 3px ridge #ff80bf;
  padding: 14px 16px;
  margin: 16px 0;
  box-shadow: 3px 3px 0 #cc3380;
}
.post-title {
  margin: 0 0 6px;
  color: #cc0066;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 20px;
}
.post-date {
  margin: 0 0 10px;
  font-size: 12px;
  color: #996600;
}
.post-body {
  line-height: 1.55;
  font-size: 14px;
  margin-bottom: 8px;
}
.post-source {
  font-size: 12px;
  margin: 0;
  color: #99004d;
}
.post-source a { color: #cc0066; }