body{
	margin:0;
	min-height:100vh;
	background-image:url("Picture.png");
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

@media(max-width:600px){
	.icecream-grid{
		grid-template-columns:repeat(2,1fr);
		gap:20px;
	}
}

@font-face{
	font-family:"IceCream_CakeVF";
	src:url("IceCream_CakeVF.woff2")format("woff2");
}

.icecream-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:100px;
	width:85%;
	max-width:850px;
	box-sizing:border-box;
	margin:0 auto;
	padding:60px 5%;
	column-gap:0;
	row-gap:180px;
	justify-items: center;
	align-items:center;
	
}

.icecream-grid span{
	font-family:"IceCream_CakeVF";
	color:#DDBFE6;
	background-color:transparent;
	line-height: 1;
	font-size:clamp(80px,8vw,100px);
	transform:rotate(0deg);
	text-align: left;
	animation:icecream-to-cake 3.5s ease-in-out infinite alternate;
	display:inline-block;
	cursor:pointer;
	transition:scale 0.5s ease,
		opacity 0.5s ease;
	position:rlative;
}

@media(max-width:600px){
	.icecream-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
		width:90%;
		gap:180px 30px;
	}
}
.icecream-grid span:hover{
	scale:6;
	opacity:1;
	color:#B89CEB;
	z-index:10;
}

.icecream-grid span:active{
	color:#DDBFE6;
	scale:4;

}
@keyframes icecream-to-cake{
	0%{
		font-variation-settings: "SHAP" 0, "CAKE" 0;
		animation-timing-function:ease-in-out;
	}
	56%{
		font-variation-settings: "SHAP" 300, "CAKE" 0;
		animation-timing-function: cubic-bezier(.17,.67,.83,.67);
	}
	100%{
		font-variation-settings: "SHAP" 300,"CAKE" 300;
	}
}