@charset "UTF-8";
html {
  font-size: 62.5%;
  /*   See https://css-tricks.com/accessible-font-sizing-explained/ */
  line-height: 100%;
  font: 100% "Trebuchet", sans-serif;
  color: #1a1a1a;
  font-size: 1rem;
}

h2{
 margin: 2em 0 1em 0 
}

p, li{
  line-height:1.8em
}

blockquote{
  padding-left:1em
}

* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

main{
  width:50%;
  margin: 0 auto;
  margin-top: 6em
}

.blog-title{background-color: gold; margin:0; padding: 5em 25%}

.blog-title h1{font-size:4em}

.blog-title p{font-size:1.5em}

img {width:100%; margin:1.5em 0}

#p5-sketch{
  position:fixed;
	bottom:0;
	left:0
}

#scrollCounter{
	padding:1em;
	background:pink;
	position:fixed;
	bottom:0;
  right:1em
}


/*------------------------------------*\
    
    Mobile
    devices with a screen width of under 767px

\*------------------------------------*/

@media only screen and (max-width: 767px) {
  main{
    width:100%;
    margin:0;
    padding: 1em
  }
  
  .blog-title{padding: 10% 10% 5% 10%}
  .blog-title h1{font-size:3em}

.blog-title p{font-size:1.5em}
}