/* ===== BASE ===== */
body {
  background-image: url("images/bg.gif"); /* pastel or lace bg */
  background-repeat: repeat;
  background-color: #FFF0ED;
  font-family: "MS PGothic", "Verdana", sans-serif;
  font-size: 12px;
  color: #6b4b3e; /* brown text */
}

/* ===== WRAPPER ===== */
#wrapper {
  width: 900px;
  margin: 25px auto;
}

/* ===== COLUMNS ===== */
#left, #center, #right {
  display: inline-block;
  vertical-align: top;
}

#left {
  width: 200px;
  text-align: center;
}

#center {
  width: 460px;
  text-align: center;
}

#right {
  width: 200px;
  text-align: center;
}

/* ===== LEFT COLUMN TITLE (OLD NICONICO / JP WEB STYLE) ===== */
.site-title {
  font-family: "MS PGothic", "MS Gothic", "Verdana", sans-serif;
  font-size: 20px;            /* small, authentic JP web size */
  font-weight: normal;        /* not bold */
  color: #6b4b3e;
  text-align: center;

  margin: 8px 0 6px 0;

  /* true text underline */
  text-decoration: underline;
  text-decoration-color: #c08cb3;

  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* Decorative symbols */
.site-title::before {
  content: "☆ ";
  color: #c08cb3;
}

.site-title::after {
  content: " ♪";
  color: #c08cb3;
}


/* ===== LEFT COLUMN ===== */
.since {
  font-size: 10px;
  color: #c08cb3; /* mauve */
  margin-bottom: 10px;
}

.widget {
  display: block;
  margin: 10px auto;
}

.update {
  font-size: 10px;
  margin-top: 15px;
  color: #6b4b3e;
}

/* ===== CENTER ===== */
.main-image {
  background: #fff7f9; /* cream */
  padding: 6px;
  box-shadow: 2px 2px 0 #c08cb3, 4px 4px 0 #6b4b3e; /* layered retro shadows */
}

.notes {
  font-size: 11px;
  margin-top: 10px;
  color: #6b4b3e;
}

.copyright {
  font-size: 10px;
  margin-top: 15px;
  color: #c08cb3;
}

/* ===== RIGHT COLUMN MENU - RETRO BOXED LINKS ===== */
.text-menu {
  text-align: center;  /* center the menu */
  margin-top: 15px;
}

/* Each row box */
.text-menu p {
  margin: 6px 0;             /* space between rows */
  padding: 0;                /* remove default padding */
  border-radius: 0px;        /* rounded corners */
  overflow: hidden;          /* clip hover backgrounds */
}

/* Make the link fill the row */
.text-menu p a {
  display: block;            /* fill parent <p> */
  padding: 6px 0;            /* vertical spacing inside row */
  color: #6b4b3e !important; /* brown text, override other rules */
  font-weight: bold;
  text-decoration: none !important; /* remove underline */
  border-radius: 0px;        /* match parent rounding */
  transition: 0.2s;          /* smooth hover */
}

/* Hover effect */
.text-menu p a:hover {
  background-color: #6b4b3e !important; /* brown background */
  color: #f6c1d1 !important;            /* pink text */
  cursor: pointer;
}

/* Different background colors per row */
.text-menu p:nth-child(1) a { background-color: #bdd6ff; }
.text-menu p:nth-child(2) a { background-color: #bdbeff; }
.text-menu p:nth-child(3) a { background-color: #ddbdff; }
.text-menu p:nth-child(4) a { background-color: #ffbdd3; }
.text-menu p:nth-child(5) a { background-color: #ffbdbd; }
.text-menu p:nth-child(6) a { background-color: #ffd1bd; }


/* ===== LINKS ===== */
a {
  color: #c08cb3;
  text-decoration: none;
}

a:hover {
  color: #f6c1d1;
  background-color: #6b4b3e;
}