/*	Name: Sven Hansen
	Date: 04.11.2018
	Section: CSE 154 AH
	
	This is the stylesheet for index.html*/

@import url('https://fonts.googleapis.com/css?family=Roboto');
	
body {
	font-family: "Roboto", sans-serif;
	background: url(PuzzleBackground.png);
}	

main, .puzzle, header {
	border: 4px solid gray;
	border-radius: 6px;
	box-shadow: 0px 5px 3px 3px rgba(0, 0, 0, 0.3);
}

main, header {
	background-color: white;
	width: 90%;
	margin: auto;
	padding: 10px;
}

header {
	margin-bottom: 15px;
}

footer {
	font-family: serif;
}

li {
	margin: 1em;
}

h2, strong {
	text-decoration: underline;
}

fieldset div {
	display: inline-flex;
	margin-right: 150px;
}

strong {
	text-transform: uppercase;
}

/* Transition hack for modular height transitions inspired by:
 * https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css.
 * It is necessary because transition does not work with height:auto.
 * This allows puzzle boxes to smoothly expand when their content is revealed.
 */
 .puzzle nav p {
	transition: font-size .1s,
                margin .1s;
}

.invisible p {
	font-size: 0;
    margin: 0;
}

.puzzle {
	width: 300px;
	height: auto;
	margin: 10px;
	background-color: #F7F7F7;
	overflow: hidden;
	transition: width .25s;
}

/* Any puzzles with this tag will shrink horizontally until they cease to exist */
.hidden-puzzle {
	width: 0px;
	border: none;
	box-shadow: none;
	overflow: hidden;
	margin: 0;
}

.hidden-puzzle p {
	white-space: nowrap;
}

.puzzle-icon, .expand-button, #introduction, header {
	margin-left: auto;
	margin-right: auto;
}

.puzzle-icon, .expand-button {
	display: block;
}

.puzzle-icon {
	border: 3px solid gray;
	border-radius: 4px;
	width: 270px;
	height: auto;
	margin-top: 10px;
}

.expand-button {
	width: 30px;
	height: 30px;
}

.puzzle p, h3, nav, #introduction, header {
	text-align:center;
}

h3 {
	margin: 10px;
}

.puzzle div, #puzzle-container {
	display: flex;
}

.puzzle div, #puzzle-container {
	justify-content: center;
}

.puzzle div, fieldset div {
	align-items: center
}

.puzzle div img {
	height: 50px;
	width: 50px;
}

#introduction {
	width: 80%;
}

#puzzle-container {
	flex-flow: row wrap;
}