body {
	font-family: 'Trebuchet MS', sans-serif;
	font-size: .9em;
}
@media only screen and (min-width: 450px) {
	body {
		font-size:1.2em;
		max-width: 50em;
	}
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.3em;
	margin: .3em;
}
h3 {
	font-size: smaller;
	border-radius: .3em;
	box-shadow: 3px 3px 4px 0px #ccc;
}
fieldset > h2 {
	margin-left: .8em;
}
fieldset {
	display: flex;
	flex-direction: column;
	margin: .8em;
}
legend {
	font-weight: bold;
}
fieldset fieldset {
	box-shadow: inset 3px 3px 6px 4px #ddd;
	margin-top: 1.5em;
	font-size: smaller;
	margin-left: 1.5em;
}
label {
	margin: .6em;
}
input[type=text], input[type=range] {
	font-size: 1.2em;
	margin-left: .4em;
	flex: 5 1 auto;
}
input[type=range] {
	margin-top: 1em;
	margin-bottom: .5em;
	width: 98%;
}
input[type=number] {
	font-size: inherit;
	width: 3em;
}
input[type=text]:focus {
	box-shadow: 2px 2px 2px 0px #666;
}
input[type=text]:hover {
	box-shadow: 4px 4px 8px 0px #666;
}
input[type=text]:placeholder-shown {
	background-color: #fff8;
	border: 1px solid #999;
}
::placeholder {
	font-size: 1em;
	font-style: italic;
	color: #ccc;
}
span#groupdesc {
	color: #999;
	font-size: .9em;
	font-style: italic;
}

#input_competitors label {
	display: flex;
	justify-content: space-between;
}
#input_competitors span {
	margin: .4em;
	flex: 0 1 2em;
}

section#groups {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
section#fixtures {
	display: flex;
	flex-direction: column;
}

#groups h2, #fixtures h2 {
	margin-top: 0;
}

#groups section, #fixtures section, fieldset, button {
	margin: .6em;
	padding: .6em;
	background-color: #eee;
	border: 1px solid #aaa;
	border-radius: .3em;
	box-shadow: 7px 7px 12px 0px #ccc;
	flex: 1 1 30%;
}

#groups ul, #fixtures ul {
	list-style-type: none;
	padding-left: .2em;
}
#groups li, #fixtures li {
	margin: .6em;
}
#fixtures li {
	display: flex;
	justify-content: space-between;
}
#fixtures span {
	flex: 1 2 auto;
	font-style: italic;
}
#fixtures span:nth-of-type(even) {
	flex: 3 1 4em;
	min-width: 4em;
	font-style: inherit;
}

.hidden {
	display: none !important;
}
.visible {
	display: initial !important;
}
#input_competitors .visible {
	display: flex !important;
}
.winner {
	font-weight: bold;
}
.bye, .placeholder{
	opacity: .5;
	font-style: italic !important;
}
.highlight {
	background-color: #e8e8e8;
}

button {
	display: block;
	font-size: 1.2em;
	margin: .4em auto .4em auto;
	padding: .4em;
	width: 94%;
	border-color: #aaa;
	border-width: 2px;
}

li.draw, span.draw {
	opacity: 0;
}
.reveal {
	animation: fadeIn cubic-bezier(0.65, 0.05, 0.36, 1) 2s;
	animation-iteration-count: 1;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

footer {
	position: fixed;
	bottom: 0;
	right: 0;
	font-size: smaller;
	text-align: right;
}