@font-face {
	font-family: font;
	src: url(font.ttf);
}
* {
	text-align: center;
	font-family: font;
}
.pic {
	width: 50px;
	margin: 3px;
	transition: 0.5s;
}
.pic:hover {
	width: 75px;
}
.none:hover {
	font-size: 60px;
}
button {
	border-radius: 10px;
	border: 2px solid black;
	font-size: 30px;
	transition: 0.5s;
	color: hotpink;
	filter: grayscale(100%);
}
h1 {
	color: red;
	animation: rainbow 4s infinite linear;
}
i {
	font-size: 25px;
}
@keyframes rainbow {
	from {filter: hue-rotate(0deg);}
	to {filter: hue-rotate(360deg);}
}
button:hover {
	font-size: 45px;
	filter: grayscale(0%);
	animation: rainbow 1s infinite linear;
}
.title, .none {
	font-size: 40px;
	transition: 0.5s;
}
h1 {
	font-size: 60px;
}
#main {
	position: relative;
	height: 330px;
}
#corner {
	position: relative;
}
#background, #character, #frame {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
}
#background2, #character2, #frame2 {
	position: fixed;
	right: 10px;
	top: 10px;
	width: 128px;
}
#background, #background2 {
	z-index: 0;
}
#character, #character2 {
	z-index: 1;
}
#frame, #frame2 {
	z-index: 2;
}