@charset "utf-8";
/* CSS Document */

body {
    margin:0 auto;
	width:960px;
	font-family: Zen Maru Gothic;
  color: rebeccapurple; 
}
.wrapper{
	background: linear-gradient(
	90deg,
        rgba(235, 249, 162, 1) 0%,
        rgba(184, 253, 232, 1) 10%,
        rgba(156, 233, 243, 1) 30%,
        rgba(211, 171, 255, 1) 60%,
        rgba(248, 215, 226, 1) 80%,
        rgba(235, 249, 162, 1) 100%);
	height: 200vh;
	overflow: hidden;
	max-width: 960px;
	max-height: 1300px;
	margin: 0 auto
}


#P1{
    transform: translate(0%, 0%);
	position:absolute;
	z-index:4;
    pointer-events: none;}

#P2{
	transform: translate(0%, 0%);
    position:absolute;
	z-index:3;
	pointer-events: none;
}

#P3{
	transform: translate(0%, -5%);
    position:absolute;
	z-index:6;
	pointer-events: none;
}

#P4{
	width:500px;
	height:700px;
    position:absolute;
	transform: translate(110%, 30%);
	z-index:7;
	pointer-events: none;
}

.container
{
display: block;
margin: 0;
width: 400px;
height: 200px;
position:relative;z-index: 5;
top:650px;
	
}


#btn01{
position:absolute;	
left:-120px;
top:-280px;
background-position: left;		
}

#btn02{
position:absolute;	
left:-90px;
top:-180px;
}

#btn03{
position:absolute;	
left:-60px;
top:-80px;	
}

#btn04{
position:absolute;	
left:-30px;
top:20px;
}





.title h1{
	position: absolute;z-index:8;
	transform: translate(10%, 930%);
	font-family: "Bauhaus 93";
	font-size: 50px
}

#P5{width:400px;
	height:300px;
    position:absolute;
	transform: translate(160%, -50%)
	rotate(20deg);
	z-index:9;
	pointer-events: none;
}

#P6{
    position:absolute;
	transform: translate(-30%, 80%)
	rotate(-20deg);
	z-index:4;
	overflow: hidden;
	pointer-events: none;	
}

#P7{
    position:absolute;
	transform: translate(490%, 590%)
	rotate(50deg);
	z-index:9;
	pointer-events: none;
}

#P8{
    position:absolute;
	transform: translate(240%, 420%)
	rotate(20deg);
	z-index:9;
	pointer-events: none;
}

#P9{
    position:absolute;
	transform: translate(60%, 120%)
	rotate(20deg);
	z-index:4;
	pointer-events: none;
}

.box{
	transform: translate(-30%, 20%);
	width:290px;
	height:440px;
	position:relative;z-index:4;
	background-color: #F8F4ED;
	border:10px solid #FAB9F9;
	overflow:scroll;
	top:460px;
	left:580px;
}
.box h1
{
	transform: translate(10%, -40%);
    font-family: "Bauhaus 93";
	font-size: 30px}

.box img{
	align-items: center
}

.box2{
	transform: translate(-120%, -65%);
	width:460px;
	height:250px;
	position:relative;z-index:4;
	background-color: #F8F4ED;
	border:10px solid #FAB9F9;
	overflow:hidden;
	top:460px;
	left:575px;
}
.box3{
	transform: translate(-57%, -135%);
	width:960px;
	height:100px;
	position:relative;z-index:4;
	background-color: plum;
	overflow:hidden;
	top:460px;
	left:550px;
	padding:10px;
}
.box3 p{
	line-height: 3px
}