body{
   font-size:100%
}

/* Smart phones (portrait and landscape) */
@media only screen and (max-width: 480px){
    body{
       color:#444;
    }
}

/* All other devices over smart phone landscape*/
@media only screen and (min-width: 481px){
    body{
       width:80%;
       margin:0 auto;
       color:#444;
    }
    
    h1,h2,h3,h4{
        text-shadow: 0.5px 0.5px 0.5px #777;
    }

}

/* For print only */
@media only print{

    body{
       background:#fff;
       color:#000
    }
    figure{
      border-top: 1pt #000 solid;
      border-bottom: 1pt #000 solid;
      padding: 5pt;
      text-align:center;
      margin:0 auto;
    }
    
    pre{
    orphans:10;
    font-size:0.8em;
    color:#c00;
    font-family:Courier, monospace;
    border-top: 1px #000 solid;
    border-bottom: 1px #000 solid;
    padding:1em;
    white-space: pre;
    overflow:auto
    }
}

/* For screen only */
@media only screen{
    figure{
      border: 1px #0a0 solid;
      padding: 5px;
      min-width:381px;
      max-width:400px;
      text-align:center;
      margin-left:0;
    }

    pre{
    font-size:0.8em;
    color:#c00;
    font-family:Courier, monospace;
    border: 1px #000 solid;
    padding:1em;
    background:#ddd;
    white-space: pre;
    overflow:auto
    } 
}

figure{
 /*transform:rotate(5deg);*/
}

figure img{
  margin-bottom: 0.5em;
}

figcaption{
  font-style: italic;
  color:#0a0;
  border-top: 1px #0a0 solid;
  padding:1em;
}

p, footer{
font-family: "Noto Sans",Arial,Helvetica,sans-serif;
font-size: 1.1em;
line-height:1.6em;
margin-top: 1em;
}

h1,h2,h3{
font-family: "Noto Serif","Times New Roman",serif;
}

h1{
   font-size: 1.9em;
   text-transform:uppercase;

}

h2{
  font-size:1.5em;
  /*transform:rotate(5deg);*/
  /*transform:skew(-20deg);*/
}

h3{
 font-size:1em;
}

.comment{
  color:#006600
}

.markup{
  color:#000066
}

.css{
  color:#060;
}

footer{
  border-top: 1px solid #000
}

footer ul{
  margin-top: 1em;
  padding-left:0
}

footer li{
  list-style-type:none;

}

footer a{
  display:block;
  color: #444;
}

table{
 border: 2px solid #600;
 border-spacing: 0;
 border-collapse: collapse;
}

td,th{
 padding: 1em;
 border: 1px solid #600;
}

table caption{
   border: 2px solid #600;
   padding:1em;
   background: #cc0
}

td
{
 text-align:center
}

blockquote{
  /*color:#888;*/
  font-style:italic;
  background:#fdf;
  padding:0.5em 1em;
}

nav{
  width:50%;
  min-width:380px;

}

nav.home ul{
  padding:0;
  margin:0;
}

nav.home li{
 list-style-type: none;
}

nav.home a{
  display:block;
  font-family:sans-serif;
  font-size:1.5em;
  text-decoration:none;
  background: #dd0;
  color: #ddd;
  padding:1em;
  margin: 0 0.5em 2em 0;
  border-radius: 10px;
  text-align:center;
  background: linear-gradient(to bottom,  #a90329 0%,#8f0222 48%,#6d0019 100%); /* W3C */
}

nav.home a:hover{
 color:#fff;
 background:#000;
}
.left{
 transform:rotate(7deg)
}

.right{
 transform:rotate(-7deg)
}

body.home{
background: linear-gradient(to bottom, #002400 0%, #b4ddb4 100%); /* FF3.6+ */
background-attachment: fixed;
width:380px;
margin: 0 auto;
}

.home h1{
  margin:0 0 2em 0;
  text-align:center;
}

.book{
  background:#ddd;
  padding: 1em;
}