/* FONT BASE */
body {
  font-family: 'MS Gothic', 'ms pgothic', sans-serif;
  background-color: #f4f1f5; /* pale lavender */
  color: #3c3c3c; /* charcoal for softness */
}

/* SIDEBAR BACKGROUND */
.side {
  background-image: url("/* your cute plaid or lace bg here */");
  background-size: 200px;
  height: 200px;
  border-right: 1px solid #d5c6d5;
}

/* HEADER */
.header {
  background-image: url("/* your soft spooky header image here */");
  background-color: #f5e7f0;
  border-bottom: 1px solid #d8bfd8;
}

/* MAIN TEXT SHADOWS + COLOR */
.text {
  font-family: 'MS Gothic', 'ms pgothic', sans-serif;
  font-size: 6em;
  text-align: center;
  color: #a08aaa;
  text-shadow: 0 0 10px #fff4f7;
  filter: drop-shadow(0px 0px 2px #fff4f7);
}

/* NAVIGATION BAR LINKS */
#nav > div {
  background: #f4eaf4;
  color: #5c4c5c;
  border-bottom: 1px solid #dac1e3;
  font-family: 'MS Gothic';
  text-shadow: 0 0 5px #fff4f7;
}

/* NAV LINKS */
#nav a {
  color: #937b9d;
  text-decoration: none;
}

#nav a:hover {
  color: #b497bc;
}

/* DROPDOWN MENU */
.dropdown-content {
  background-color: #ead9eb;
  border: 1px solid #c4abc8;
  font-family: 'MS Gothic';
  color: #5c4c5c;
}

/* DROPDOWN LINKS */
.dropdown-content li a {
  color: #6a5b6f;
}

.dropdown span:hover {
  color: #b497bc;
}

/* BAR + UPDATE BOX */
.bar {
  background-color: #f3dff1;
  border-bottom: 1px solid #d4b2d4;
}

.update {
  background-color: #f9f3fa;
  color: #5e5564;
  border: 1px solid #e3d4e3;
}

/* FOOTER */
#foot {
  background-color: #f0e0f5;
  color: #856a8b;
  text-shadow: 0 0 5px #fff4f7;
}
.blinkie-box {
  width: fit-content;
  max-width: 180px; /* 3 blinkies wide */
  margin: 0 auto;
  padding: 10px;
  background-color: #fff0ff;
  border: 2px dashed #cc99cc;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.blinkie-box img {
  width: 150px;
  height: 20px;
  display: inline-block;
}

#statuscafe {
  padding: .5em;
  background-color: #eef3eb;
  border: 1px solid #b0c199;
  text-align: left;
  height: 80px;
  border-radius: 4px;
  color: #6a755d;
  font-size: 12px;
  width:143px;
  vertical-align: top;
  display: inline-block;
}

#statuscafe-username {
  margin-bottom: .5em;
  color: #aac08d;
  font-family: ms pgothic;
}

#statuscafe-content {
  margin: 0 1em 0.5em 1em;
  font-family: ms pgothic;
}


/* PLACEHOLDER IMAGES */
#intro {
  background-image: url("/* your pastel intro background */");
}

.lace {
  background-image: url("/* lace overlay */"), url("/* soft background fill */");
}

#tv {
  background-image: url("/* goth dot bg */");
}