body { background-color: #002; color: #45a; font-family: Arial, Helvetica, sans-serif; font-size: 1.12em; }
a { outline: none; text-decoration: none; }
p { text-align: center; padding: 0 30%; line-height: 1.25em; }
.lighter { color: #56b; }
.lightest { color: #67F; }
.textlink { color: #090; }
.textlink:hover { color: #6c6; text-decoration: underline; }

.storywindow { color: #999; padding: 0; font-size: 1em; line-height: 1.5em }
.storywindow main { margin: 0 auto; text-align: center; }
.storywindow main p:first-child { color: #ccc; margin: 0 auto; padding: 1em 0 3em; width: 88%; }
.storywindow dd { margin: 0 0 1em; }

.storytiles { display: flex; justify-content: center; }
.storytiles figure { margin: .5em 1% 0; }
.storytiles figure figcaption { opacity: 0; transition: all .5s; }
.storytiles figure:hover figcaption { opacity: 1; }

@media (min-width: 600px) {
  .storywindow main { max-width: 800px; }
}


/* ================= WINDOW FRAME ANIMATION ================= */
/* styles and perspective context on container 'window frame' */
.perspective {
  width: 175px;
  height: 175px;
  border: 1px solid #666;
  position: relative;
  margin: 30px auto 0;
  perspective: 200px;
}
/* styles and rotation transform on 'window' */
.perspective a {
  position: absolute;
  width: 173px;
  height: 173px;
  text-decoration: none;
  border: 1px solid rgba(120,120,120,0.6);
  background: rgba(255, 255, 255, .3);
  transition: all .6s;
}
.perspective a img {
  transition: all .6s;
}
.perspective a img:hover {
  opacity: .6
}
/* hover transform on 'window' */
.perspective a:hover {
  transform: rotateX(20deg);
  background: rgba(255, 255, 255, .1);
}