/*********************************
 *********** Universal ***********
 *********************************/

body {
	background: linear-gradient(#FFE01F, #FCCE01) fixed;
	font-family: 'Lora', serif;
}

div.main {
	max-width: 600px;
	margin: 20px auto;
	padding: 10px;
	text-align: center;
}


/*********************************
 ************* Index *************
 *********************************/
 
img#avatar {
	max-height: 200px;
	max-width: 60%;
	margin: 5px auto;
	border: 5px solid #eee;
	border-radius: 100em;
	box-shadow: 2px 2px 7px #BBB;
}

h1 {
	font-size: 2.5em; /* met alleen 'buitenkamp: 2.4em */
	margin: 0.2em 0 0.2em 0; /* " 0.67 em 0 0.1em 0 */
}

div.life {
	font-size: 0.8em;
}

div.text {
	margin: 0 auto 1.5em auto;
	max-width: 400px;
	text-align: left;
}


/*********************************
 ************* Book **************
 *********************************/

img#page {
	display: block;
	max-height: 800px;
	max-width: 95%;
	margin: 20px auto;
	box-shadow: 2px 2px 7px #BBB;
}

div.locationToggle {
	margin: 5px;
}

input.button {
	margin: 5px;
}

span.location {
	display: inline-block;
	min-width: 9ch;
}

div.locationSetter {
	margin: 5px;
}

input#locationTextBox {
	width: 30px;
	text-align: center;
}


/*********************************
 ************ Mobile *************
 *********************************/

@media (max-width:500px) {
	div.main {
		margin-top: 5px;
	}
	
	h1 {
		font-size: 2.4em; /* was met alleen 'buitenkamp' 2.2em */
		margin: 0 0 0.2em 0; /* " 0.4em 0 0.1em 0 */
	}
	
	img#page {
		margin: 10px auto 20px auto;
		box-shadow: 2px 2px 4px #BBB;
	}
}