body {
  background: url('graphics/bg-pastelstars.gif');
  font-family: "Comic Sans MS", "Verdana", sans-serif;
  color: #5a005a;
  margin: 0;
}

/* PAGE WRAPPER */
#page {
  width: 1050px;
  margin: 0 auto;
}

/* BANNER */
#banner img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}

#banner img {
  width: 600px;   /* make smaller */
  display: block;
  margin: 0 auto; /* keeps it centered */
}


/* TOP BUTTON DIRECTORY */
#top-buttons {
  text-align: center;
  margin-bottom: 15px;
}

#top-buttons img {
  margin: 0 5px;
  border: 2px solid #ffbaff;
  border-radius: 6px;
}

/* LAYOUT */
#layout {
  display: flex;
  gap: 20px;
}

/* SIDEBAR */
#sidebar {
  width: 220px;
  background: rgba(255, 220, 255, 0.75);
  border: 3px dashed #ff9dfc;
  padding: 15px;
  text-align: center;
  border-radius: 15px;
  box-shadow: 0 0 10px #ffbaff;
}

#sidebar a {
  display: block;
  margin: 8px 0;
  padding: 6px;
  background: #ffd6ff;
  border: 2px solid #ffbaff;
  border-radius: 8px;
  text-decoration: none;
  color: #5a005a;
  font-weight: bold;
}

#sidebar a:hover {
  background: #fff0ff;
  box-shadow: 0 0 5px #fff;
}

.decor {
  width: 100%;
  margin: 5px 0;
}

.divider {
  width: 100%;
  margin: 10px 0;
}

/* MAIN CONTENT */
#content {
  flex: 1;
  background: rgba(255, 240, 255, 0.85);
  border: 3px solid #ffbaff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 0 10px #ffbaff;
}

#content h1 {
  text-align: center;
  color: #ff7bff;
  text-shadow: 0 0 5px #ffbaff;
}

/* BLOG */
#blog .post {
  background: #ffe6ff;
  border: 2px solid #ffbaff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

#blog .date {
  font-size: 12px;
  color: #7a007a;
}

/* LISTS */
.cute-list li {
  margin: 5px 0;
  padding-left: 20px;
  background: url('graphics/star-bullet.gif') no-repeat left center;
}