@charset "utf-8";

/* also requires base.css */


/* body & content blocks */

body {
	padding: 1rem;
}

ul#blocks {
	display: grid;
	gap: 1.5rem 2rem;
	grid-template-columns: repeat(auto-fill, 18rem);
	justify-content: center;
	list-style: none;
	margin: 0 auto;
	max-width: 100rem;
	padding: 0;
}

ul#blocks>li ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#blocks>li li {
	margin: 0.5rem 0 0 0;
	padding: 0;
}



/* text */

h1, h2, h3, p {
	margin-top: 0;
}

p {
	margin-bottom: 0;
}

h1 {
	line-height: 1em;
	margin-bottom: 0.5rem;
}

h2 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

h1 a, h2 a, h1 a:hover, h2 a:hover {
	text-decoration: none;
}

h1 a:hover {
	color: #08e;
}

h1 a:active {
	color: #0af;
}

ul#blocks>li p {
	line-height: 1.3;
}



/* flip styles */

body.flipped {
	background: #333;
	background: linear-gradient(#420, #202 70%, #024);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: white;
}

.flipped a {
	color: #48f;
}

.flipped a:active {
	color: #6af;
}

.wrong, .wrong-inline {
	display: none;
}

.right {
	display: block;
}

.right-inline {
	display: inline;
}

/* 191229 WOW these sure simplify the JS! fancy that -> */

.flipped .right, .flipped .right-inline {
	display: none;
}

.flipped .wrong {
	display: block;
}

.flipped .wrong-inline {
	display: inline;
}


/* rhymes button */

[id=rhymes] {
	background-color: transparent;
	border: none;
	border-radius: 0.25rem;
	color: #999;
	font-family: inherit;
	font-size: 0.9em;
	font-style: italic;
	margin-top: 0.7em;
	text-align: inherit;
}

[id=rhymes]:hover {
	background-color: #0001;
}
[id=rhymes]:focus-visible {
	background-color: #0002;
}
[id=rhymes]:active {
	background-color: #0003;
}

.flipped [id=rhymes]:hover {
	background-color: #fff1;
}
.flipped [id=rhymes]:focus-visible {
	background-color: #fff2;
}
.flipped [id=rhymes]:active {
	background-color: #fff3;
}

.aside p {
	margin: 0;
}



/* tags */

ul#blocks>li ul#color-key li {
	margin: 0;
}

.flipped ul#blocks>li ul#color-key li {
	margin: 0 0 0.2rem 0;
}

ul#blocks>li ul#color-key .tag {
	bottom: -0.1rem;
}

.tag {
	border-radius: 2px;
	width: 1rem;
	vertical-align: top;
	height: 1rem;
	display: inline-block;
	margin: 0 2px 0 0;
	position: relative;
	bottom: -0.2rem;
}

.wide.tag {
	width: 2rem;
}

.narrow.tag {
	width: 0.5rem;
}

.small.tag {
	width: 0.8rem;
	height: 0.8rem;
}

.geog.tag {
	background-color: #3b6;
}

.math.tag {
	background-color: #1bf;
}

.art.tag {
	background-color: #66f;
}

.music.tag {
	background-color: #f46;
}

.lang.tag {
	background-color: #f80;
}

.misc.tag {
	background-color: #dd5;
}



/* link mouseover colors ----------------- */

a.route:hover {
	color: #339;
}
a.route:active {
	color: #33e;
}

a.swz:hover {
	color: #f00;
}
a.swz:active {
	color: #f77;
}

a.eur:hover {
	color: #7af;
}
a.eur:active {
	color: #9bf;
}

a.poib:hover {
	color: #0a3;
}
a.poib:active {
	color: #0c5;
}

a.tess:hover {
	color: #c3c;
}
a.tess:active {
	color: #e4e;
}

a.nola:hover {
	color: #39f;
}
a.nola:active {
	color: #4bf;
}

a.ipa:hover {
	color: #96c;
}
a.ipa:active {
	color: #b7f;
}

a.soundcloud:hover {
    color: #f50;
}
a.soundcloud:active {
    color: #f82;
}

a.genres:hover {
	color: #fa0;
}
a.genres:active {
	color: #fb6;
}

a.jddj:hover {
	color: #88f;
}
a.jddj:active {
	color: #aaf;
}

a.colors:hover {
	color: #9e0;
}
a.colors:active {
	color: #af3;
}