spiredb.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&family=Quicksand:wght@300;700&display=swap');

html
{
	font-family: 'Quicksand', sans-serif;
	font-weight: 300;
	font-size: 20px;
}

body
{
	background: #EEE;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

h1
{
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	margin: 2rem 0 1rem;
	text-align: center;
}

a
{
	text-decoration: none;
	font-weight: 700;
	color: #008;
}

a:hover
{
	color: #44C;
}

#wrapper
{
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

#main-content
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
}

#main-content > *
{
	flex-grow: 1;
}

.region
{
	background: #FFF;
	border: 1px solid #888;
	border-radius: 3px;
	padding: 0.5rem;
	margin: 0.5rem;
}

#wrapper > .region > *
{
	max-width: 40rem;
	margin: 0.5rem auto;
}

#main-content > .region > *
{
	max-width: 25rem;
	margin: 0.5rem auto;
}

.F
{
	color: #600;
}

.Z
{
	color: #226;
}

.P
{
	color: #060;
}

.L
{
	color: #660;
}

.S
{
	color: #640;
}

.C
{
	color: #666;
}

.K
{
	color: #604;
}

#spire
{
	border-collapse: collapse;
}

#spire td
{
	border: 1px solid black;
	width: 4rem;
	height: 2rem;
	padding: 0.2rem 0.5rem;
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 800;
}

#spire td.F
{
	background: #E77;
}

#spire td.Z
{
	background: #88E;
}

#spire td.P
{
	background: #6D6;
}

#spire td.L
{
	background: #EE6;
}

#spire td.S
{
	background: #DA6;
}

#spire td.C
{
	background: #CCC;
}

#spire td.K
{
	background: #B6D;
}

#layout-string
{
	overflow-wrap: break-word;
}

#stats,
#upgrades,
#core
{
	display: none;
}

.form-row
{
	margin-top: 0.5rem;
}

.form-row label
{
	position: absolute;
}

.form-row input,
.form-row select,
.form-row .form-group
{
	margin-left: 7rem;
}

.form-row .form-group + .form-group
{
	margin-top: 0.5rem;
}

.form-row .form-group input
{
	margin-left: 0;
}

.form-row .form-group input + input
{
	margin-left: 0.5rem;
}

input[type=text],
select
{
	appearance: none;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.9rem;
	background: #FFF;
	border: 1px solid #888;
	border-radius: 2px;
	padding: 2px 5px;
}

input[type=submit]
{
	appearance: none;
	font-family: 'Quicksand', sans-serif;
	font-size: 1rem;
	font-weight: 300;
	background: #EEE;
	border: 1px solid #000;
	border-radius: 2px;
	padding: 0.2rem 0.5rem;
}

input.fire
{
	background: #FCC;
}

input.frost
{
	background: #CCF;
}

input.poison
{
	background: #CFC;
}

input.lightning
{
	background: #EEB;
}

input.strength
{
	background: #ECA;
}

input.condenser
{
	background: #DDD;
}

.error
{
	color: #C00;
}

.copyright
{
	font-size: 0.7rem;
	color: #666;
}