body {
	margin: 0;
	background-color: #d6adad;
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d0a1a2' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='5' cy='5' r='3'/%3E%3Ccircle cx='25' cy='25' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
body::after{
   position:absolute; width:0; height:0; overflow:hidden;
   content:url("images/bear2.webp") url("images/bear3.webp")
}
header {
	background: #FCEDEA;
	width:100%;
	border-color: #C6BBBB;
	border-style: solid;
	border-width: 5px 0;
}
main {
	height: auto;
}
title {
	background-color: #fffef8;
	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffe7e6' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
	width:100%;
	height: auto;
	display: block;
	margin-top: 20px;
	padding: 10px 0;
	text-align: center;
	font-family: 'Brush Script MT', cursive;
	font-size: xxx-large;
	color: #4D4D4D;
}
article {
	text-align: center;
	margin-top: 10px;
}
footer {
	background: #FCEDEA;
	position:absolute;
	bottom:0;
	width:100%;
	height:20px;
	border-color: #C6BBBB;
	border-style: solid;
	border-width: 5px 0;
}
#logo {
	display: block;
	margin-left: auto;
    margin-right: auto;
}
#msg {
	background: #FCEDEA;
	width:100%;
	border-color: #C6BBBB;
	border-style: solid;
	border-width: 5px 0;	
}
#bear {
	background: url("images/bear1.webp") no-repeat;
	height: 300px;
	position: absolute;
	bottom: 20px;
	width: 330px;
	right: 0px;
}
#bear:hover {

	background: url("images/bear2.webp") no-repeat;
}
#bear:active {

	background: url("images/bear3.webp") no-repeat;
}