Christmas.css

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
	background-color: #23374D;
}
section{
	width: 410px;
	margin: 0 auto;
}
.top-box{
	box-sizing: content-box;
	top:50%;
	left:34.88%;
	width: 400px;
	height: 80px;
	padding: 0 2px;
	background-color: #DB1D48;
	box-shadow: 1px 8px 7px rgba(0,0,0,0.4);
	z-index: 1;
	transition: 
		top ease-out 0.5s,
		left ease-out 0.5s,
		transform ease-out 0.5s;
}

.bottom-box{
	top:60%;
	left:35%;
	width: 400px;
	height: 220px;
}
.bottom-box span:first-child{
	position: absolute;
	top:34%;
	display: block;
	width: 100%;
	height: 50px;
	background-color: #FFD644;
	opacity: 0.89;
}
.bottom-box span:last-child,.top-box span{
	position: absolute;
	left:45%;
	display: block;
	width: 50px;
	height: 100%;
	background-color: #FFD644;
	opacity: 0.89;
}
.bottom-box,.top-box{
	position: absolute;
	background-image: radial-gradient(#fff 15%,#EA2121 16%);
	background-position: 0 0, 25px 25px;
	background-size: 30px 30px;
	margin: 0 auto;
}
.wishes p{
	font-size:40px;
	color:whitesmoke;
	position: absolute;
	top: 70%;
	text-align: center;
	transition: all ease-out .9s;
	left: 40%;
	text-shadow: 1px 1px rgba(0,0,0,0.5) -1px -1px #444;
}
section:hover .top-box{
	top:30%;
	transform: rotateZ(10deg);
	left:36%;
}
section:hover .wishes p{
	top:50%;
}
#footnote{
	color:whitesmoke;
	position: absolute;
	bottom: 10px;
	right: 20px;
}
body #footnote::after{
	content: "This is made by subhransu das";
	
}