*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
	background-color: #08FFFF;
}

html,
body{
	height:100%;
	overflow: hidden;
} /*  스크롤 방지*/

.coconut{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 기준점 바꾸기*/
	width: 250px;
	height: 500px;
}



.straw{
	position: absolute;
	z-index: 3;
	top:0%;
	left: 42%; /*middleㄹ로 맞추기 위해서는 기준점이 왼쪽임을 고려해서 마이너스 */
	width:4%;
	height: 40%;
	background-image: linear-gradient(to bottom right, #FF0074 48%, white 48%);
    background-size: 30px 30px;
    animation: fall 1s ease-in-out forwards;

}
 @keyframes fall {
      0% {
        top: 0px;
      }
      100% {
        top: 50px;
      }
    }


.inside{
	position: absolute;
	z-index: 2;
	bottom: 0;
	left:0;
	width: 90%;
	height: 50%;
	background-image: radial-gradient(#D8CCAB, #DAD7AB, #DAD7AB, white, #FFFBC4, #302710);
	border-radius: 50%;
	transition: .5s ;
	animation: breath 1s infinite alternate;
}

.inside2{
	position: absolute;
	z-index: 1;
	bottom: 0;
	left:0;
	width: 100%;
	height: 50%;
	background-image: radial-gradient(#DAD7AB,#302710);
	border-radius: 50%;
	transition: .5s ;
	animation: breath 1s infinite alternate;
}