/* RESET */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Comic Neue", cursive;
  background-color: #f5e9ff;
  background-image: url("images/bg.png");
  background-repeat: repeat;
  color: #555;
}

/* MAIN BOX */
.container {
  width: 800px;
  margin: 40px auto;
  background: #fff0f8;
  border: 3px dotted #ff9ecb;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 0 20px rgba(255, 182, 218, 0.6);
}

/* HEADER */
.header {
  text-align: center;
  padding: 20px;
  background: #ffe0ef;
  border-radius: 15px;
  margin-bottom: 20px;
}

.header h1 {
  font-family: "Press Start 2P", cursive;
  font-size: 26px;
  color: #ff69b4;
}

.header p {
  font-size: 14px;
}

/* MENU */
.menu {
  text-align: center;
  margin-bottom: 20px;
}

.menu a {
  display: inline-block;
  margin: 5px;
  padding: 6px 12px;
  background: #ffb6d9;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  border: 2px solid #ff69b4;
  font-size: 14px;
}

.menu a:hover {
  background: #ff69b4;
}

/* CONTENT */
.content {
  padding: 10px;
}

.post {
  background: #fff;
  border: 2px dashed #ffc1dd;
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 20px;
}

.post h2 {
  color: #ff69b4;
}

.date {
  font-size: 12px;
  color: #999;
}

/* FOOTER */
.footer {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 20px;
}
body {
  background: url("images/bg.png") repeat;
  font-family: "Comic Neue", cursive;
  color: #555;
}

.container {
  width: 760px;
  margin: 40px auto;
  background: #fff0f8;
  border: 4px dotted #ff8ec7;
  padding: 20px;
}

/* sparkle gif */
.sparkle {
  position: fixed;
  top: 20px;
}
.sparkle.left { left: 20px; }
.sparkle.right { right: 20px; }

/* header */
.header {
  text-align: center;
}
.header h1 {
  font-family: "Press Start 2P";
  font-size: 22px;
  color: hotpink;
}

/* PIXEL MENU */
.pixel-menu {
  text-align: center;
  margin: 20px 0;
}

.pixel-menu a {
  display: inline-block;
  padding: 10px 14px;
  margin: 5px;
  background: #ffb3d9;
  border: 3px solid #ff69b4;
  color: white;
  font-family: "Press Start 2P";
  font-size: 10px;
  text-decoration: none;
  box-shadow: 4px 4px #ff69b4;
}

.pixel-menu a:hover {
  transform: translate(2px,2px);
  box-shadow: 2px 2px #ff69b4;
}

/* post */
.post {
  background: white;
  border: 2px dashed pink;
  padding: 15px;
  margin-bottom: 20px;
}

/* footer */
.footer {
  text-align: center;
  font-size: 12px;
}
.blink {
  animation: blink 1s steps(1) infinite;
  color: hotpink;
  font-weight: bold;
}

@keyframes blink {
  50% { opacity: 0; }
}
.shrine {
  border: 2px dashed #ffb6d9;
  padding: 10px;
  margin-bottom: 15px;
}