/* reset css */
body {
	margin: 0;
}

main {
	display: block;
}
/* style */
html {
	background-color: #eee;
	
}

body {
	display: flex;
	flex-direction: column;
	min-width: 320px;
	max-width: 900px;
	width: 90%;
	margin: 0 auto;
	overflow-x: hidden;
}

header {
	height: 250px;
}
/* paper */
#paper {
	display: flex;
	position: relative;
	top: 15px;
	height: 250px;
}

#left {
	border-style: solid;
	border-color: transparent transparent #B8860B transparent;
	border-width: 0 25px 25px 25px;
	height: 0;
	width: 50px;
	position: absolute;
	left: -63px;
	top: 5px;
	margin: 20px 0 50px 0;
	transform: rotate(90deg);
	flex-grow: 0;
	flex-shrink: 0;
}

#left:after {
	content: "";
	position: absolute;
	top: 24px;
	left: -25px;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #C8961B transparent transparent transparent;
	border-width: 70px 50px 0 50px;
	
}

#center {
	position: relative;
	width: 100%;
	height: 75px;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 1px 3px 0 #000;
	z-index: 2;
	flex-grow: 0;
	flex-shrink: 0;
}

#center > p {
	margin: 30px 0 0;
	text-align: center;
}

#right {
	border-style: solid;
	border-color: transparent transparent #B8860B transparent;
	border-width: 0 25px 25px 25px;
	height: 0;
	width: 50px;
	position: absolute;
	right: -63px;
	top: 5px;
	margin: 20px 0 50px 0;
	transform: rotate(-90deg);
	flex-grow: 0;
	flex-shrink: 0;
}

#right:after {
	content: "";
	position: absolute;
	top: 24px;
	left: -25px;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #C8961B transparent transparent transparent;
	border-width: 70px 50px 0 50px;
}

#effectPaper1 {
	position: absolute;
	top: -5px;
	left: -27px;
	width: 10px;
	height: 85px;
	border-radius: 40%;
	border: 1px solid #000;
	border-color: transparent transparent #000  #000;
}

#effectPaper2 {
	position: absolute;
	top: -5px;
	right: -27px;
	width: 10px;
	height: 85px;
	border-radius: 100%;
	border: 1px solid #000;
	border-color: transparent transparent #000  #000;
	transform: rotate(180deg);
}

.anRollingPaper {
	animation: rollingPaper 500ms linear;
}

.anRollingPaperReverse {
	animation: rollingPaper 500ms linear reverse;
}

@keyframes rollingPaper {
	0% { border-color: transparent transparent #000  #000; }
	25% { border-color: transparent  transparent #000 transparent; }
	50% { border-color: #000 transparent transparent transparent; }
	75% { border-color: #000 transparent transparent #000; }
}
/* end paper */
main {
	position: relative;
	top: -170px;
	height: 380px;
	background-color: #f8f8f8;
	/*outline: 1px solid #999;*/
	box-shadow: 0 1px 3px 0 #000;
	overflow: hidden;
}

#box {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.headline {
	padding: 20px 0 0;
	text-align: center;
}

#footer {
	height: 380px;
	margin: 0 10px;
	text-align: center;
	background-color: #f8f8f8;
}

#empty {
	height: 0;
	margin: 0 10px;
	background-color: #999;
}

#css {
	margin: 0 10px;
	padding: 10px 0 100px;
}

#js {
	margin: 0 10px;
	padding: 10px 0 100px;
}

#c2d {
	height: 10px;
	margin: 0 10px;
	padding: 10px 0 100px;
	background-color: #eee;
}

#c3d {
	height: 10px;
	margin: 0 10px;
	padding: 10px 0 100px;
	background-color: #eee;
}