/**************
|  style.css  |
**************/

html {
	background-color: skyblue;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;
	box-sizing: border-box;
	text-align: center;
	margin: 50px auto;
	line-height: 1.25;
	height: auto;
	width: 60%;
}

.page {
	box-shadow: 3px 3px 7px #333;
	padding: 36px 50px;
	text-align: left;
	min-height: auto;
}

h1 {
	margin-bottom: 15px;
	font-size: 30px;
	color: #333;
}

p, li {
	color: #333;
	font-size: 20px;
	margin-bottom: 15px;
	letter-spacing: 0.2px;
}

.normal {
	font-family: Consolas, 'Courier New', Courier, monospace;
	font-weight: bold;
	font-size: 20px;
	color: blue;
}

em {
	font-style: normal;
	font-weight: bold;
	color: crimson;
}

/* this is a div */
.buttons {
	width: 180px;
	height: 240px;
	margin: 30px 0 15px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* these rules are common to all 3 elements */
#btn1,
#btn2,
#btn3 {
	color: navy;
	display: block;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
	border: solid 3px navy;
	background-color: skyblue;
	box-shadow: 4px 4px 9px black;
}

/* these rules are unique to #btn1 */
#btn1 {
	padding: 13px 0;
	text-decoration: none;
}

/* these rules are unique to #btn2 and #btn3 */
#btn2,
#btn3 {
	height: 58px;
	cursor: pointer;
}

/* these rules are common to all 3 elements */
#btn1:hover,
#btn2:hover,
#btn3:hover {
	color: crimson;
}

/* these rules are common to all 3 elements */
#btn1:active,
#btn2:active,
#btn3:active {
	color: crimson;
	box-shadow: 4px 4px 9px transparent;
}