/* ============================================================
   Franceen Willowa's Home Page on the World Wide Web
   Hand-coded in Notepad with love, 1998 (spiritually)
   ============================================================ */

body {
  /* tiled floral wallpaper, just like Grandma's parlor */
  background-color: #008080;
  background-image: url("img/tile-floral.svg");
  background-repeat: repeat;
  color: #000080;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive;
  font-size: 16px;
  margin: 0;
  padding: 12px;
  text-align: center;
}

/* The main "page" sits in a beveled table-like box */
.page {
  width: 760px;
  margin: 0 auto;
  background-color: #ffffcc;
  border: 6px ridge #ff66cc;
  padding: 16px;
  text-align: left;
  box-shadow: 8px 8px 0 #800080;
}

/* ---------- Headings & text ---------- */
h1 {
  font-family: "Comic Sans MS", cursive;
  text-align: center;
  color: #ff00ff;
  text-shadow: 2px 2px 0 #ffff00, 4px 4px 0 #00ffff;
  font-size: 38px;
  margin: 6px 0;
}

h2 {
  color: #cc0000;
  font-family: "Times New Roman", serif;
  border-bottom: 3px dashed #ff9900;
  text-align: center;
}

h3 { color: #006600; }

a { color: #0000ff; font-weight: bold; }
a:visited { color: #800080; }
a:hover { color: #ff0000; background-color: #ffff00; }

p { line-height: 1.5; }

/* ---------- Marquee fallback / scroller ---------- */
.marquee {
  background-color: #000000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 4px;
  border: 2px inset #c0c0c0;
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Blink (because <blink> is dead, long live <blink>) ---------- */
.blink { animation: blinker 1s steps(2, start) infinite; }
@keyframes blinker { to { visibility: hidden; } }

/* ---------- Rainbow text ---------- */
.rainbow {
  background-image: linear-gradient(90deg,
    #ff0000,#ff9900,#ffff00,#00cc00,#0099ff,#6633ff,#ff00ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
}

/* ---------- Rainbow horizontal rule ---------- */
.rainbow-hr {
  height: 8px;
  border: 0;
  background-image: linear-gradient(90deg,
    #ff0000,#ff9900,#ffff00,#00cc00,#0099ff,#6633ff,#ff00ff,
    #6633ff,#0099ff,#00cc00,#ffff00,#ff9900,#ff0000);
  background-size: 200% 100%;
  animation: slidehr 3s linear infinite;
  margin: 14px 0;
}
@keyframes slidehr { to { background-position: 200% 0; } }

/* ---------- Navigation buttons ---------- */
.nav {
  text-align: center;
  margin: 10px 0;
}
.nav a {
  display: inline-block;
  background-color: #c0c0c0;
  border: 3px outset #ffffff;
  color: #000080 !important;
  padding: 4px 10px;
  margin: 3px;
  text-decoration: none;
  font-family: "Comic Sans MS", cursive;
}
.nav a:hover {
  border-style: inset;
  background-color: #ffff66;
}

/* ---------- "Under construction" + counter row ---------- */
.center { text-align: center; }

.counter {
  display: inline-block;
  background-color: #000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 22px;
  letter-spacing: 4px;
  padding: 4px 8px;
  border: 3px inset #555;
}

/* ---------- The spinning construction sign ---------- */
.spin { display: inline-block; animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Guestbook entries ---------- */
.entry {
  background-color: #ffffff;
  border: 2px groove #ff66cc;
  padding: 8px;
  margin: 8px 0;
}
.entry .who { color: #cc0000; font-weight: bold; }
.entry .when { color: #888; font-size: 12px; }

/* ---------- Webring box ---------- */
.webring {
  background-color: #000080;
  color: #ffff00;
  border: 4px double #ffff00;
  padding: 10px;
  text-align: center;
  font-family: "Times New Roman", serif;
}
.webring a { color: #00ffff; }

/* ---------- Recipe cards ---------- */
.recipe {
  background-color: #fff0f5;
  border: 2px dashed #cc0066;
  padding: 10px;
  margin: 12px 0;
}

/* ---------- Footer ---------- */
.footer {
  text-align: center;
  font-size: 12px;
  color: #444;
  margin-top: 10px;
}

/* ---------- Photo frames ---------- */
.polaroid {
  display: inline-block;
  background: #fff;
  border: 1px solid #999;
  padding: 8px 8px 28px 8px;
  margin: 10px;
  box-shadow: 3px 3px 6px rgba(0,0,0,.4);
  transform: rotate(-3deg);
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 13px;
  color: #333;
  vertical-align: top;
}
.polaroid:nth-child(even) { transform: rotate(2deg); }
.polaroid img { display: block; width: 180px; height: 140px; }

img.gif { vertical-align: middle; }