:root {
	--background-hightlight-color: #51e656;
	--background-color: #35af39;
	
	--text-color: #0089CD;
	
	--title-color: #FFAB0C;
	--title-shadow-color: #224C69;
	
	--bubble-color: #EFEDE7;
}


@font-face {
	font-family: "BadComic";
	src: url(fonts/bad-comic-regular.woff2);
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: "BadComic";
	src: url(fonts/bad-comic-italic.woff2);
	font-weight: normal;
	font-style: italic;
}


/* Animations -------------------------------------------------------------------------------- */

@keyframes swaying {
	0%		{ transform:rotate(-2deg); }
	50%		{ transform:rotate(2deg); }
	100%	{ transform:rotate(-2deg); }
}


/* Containers -------------------------------------------------------------------------------- */

body {
	font-family: "BadComic";
	font-size: 1.2rem;
	
	color: var(--text-color);
	/* text-shadow: 0.1em 0.1em var(--text-shadow-color); */
	
	background-color: var(--background-color);
	background: url(images/background.png) repeat;
}


.content {
	width: 480px;
	
	margin: 0 auto;
	padding: min(5em, 8%);
	
	text-align: center;
}


.bubble {
	padding: 32px;
	
	/* background-color: var(--bubble-color); */
	
	border-image-source: url(images/svg/bubble.svg);
	border-image-repeat: stretch;
	border-image-slice: 10 10 10 10 fill;
	border-image-width: 16px;
	
	/* border-radius: 16px; */
}


.pfp {
	width: 128px;
	height: 128px;
	max-width: 128px;
	max-height: 128px;
	
	margin: 0 auto;
	
	background-image: url(images/bon_pfp.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	
	border-radius: 50% 50% 50% 50%;
}


.bon-dancing {
	width: 16em;
	height: 16em;
	max-width: 16em;
	max-height: 16em;
	
	margin: 0 auto;
	
	background-image: url(images/bon.png);
	background-repeat: no-repeat;
	background-size: contain;
	
	animation: swaying 4.0s infinite;
	transform-origin: center;
}