/* /tutorials/simcom2023/styles.css */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}
body {
	background-color:ivory;
	font-family:sans-serif;
	font-size:2.5vmin;
}
h3 {
	color:green;
	text-align: center;
	font-style: italic;
}
hr {
	margin-bottom:1vmin;
}
#main {
	margin:1vmin auto 0 auto;
	max-width: 125vmin;
	background-color:ivory;
}
p {
	margin:1vmin 5vmin;
}
ol {
	margin:1vmin 10vmin;
}
pre {
	border:2px solid brown;
	padding:2vmin;
	display: inline-block;
	background-color: white;
	margin:0 2vmin 1vmin 2vmin;
	font-size: 90%;
}
.box {
	display:flex;
	justify-content: center;
	align-items:center;
	margin: 0 5vmin;
}
.box p {
	margin-right: 0;
}
.centre {
	width:100%;
	display:flex;
	flex-direction: column;
	align-items: center;
}
#head, #foot {
	display:flex;
	justify-content: space-around;
	align-items: center;
	padding:2vmin 0 0 0;
}
#foot, .cols_2 {
	padding-bottom: 2vmin;
}
#head img, #foot 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;
}
#rest img {
	width:70%;
}
.magenta {
	color:magenta;
}
mark {
	background-color: lemon;
}
.hbox {
	width:100%;
	display:flex;
  justify-content:space-evenly;
  align-items:center;
}
.crimson {
	color:crimson;
	cursor:pointer;
	text-decoration:underline;
}

@media (orientation: portrait) {
	.box {
		flex-direction: column;
	}
	.box div {
		display:flex;
		flex-direction: column;
	}
}