* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}
.no_select {
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
}
.no_drag {
	user-drag: none; /* Standard syntax */
	-webkit-user-drag: none; /* Safari and Chrome */
}
body {
	background-color:ivory;
	font-family:sans-serif;
	font-size:3vmin;
	text-decoration: none;
}
h3 {
	color:blue;
	text-align: center;
	font-style: italic;
	font-size:3.5vmin;
	font-weight: normal;
}
hr {
	margin:1.5vmin 0 2.5vmin 0;
}
#main {
	display:grid;
	height:88vmin;
	margin:1vmin auto 0 auto;
	max-width: 125vmin;
	background-color:ivory;
	xborder:1px solid black;
}
p {
	margin:1vmin 5vmin;
}
ol {
	margin:1vmin 10vmin;
}
.centre {
	width:100%;
	display:flex;
	flex-direction: column;
	align-items: center;
}
#head, #foot {
	display:flex;
	justify-content: space-around;
	align-items: center;
	xpadding:2vmin 0 0 0;
}
#foot, .cols_2 {
	padding-bottom: 2vmin;
}
#head img, #foot img, #left img, #right img {
	height:7vmin;
}
#head #title img, #foot #titleB {
	height:4vmin;
}
#titleB {
	visibility: hidden;
}
#title {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#overview {
	font-style: italic;
	font-size: 90%;
}
.btn {
	background-color: #cfc;
	border: double .6vmin grey;
	padding: .2vmin 1.2vmin .6vmin 1.2vmin;
	border-radius: 3vmin;
	cursor:pointer;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
}
.magenta {
	color:magenta;
}
.box {
	display:flex;
	justify-content: center;
	align-items:center;
	margin: 0 5vmin;
}
.box p {
	margin-right: 0;
}
.highlight {
	border:5px solid lime;
}

/* Chess */
#row8 {
	margin:1vmin auto;
	width:88vmin; height:11vmin;
  display:grid;
  grid-template-columns: repeat(8,1fr);
  border:1vmin outset peru;
	border-top:0;
}
#row8 .square img {width:95%;}
#board {
  width:89vmin; height:89vmin; /* full screen */
  display:grid;
  grid-template-columns: repeat(8,1fr);
  grid-template-rows: repeat(8,1fr);
  border:1vmin outset peru;
  background-color:white;
}
.square {
  display:flex;
  justify-content: center;
  align-items: center;
	outline:1px solid grey; outline-offset:-1px;
}
.piece {
  width:100%; height:100%;
}
#pieces {
	padding-left:2vmin;
	width:90%; margin:0 auto;
	display:flex;
	justify-content:space-evenly;
}
#pieces div, #col21 {
	display:flex; flex-direction:column;
	justify-content:center;
	align-items:center;
}
#col21 {
	width:50vmin; height:78vmin;
	justify-content:space-evenly;
}
#pieces div img{
	width:80%; height:auto;
	margin-bottom:1vmin;
}
#top {
	width:90%; margin:0 auto;
	display:flex;
	justify-content: space-between;
	align-items:flex-end;
}
#left1 {width:40%;}
#right1 {width:23%;}
#left1 img, #right1 img {
	width:100%; height:auto;
}
#text {
	display:flex; flex-direction:column;
	justify-content: space-between;
	align-items: center;
	align-self:center;
}
#text img {width:8vmin; height:auto;}
#text p {text-align: center;}
#portrait {display:none;}
#bottom_div {width:58vmin;}
#big_target {
	width:100%; height:auto;
	grid-row: 3/span 3;
	grid-column: 4/span 3;
}
#piece_over {
	width:100%; height:auto;
	grid-row: 4/span 1;
	grid-column: 5/span 1;
}
#big_target, #piece_over {
	display:none;
}
#panel1, #panel2 {
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	width:62vmin;
	text-align: center;
}
#panel1 p, #panel2 p {
	margin:.6vmin 0;
}
#panel1 div .btn, #panel2 div .btn {
	margin:1vmin;
}
#panel2 {
	display:none;
}
.highlight1 {outline:1.5vmin solid lime;}
#pieces1 {
	width:100%; visibility:hidden;
	display:flex; justify-content: space-evenly;
	flex-direction:row;
	background-color:black;
	padding:1vmin 0;
}
#pieces1 img {width:8vmin; padding:1vmin;}
#panel1 div div, #panel2 div div {
	width:20vmin; margin:2vmin auto;
}
#message {
	width:85%;
	margin:1vmin auto;
	display:flex;
	justify-content: center;
	align-items: center;
	border:1px solid blue;
	padding:1vmin 0;
	background-color: #efe;
}
.bw {
	background-color: black;
	color:white;
}
.col1 p {margin:1vmin; text-align:center;}
#result {
	width:100%; text-align:center; padding:3vmin 2vmin;
}
#depth, .red_pink {
	display:flex; width:100%; flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
}
.red_pink img {width:9vmin; height:9vmin;}

@media (orientation: portrait) {
	body {
		font-size: 2.5vmin;
	}
	.box {
		flex-direction: column;
	}
	.box div {
		display:flex;
		flex-direction: column;
	}
	#top {flex-direction: column;}
	#portrait {
		width:60%; margin:0 auto;
		display:flex;
		justify-content: space-around;
		align-items:flex-end;
	}
	#left1, #right1 {display:none;}
	#left2 {width:40%;}
	#right2 {width:23%;}
	#left2 img, #right2 img {
		width:100%; height:auto;
	}
	#bottom_div {width:90vmin;}
	.col1 {width:80vmin; margin-bottom:1vmin;}
	.col2 {width:80vmin;}
	#col21 {width:100%; height:45vmin;}
	#depth {width:60%;}
	.box #col21 .red_pink {
		flex-direction:row; width:45%;
	}
}
@media (orientation: landscape) {
	#panel1 {align-self:flex-start;}
	#panel1 h3 {margin-top:2vmin;}
	.col1 {width:30vmin;}
	.col2 {width:68vmin;}
}