@import url('https://fonts.googleapis.com/css2?family=Bonbon&family=Delius+Unicase:wght@400;700&family=Nanum+Pen+Script&family=Noto+Sans+Tagalog&display=swap');

@keyframes homeBar {
	from {transform: translateY(-15px)}
	to {transform: translateY(0px)}
}


@keyframes bounce {
	0%,100% {
	  transform: translateY(0px);
}
	50%{
	  transform: translateY(-10px);
}

}


body{
	background: #e8dfc4;
}



h1 {
	font-family: "Bonbon", cursive;
	color: #363636;
	background: #9ed0df;
	padding: 28px 14px;	
	text-align: center;
	font-size: 40px;
} 


h2 {
	font-family: "Delius Unicase", cursive;
	font-weight: 700;
	text-align: center;
	color: #416e98;
	margin: 10px;
}

h3 {
	font-family: "Delius Unicase", cursive;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	color: #416e98;
	margin: 10px;
}

a{
	text-decoration: none;
	list-style: none;
}

p{
	padding: 0;
	margin: 30px;
	font-family: "Nanum Pen Script", cursive;
	font-size: 24px;
	color: #363636;
}

iframe{
	margin: 0 auto;
	display: block;
}

.bounce-text span{	
	position: relative;
	font-family: "Bonbon", cursive;
	color: #363636;
	justify-content: center;
	display: inline-block;
	transform: translate(-50%, -50%);
		animation: bounce 0.85s ease-in infinite alternate;
}

.bounce-text span:nth-child(1){
	animation-delay: 0.1s;
}
.bounce-text span:nth-child(2){
	animation-delay: 0.2s;
}
.bounce-text span:nth-child(3){
	animation-delay: 0.3s;
}
.bounce-text span:nth-child(4){
	animation-delay: 0.4s;
}
.bounce-text span:nth-child(5){
	animation-delay: 0.5s;
}
.bounce-text span:nth-child(6){
	animation-delay: 0.6s;
}
.bounce-text span:nth-child(7){
	animation-delay: 0.7s;
}
.bounce-text span:nth-child(8){
	animation-delay: 0.8s;
}
.bounce-text span:nth-child(9){
	animation-delay: 0.9s;
}
.bounce-text span:nth-child(10){
	animation-delay: 1s;
}
.bounce-text span:nth-child(11){
	animation-delay: 1.1s;
}
.bounce-text span:nth-child(12){
	animation-delay: 1.2s;
}
.bounce-text span:nth-child(13){
	animation-delay: 1.3s;
}



*{
	padding: 0;
	margin: 0;
	font-family: "Nanum Pen Script", cursive;
	color: #363636;
}


.menu-bar{
/*	border: 50px solid transparent; 
	border-image: url('frillborder.png');
	border-image-repeat: round;
	border-image-slice: 50;
	border-image-outset: 0; */
	
}


ul{
	list-style: none;
	background: #9ed0df;
	text-align: center;
	animation-name: homeBar;
/*	animation-duration: 1s; */

}

ul li{
	display: inline-block;
	position: relative;
}

ul li a {
	display: block;
	padding: 12px 16px;
	color: #363636;
	text-align: center;
	font-size: 22px;
}

ul li ul.dropdown li {
	display: block;
}

ul li ul.dropdown{
	width: 100%;
	background: #9ed0df;
	position: absolute;
	z-index: 999;
	display: none;
}

ul li a:hover{
	background-color: #8cbecb;
}

ul li:hover ul.dropdown{
	display: block;
}

.container{
	width: 75%;
	margin: auto;
	border: 20px solid #fff7e1;
/*	border-radius: 1rem; */
	background: #fff7e1;

}

.insidegrid {
	margin: auto;
	padding: 20px;
/*	border: 1px solid #fff7e1;
	border-radius: 1rem; */
	background: #fff7e1;
	display: grid;
	grid-template-columns: 50% 23.24% 23.24%;
	grid-template-rows: repeat(6, 1fr) 1fr 1fr / 2fr 2fr;
	grid-gap: 20px;

}


.grid-item1{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 4;
	border: 5px dashed #363636;
	background: #fff7e1;
}

.grid-item1 .spiralzfloat-left{
	float: left;
	margin: 10px;
	border: 15px solid #9ed0df;
	border-radius: 25%;
}

.grid-item2{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row: 1;
	text-align: center;
	border: 5px dashed #363636;
	background: #fff7e1;

}

.grid-item3{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row: 2;
	border: 5px dashed #363636;
	background: #fff7e1;

}

.grid-item6{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row: 3;
	border: 5px dashed #363636;
	background: #fff7e1;

}

.grid-item4{
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row: 4;
	border: 5px dashed #363636;
	background: #fff7e1;
	text-align: center;
}

.grid-item4 .pixelfloat-1{
	float: middle;
	margin: 10px;
/*	border: 15px solid #9ed0df;
	border-radius: 25%; */
}

.grid-item4 .pixelfloat-2{
	float: middle;
	margin: 10px;
/*	border: 15px solid #9ed0df;
	border-radius: 25%; */
}

.grid-item5{
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row: 5;
	border: 5px dashed #363636;
	background: #fff7e1;
	text-align: center;
}