* {
	  box-sizing: border-box;
	}

	html,
	body {
	  margin: 0;
	  padding: 0;
	}

	body {
	  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
	    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	  min-height: 1280px;
	  color: #3b3b3b;
	  font-size: 20px;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	a {
	  margin: 0;
	  font-weight: 400;
	}



	a,
	a:visited,
	a:hover {
	  color: teal;
	  text-decoration: none;
	  border-bottom: 2px solid currentColor;
	}

	nav {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: baseline;
	  -ms-flex-align: baseline;
	  align-items: baseline;
	  -webkit-box-pack: justify;
	  -ms-flex-pack: justify;
	  justify-content: space-between;
	  background: #f3f3f3;
	  padding: 1rem;
	  /* padding-right: 5rem; */
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
font-size: 20px;
	}

.item_title { 
/*font-weight:bold;*/
font-style: italic;
font-size:1.4rem;
margin-bottom:0.5em;
}



	.nav__examples {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-align: baseline;
	  -ms-flex-align: baseline;
	  align-items: baseline;
	  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	  margin-top: 1rem;
	}

	.nav__examples > * {
	  margin-right: 0.5rem;
	}

	#intro {
	  max-width: 40rem;
	  margin: 1rem auto;
	  text-align: center;
	}

	.intro__hed {
	  font-size: 2em;
	  margin: 2rem auto 0.5rem auto;
	}

	.intro__dek {
	  color: #8a8a8a;
line-height: 1.66rem;
	}

	.github-corner:hover .octo-arm {
	  animation: octocat-wave 560ms ease-in-out;
	}

	@keyframes octocat-wave {
	  0%,
	  100% {
	    transform: rotate(0);
	  }

	  20%,
	  60% {
	    transform: rotate(-25deg);
	  }

	  40%,
	  80% {
	    transform: rotate(10deg);
	  }
	}

	@media (max-width: 500px) {
	  .github-corner:hover .octo-arm {
	    animation: none;
	  }

	  .github-corner .octo-arm {
	    animation: octocat-wave 560ms ease-in-out;
	  }
	}

	#intro {
	  margin-bottom: 100px;
	}

	#outro {
	  height: 640px;
	}

	@media (min-width: 840px) {
	  .nav__examples {
	    margin-top: 0;
	    margin-left: 2rem;
	  }
	}



	body {
		font-family: "Baskerville","Georgia","serif";
	}
#scrolly {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* background-color: #f3f3f3; */
padding: 1rem;
}

#scrolly > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}

article {
position: relative;
padding: 0 1rem;
max-width: 30rem;
text-align: justify;
		/* font-size: 14px; */
}

figure {
position: -webkit-sticky;
position: sticky;
width: 100%;
margin: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* background-color: #8a8a8a; */
z-index: 0;
}

	figure img {
		/*border: 1px solid black;*/
	}

figure p {
text-align: center;
padding: 1rem;
		margin-top: 29px;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 8rem;
font-weight: 900;
color: #fff;
}

.step {
margin: 0 auto 7rem auto;
padding:1rem 1rem 0.5rem 1rem;
/* background-color: #3b3b3b; */
/* color: #fff; */
		/*border: 1px dotted white;*/
}

.step:last-child {
margin-bottom: 0;
}

.step.is-active {
/* background-color: goldenrod; */
/* color: #3b3b3b; */
		 background-color: #F2F2F2; 
		/*border: 1px solid gray;*/
}

.step p {
text-align: justify;
/*padding: 1rem;*/
font-size: 1.25rem;
margin:1rem auto;
}


/*.p1 { line-height:1rem; }*/
p {line-height: 1.5rem;}
.p1 {  line-height:1.5rem;}