/* /activities/Peter's Brain Games 2/Bits/styles.css */
*:focus {outline: none;} /* prevents outline on clicked items */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}
body {
	background-color:#eff;
	font-family:sans-serif;
	font-size:20px;
	color: #007;
}
i {
	background-color: ivory;
	color: black;
	padding:0 10px;
	display:inline-block;
	margin:2px;
	font-style: normal;
}
sub {
	font-size:15px;
}
#hr {
	height:5px;
	background-color: black;
}
#main {
	width:100%;
	margin: 0 auto;
	text-align: center;
}
#head {
	display:flex;
	padding-top:5px;
	justify-content:space-around;
	align-items: center;
}
#head div {
	color:blue;
	font-style:italic;
	font-family:serif;
	letter-spacing: 1px;
	font-size:22px;
}
#head img {
	width:60%;
}
#panel1 {
	margin: 8px auto 12px auto;
	border: 2px solid mediumblue;
	background-color:#00c;
	color:ivory;
	font-family:sans-serif;
	font-size: 14px;
	height: 130px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
}
#panel1 p img{
	width:10%;
	vertical-align: middle;
}
#panel2 {
	width:90%;
	margin: 0px auto;
	display:flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
#panel2 img {
	width:14vw;
	max-width: 100px;
	height: 14vw;
	max-height: 100px;
	visibility: hidden;
	cursor:pointer;
}
#panel3 {
	height:65px;
	display:flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	margin-top: 15px;
	margin-bottom: 15px;
}
#panel3 p {
	width:20%;
	text-align: center;
	font-size: 30px;
	border: solid 5px green;
	background-color: lightyellow;
	visibility: hidden;
	letter-spacing: 2px;
}
#number {
	visibility: visible;
}
#panel4, #panel5{
	display:flex;
	justify-content: space-around;
	margin: 10px;
}
.btn, .btn1{
	width:84px;
	height:40px;
	padding-bottom:3px;
	font-size:18px;
	color:black;
	background-color:ivory;
	text-align:center;
	border-radius:10px;
	border-width:5px;
	border-style: double solid solid;
	cursor:pointer;
	visibility: hidden;
}
.btn1 {
	visibility: visible;
	width:140px;
	color:green;
	font-style: italic;
}
#bp {
	width:95px;
}
#panel5, #panel6, #panel7, #panel8 {
	display:none;
}
#panel6, #panel7, #panel8{
	display:flex nowrap;
	justify-content: space-between;
	align-items: center;
	border: solid 2px black;
	padding:10px 20px;
}
.left {
	text-align: left;
	font-size: 16px;
	padding-right: 10px;
}
.right {
	text-align: right;
	font-size: 24px;
	font-family: monospace;
}
.carry {
	color:red;
	line-height: 50%;
}

@media screen and (orientation:landscape) {
	i {
		padding:0 20px;
	}
	#main {
		max-width:980px;
	}
	#head div {
		font-size:38px;
	}
	#panel1 {
		font-size: 22px;
	}
	#panel2 {
		height:100px;
	}
	#panel3 {
		height:105px;
	}
	#panel3 p {
		font-size: 70px;
	}
	.btn, .btn1, #bp {
		width:160px;
		height:55px;
		padding-bottom:5px;
		font-size:36px;
	}
	.btn1 {
		width:250px;
	}
	.left {
		font-size:26px;
	}
	.right {
		font-size:40px;
	}
}