.background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
}
.diy-text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 5.5vw;
}
@media(min-aspect-ratio:4/3){
	.diy-text{
		font-size: 7.5vh;
	}
}
.bg-1{
	background-size: 100% 100%;
}
.eins-1{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	padding: 1.5%;
	font-size: 3.3vw;
	font-family: andika;
	color: white;
	background-color: #7c96dd;
	text-align: center;
}

@media(min-aspect-ratio:4/3){
	.eins-1{
		font-size: 4.5vh;
	}
}
.option-block-1{
	position: absolute;
	width: 80%;
	height: 23%;
	left: 10%;
	bottom: 35%;
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: space-around;
	font-size: 2vw;
}
@media(min-aspect-ratio:4/3){
	.option-block-1{
		font-size: 2.8vh;
	}
}
.option-item-1{
	position: relative;
	cursor: pointer;
	height: 100%;
	width: 13.5%;
}
.option-item-1:hover{
	transform-origin: 50% 100%;
	transform: scale(1.05);
}
.option-item-1>img{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
}
.option-item-1>p{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: white;
	left: 0%;
	width: 100%;
}
.go-down{
	animation: go-down 0.7s ease-in 0.3s both;
	-webkit-animation: go-down 0.7s ease-in 0.3s both;
}
@-webkit-keyframes
go-down {
	100% {top: 300%;}
}
@keyframes
go-down {
	100% {top: 300%;}
}

.go-up{
	animation: go-up 1.5s linear  both, stuck-up 3s ease-in-out  1.5s infinite;
	-webkit-animation: go-up 1.5s linear  both, stuck-up 3s ease-in-out  1.5s infinite;
}
@-webkit-keyframes
go-up {
	20% {transform: translate(2.5%, -40%) rotateY(-10deg);}
	60% {transform: translate(0.5%, -90%) rotateY(-5deg);}
	100% {transform: translate(0%, -125%) rotateY(0deg);}
}
@keyframes
go-up {
	20% {transform: translate(2.5%, -40%) rotateY(-10deg);}
	/*40% {transform: translate(-1%, -65%) rotateY(7deg);}*/
	60% {transform: translate(0.5%, -90%) rotateY(-5deg);}
	/*80% {transform: translate(-0.5%, -110%) rotateY(2deg);}*/
	100% {transform: translate(0%, -125%) rotateY(0deg);}
}
@-webkit-keyframes
stuck-up{
	0% {transform: translate(0%, -125%) rotateY(0deg);}
	50% {transform: translate(0%, -110%) rotateY(-3deg);}
	100% {transform: translate(0%, -125%) rotateY(0deg);}
}
@keyframes
stuck-up{
	0% {transform: translate(0%, -125%) rotateY(0deg);}
	50% {transform: translate(0%, -115%) rotateY(-3deg);}
	100% {transform: translate(0%, -125%) rotateY(0deg);}
}
.practice-more{
	display: none;
	position: absolute;
	bottom: 12.5%;
	left: 50%;
	transform: translate(-50%, 0%);
	font-size: 2.5vw;
	background-color: #39e5b7;
	color: white;
	padding: 1%;
	border-radius: 2vmin;
	font-family: sniglet;
	border: 0.5vmin solid #2db691;
	z-index: 10;
	cursor: pointer;
}
@media(min-aspect-ratio:4/3){
	.practice-more{
		font-size: 3.3vh;
	}
}
.practice-more:hover{
	border-color: #3cdfb2;
	background-color: #64ffd0;
	color: #434343;
}