/*	Sample CSS
	================================================
	================================================ */

	main>div {
		padding: 1em;
		background-color: #511;
	}

/*	Special Animation
	================================================
	var h1 = document.querySelector('h1');
	h1.classList.toggle('special');
	================================================ */

	.special {
		animation: glowing alternate-reverse infinite 1s;
	}

	@keyframes glowing {
		from {
			color: red;
		}
		to {
			color: yellow;
		}
	}

/*	Classes & ids
	================================================
	================================================ */

	.nonenglish {
		color: #cde;
	}
	.term {
		font-weight: bold;
	}

	p.postscript {
		color: #111;
		background-color: #f8f8f8;
		padding: 1em;
		border: thick solid #ccc;
	}

	h1.different-color {
		color: #dac1a4;
	}
	h1.different-background {
		background-color: #587272;
	}



/*	Sample Button
	================================================
	Illustrates :hover pseudoclass and transition
	================================================ */

	button#sample-button {
		font-size: 1.2em;
		border: thin solid white;
		padding: 0.5em 0.75em;
		display: block;
		margin: 0.25em 0 1em;

		background-color: rgb(0,34,34);
		color: white;
		transition: color 0.5s, background-color 0.5s
	}

	button#sample-button:hover {
		color: rgb(0,34,34);
		background-color: white;
	}


/*	CSS Transitions
	================================================
	================================================ */


	figure#sample-figure {
		border: thick solid #f8f8f8;
		padding: 1em;
		text-align: center;

		transition: border 2s;
	}
	figure#sample-figure.different {
		border-color: #333;
	}



/*	Compact Version
	================================================
	================================================ */

	div#content p {
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
		line-height: 1.25;
	}

	div#content>div>p:nth-child(n+4) {
	  display: none;
	}
	div#content > div > p:nth-of-type(3) {
		color: transparent;
	}
	div#content > div > p:nth-of-type(3):before {
		content: "…";
		display: block;
		color: white;
	}