@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Open+Sans+Condensed:300|Oswald');

/* ********** BASE ********** */
body {
	font-family: 'Open Sans Condensed', sans-serif;	
	font-size: x-large;
	line-height: 1.5em;

	color: #333333;
}

figure {
	max-width: 300px;
	margin: 0;
	text-align: center;
}
figcaption {
	font-size: small;
	font-style: italic;
	line-height: 1.0;
	text-align: right;
}
/*img { 
	width: 100%; 
	max-width: 200px;
}*/

h1, h2, h3 {
	font-family: 'Amatic SC', cursive;
	letter-spacing: 0.15em;

	color: black;
	margin-top: 1.5em;
	margin-bottom: 0;
}
h1 + p { margin-top: 0.5em; }

a { color: rgb(87, 164, 128);}

nav a {
	display: block;
	text-decoration: none;
	color: black;

	padding-right: 20px; 
}

/* added... */
a:hover { color: rgb(255, 0, 0); }
a:hover img { opacity: 0.5; }


aside ul, nav ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;

	text-indent: -20px;
	margin-left: 20px;

}
footer {
	border-top: 1px solid gray;
	font-family: 'Oswald', sans-serif;
	padding: 1rem 0;
}

/* ********** LAYOUT ********** */
/*body > * {
	border: 1px solid hotpink;
}*/

.container {
	margin: /*0*/ 25px auto;
	width: 90%;
	max-width: 960px;
}

#bb-img {
	margin-top:30px;
	max-width: 300px;
}

/* added... */
header { 
	display: block;
	position: relative; 
	flex-basis: 260px;
}
header h1 {
    margin: 0;
    transform: rotate(-90deg);
    font-size: 1.66em;
    position: absolute;
    top: 115px;
    left: -115px;
}
header img {
    position: relative;
    left: 40px;
}

aside {
    font-style: italic;
    margin: 0 0 0 auto;
    align-self: flex-end;
}

/* added... */
aside ul { margin-right: 20px; }
aside h2 { 
	margin-top: 0; 
	border-bottom: 1px solid gray;
}
/* ********** NAVIGATION ********** */

nav#fragments a:before {
	content: "\25BC\a0";
	font-size: small;
	position: relative;
	top: -2px;
}
nav a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-style: dotted;
}

footer #weak { float: left; }
footer #terminal { text-align: right; }
footer a#terminal {display: block;}

/* ********** MODULES ********** */
.right { 
	float: right; 
	margin-left: 20px;
}
.tiny { font-size: xx-small;  }

@media (max-width: 470px) {
	.right { 
		float: none; 
		margin-left: 0;
	}
	figure.right {
		max-width: revert;
		margin: 0;
	}
	#bb-img {
		max-width: revert;
		width: 100%;
	}
}

.side-by-side { 
	display: flex; 
	flex-wrap: wrap;
}