/* Since this site is about teaching web concepts, even this file is a learning
 * opportunity. */

body {
	color: beige;
	background: #111;
	margin-bottom: 200px;
	font-family: monospace;
}

h1 {
	text-align: center;
	color: lightgreen;
}

header h1 {
	font-size: 40px;
}

h2 {
	text-align: center;
	color: deeppink;
	font-variant: small-caps;
	font-size: 24pt;
	border-bottom: dashed #ddd 1px;
	max-width: 500px;
	margin: 1em auto;
}

h3 {
    color: gold;
}

/* "a" is for links. */
a {
    color: lightblue;
}

/* The "hover" option, which can be used with pretty much anything, allows you
 * to set different settings if someone hovers over something with their mouse.
 * */
a:hover {
    color: white;
}

dt {
	font-weight: bold;
}

/* code and pre are for formatting monospace text commands. Use code generally,
 * but pre is for separate code blocks. pre is also sensitive to whitespace,
 * unlike most of HTML. */
code {
	color: lime;
	border-radius: 5px;
}
pre {
	background: #111222;
	border: 1px solid lime;
	border-radius: 20px;
	padding: 1em;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	max-width: 600px;
	margin: auto;
}

.wide { max-width: inherit; }

p img, li img, h1 img, h2 img, h3 img, h4 img, dt img {
	vertical-align: middle;
	max-width: 1em;
	max-height: 1em;
	border: none;
	display: inline;
}

img {
	max-width: 90%;
	margin: auto;
	display: block;
	border: solid 5px beige;
}
.titleimg {
	border: none;
	height: 150px;
}
strong {
	color: orange;
}

footer {
	text-align: center;
	font-variant: small-caps;
	clear: both;
	padding: 2em 0;
}
footer li {
	display: inline-block;
	padding: 0 .5em;
	font-size: x-large;
}
footer li:hover {
	background: lightblue;
}

nav { font-size: small;}

footer { font-size: large; }

nav ul, footer ul, #taglist {
	padding: 0;
}

main {
	margin: auto;
}

/* asides are used for minor tangential notes. I have them shrunk down in
 * softer colors in a box with soft corners (border-radius). */

aside {
    border: solid 1px black;
    border-radius: 20px;
    padding: 0 1em 0 1em;
    font-size: small;
}

aside p {
    color: gray;
}

aside code {
    color: green;
}

/* .callout here is refencing any aside given the class name callout
 * An example being: <aside class="callout"> */
aside.callout  {
    border: solid 1px orange;
}

.cnp {
	width: 100%;

}

/* This "@media" block defines rules that will only be applied when the minimum
 * width of the screen is 55em or greater. In essence, they are settings that
 * only apply on normal weide screens, but *not* phones and low res monitors.
 * Since we have more room on widescreens, we change a couple things. */

@media (min-width: 55em) {

    aside {
    margin: 0 30px 0 30px;
    }

	.resright, .disappear {
		display: block;
		float: right;
		padding: 20px;
		clear: both;
		max-height: 400px;
		max-width: 300px;
	}

    header { max-width: 900px; margin: auto;}
	main { max-width: 850px; }
}

.ll {
	font-size: large;
	line-height: 1.3em;
	max-width: 600px;
	margin: auto;
}

.ll dd {
	display: inline;
}

.ll dt {
	display: inline-block;
	width: 6em;
}

.ll dd:after {
	display:block;
	content: '';
}

/* The "Next Article" Button changes color and also has a 👉 automatically
 * added to its front. */

@-webkit-keyframes next {
    0% {color: yellow;}
    100% {color: lightblue}
}

.prev {
	font-size: large;
	text-align: center;
	margin: auto;
	display: block;
	font-weight: bold;
}

.prev:before {
	content: "👈";
}

.next a {
	color: inherit;
}

.next {
	  -webkit-animation:next 1s infinite alternate;
	font-size: xx-large;
	text-align: center;
	margin: auto;
	display: block;
	font-weight: bold;
	padding: 0 1em 1em 1em;
}

.next:before {
	content: "👉";
}