html, body {  width: 100%; height: 100%; }
  body {  html, body {  width: 100%; height: 100%; }
  body {
  
      color: #222;  font-size: 36px;
      padding-top: 200px;
    overflow-x:hidden;
    font-family: Amaranth;
  
  background-color: hsl(30, 2%, 70%);
  background-attachment: fixed;
 
    
/*    background-image:-webkit-gradient(radial,50% 50%,0,50% 50%,1000,from(rgba(245,245,245,1.0)),to(rgba(100,100,100,1.0)));background-image:-moz-radial-gradient(50% 50% 90deg,rgba(245,245,245,1.0) 0,rgba(100,100,100,1.0) 100%);
*/
background-image: -webkit-gradient(radial, 50% 0, 800, 50% 0, 0, from( rgba(255, 255, 255, 0) ), to( rgba(255, 255, 255, 0.5) ));
  }

  h1, h2, h3 { 
    font-family: 'Bangers', serif;
    text-align: center;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
    }
    


@-webkit-keyframes colorshit {
    from { background-color: hsl(0,   20%,  70%); }
    25% {  background-color: hsl(90,  20%,  70%); }
    50% {  background-color: hsl(180, 20%,  70%); }
    75% {  background-color: hsl(270, 20%,  70%); }
    to {   background-color: hsl(360, 20%,  70%); }
}

* { display:block;}
script, style, head { display:none;}

body > * { margin: 350px auto; width: 500px;}

header { margin-top: -120px;} footer { padding-bottom: 200px; }
p, ul { margin: 0;}
ul { padding: 0;}

styling:before { content: '*styling*\a'; }
css:before { content: '*css*\a'; }
logging:before { content: '*logging*\a'; }
debugging:before { content: '*debugging*\a'; }
breakpoints:before { content: '*breakpoints*\a'; }
html5:before { content: '*html5*\a'; }
next:before { content: '*next level*\a'; }
last:before { content: '*last slide*\a'; }

css p:nth-child(2){

text-align: center; background: saddlebrown; color: indianred;}



  
      color: #222;  font-size: 36px;
      padding-top: 200px;
    overflow-x:hidden;
    font-family: Amaranth;
  
  background-color: hsl(30, 2%, 70%);
  background-attachment: fixed;
 
    
/*    background-image:-webkit-gradient(radial,50% 50%,0,50% 50%,1000,from(rgba(245,245,245,1.0)),to(rgba(100,100,100,1.0)));background-image:-moz-radial-gradient(50% 50% 90deg,rgba(245,245,245,1.0) 0,rgba(100,100,100,1.0) 100%);
*/
background-image: -webkit-gradient(radial, 50% 0, 800, 50% 0, 0, from( rgba(255, 255, 255, 0) ), to( rgba(255, 255, 255, 0.5) ));
  }

  h1, h2, h3 { 
    font-family: 'Bangers', serif;
    text-align: center;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
    }
    


@-webkit-keyframes colorshit {
    from { background-color: hsl(0,   20%,  70%); }
    25% {  background-color: hsl(90,  20%,  70%); }
    50% {  background-color: hsl(180, 20%,  70%); }
    75% {  background-color: hsl(270, 20%,  70%); }
    to {   background-color: hsl(360, 20%,  70%); }
}

* { display:block;}
script, style, head { display:none;}
a { display:inline;}
body > * { margin: 350px auto; width: 500px;}
body > * > a:first-child { display:block;}
header { margin-top: -120px;} footer { padding-bottom: 200px; }
p, ul { margin: 0;}
ul { padding: 0;}

styling:before { content: '*styling*\a'; }
css:before { content: '*css*\a'; }
logging:before { content: '*logging*\a'; }
debugging:before { content: '*debugging*\a'; }
breakpoints:before { content: '*breakpoints*\a'; }
html5:before { content: '*html5*\a'; }
next:before { content: '*next level*\a'; }
last:before { content: '*last slide*\a'; }

css p:nth-child(2){

}