@font-face {
	font-family: "Knicknack";
	/* src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf"); */
	src: url("../assets/fonts/KnicknackVariableGX.ttf");
	font-weight: 200 700;
}

#mainMenuLogo {
	margin: 0;
	font-size: 150px;
	position: relative;
	font-weight: 400;
	font-family: "Knicknack";
	/* font-variation-settings: "INLN" 400, "SWRM" 1000; */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 30%;
	background-repeat: repeat;
	text-shadow: 2px 2px 5px rgba(42, 67, 8, 0.4);
	/* -webkit-animation: grow 3s linear infinite alternate;
			animation: grow 3s linear infinite alternate; */
	/* animation: fun 3s ease-in-out infinite alternate; */
	position: absolute;
	top: -185px;

	pointer-events: none;
}

#mainMenuLogo:before {
	text-shadow: 1px 1px 2px rgb(140 239 7 / 62%), -1px 1px 2px rgb(8 142 110 / 50%), -1px -1px 2px rgb(13 138 76 / 50%), 1px -1px 2px rgb(138 160 43 / 50%), 3px 3px 20px rgb(0 0 0 / 62%);
}
#mainMenuLogo:after {
	color: #421F00;
	/* font-variation-settings: "INLN" 0; */
}

@keyframes fun {
	0% {
		font-variation-settings: "wght" 500, "wdth" 10;
	}

	100% {
		font-variation-settings: "wght" 900, "wdth" 1000;
	}
}
  
/* @-webkit-keyframes grow {
	0% {
		font-variation-settings: "INLN" 400, "SWRM" 1000;
	}
	100% {
		font-variation-settings: "INLN" 400, "SWRM" 0;
	}
}

@keyframes grow {
	0% {
		font-variation-settings: "INLN" 400, "SWRM" 1000;
	}
	100% {
		font-variation-settings: "INLN" 400, "SWRM" 0;
	}
} */
  
  #mainMenuLogo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	letter-spacing: 0.6rem;
  }
  #mainMenuLogo:after, #mainMenuLogo:before {
	content: attr(data-text);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 0;
	position: absolute;
	left: 0;
	top: 0;
}