/* chess/styles.css */

*:focus {outline:none;} /* prevents outline on clicked items */
* { /* reset */
	padding:0;
	margin:0;
}
h3, p {
	margin-top:20px;
}
p {
	margin-bottom:20px;
}

body {background-color:#955; font-size:24px; font-family:sans-serif;}
a {text-decoration:none; color:deeppink;}

#head {
	margin:0 auto;
	width:100%;
	max-width:940px;
	padding-top: 10px;
	padding-bottom: 5px;
	display:flex;
	align-items: center;
	justify-content: space-around;
}
#head div img {
	width:80%;
	display:block;
	margin:0 auto;
}
#title {
	color:lightblue;
	font-style:italic;
	font-size:2em;
	font-family:serif;
}

div#board {width:100%; text-align:center; margin-top:20px;}
div#panel {margin:20px auto; width:940px; padding:2px 0 10px 0; text-align:center;
	background-color:wheat; border:10px solid salmon; font-size:1.5em;}
div#lot {text-align:center; margin-top:20px;}
img#lot {width:940px; border:10px solid salmon;}
#intro1 {margin:20px auto; width:940px; padding:2px 0 10px 0; text-align:center;
	background-color:wheat; border:10px solid salmon;}
#intro2 {color:black; font-weight:normal; padding:20px 20px 15px 20px;
	text-align:left;}
h3 {color:crimson;}
hr {border-width:2px; color:mediumblue;}
p {font-weight:bold;}
#white {color:ivory; background-color:black;}
#black {color:black; background-color:ivory;}
#white, #black {
	padding:5px 20px 0px 20px;
	font-size: 1.5em;
}
input#game {width:200px; font-size:1.5em;}
#continue {font-size:1.5em; margin-top:10px; background-color:palegreen;
	padding:2px 20px 7px 20px;
	font-style:italic; border:2px solid black; border-radius:20px;}
#number {color:deeppink; font-size:120%;}
.vSpace {margin-top:10px;}

div#temp1, div#temp2 {
	display:none;
	font-size:1.5em;
}
p#takenW {color:white; letter-spacing:8px; margin-top:15px;}
p#side {color:ivory; font-weight: normal; font-size:1.5em;}
p#takenB {color:black; letter-spacing:8px;}

img.square {width:12%; margin:-4px; padding:0;}
img.piece {width:12%; margin:-4px;
	padding:0; left:0; top:0; position:absolute;}

@media only screen and (min-width: 900px) {
	xbody {background-color: yellow;}
	img.square {width:105px;}
	img.piece {width:105px;}
}
@media only screen and (max-width: 768px) {
	xbody {background-color: pink;}
	img.square {width:12%;}
	img.piece {width:12%;}
}
@media only screen and (max-width: 500px) {
	xbody {background-color: lightblue;}
	img.square {width:12.5%;}
	img.piece {width:12.5%;}
}
@media only screen and (orientation:landscape) {
	#main {
		display:flex;
	}
	div#panel {
		font-size:1em;
	}
	#white, #black, #continue {
		font-size:1.2em;
	}
	p#side {
		font-size:1em;
	}
	div#temp1, div#temp2 {
		font-size:1em;
	}
}