@font-face {
  font-family: 'WillowBody';
  src: url('WillowBody.eot?#iefix') format('embedded-opentype'), url('WillowBody.woff') format('woff'), url('WillowBody.ttf') format('truetype'), url('WillowBody.svg#WillowBody') format('svg');
  font-weight: normal;
  font-style: normal;
}

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  max-width: 900px;
  margin: 0 auto;
  color: #222;
  font: 16px/24px 'Open Sans',sans-serif;
  background: linear-gradient(to bottom, #ddd, #aaa);
  text-align: center;
}

a {
  color: #06f;
}

canvas {
  margin: 16px 0;
  box-shadow: 0 0 1px #999;
}

code {
  background: #fd2;
  border-radius: 3px;
  padding: 2px 4px;
  font-weight: bold;
}

h3 {
  font-family: 'WillowBody','Open Sans',sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
}

p {
  margin: 0 0 16px;
  padding: 0 16px;
}

.story {
  margin: 0 16px 16px;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 1px #999;
  text-align: justify;
}

#ascii {
  font: 15px/17px 'Courier New';
}

#ascii .w {
  opacity: 0;
}

#gravatar {
  width: 140px;
  border-radius: 80px;
}

#tini_yt {
  height: 0;
  overflow: hidden;
}

@media only screen and (max-width: 466px)
{
  #ascii {
    font: 9px/11px 'Courier New';
  }

  .story {
    margin:0 0 15px;
    border-radius:15px;
  }
}