/* ~~~CSS Stylesheet for Homepage Elements~~~ *//*------------------------ PAGE SETTINGS ------------------------*/
.canvas > .main {
	justify-content: center;	
	max-width: var(--element-xxl);	
}

.oliviafloatbox {	
	min-width: var(--element-mid);
	padding: var(--spacing-lrg-rem);	
}		

.speechfloat  {		
	display: flex;		
	position:relative;		
	align-items: flex-start;		
	justify-content: center;		
	background-image: url("../images/graphics/speech-bubble.png");		
	background-repeat: no-repeat;		
	background-position: top;		
	width: 160px;		
	height: 160px;		
	margin-left: auto;		
	margin-right: auto;		
	animation: falling 5s 
	infinite alternate-reverse;	
}		

.speechtext {		
	display: flex;		
	justify-content: center;		
	align-items: center;		
	margin: 8px;		
	text-align: center;		
	width: 145px;		
	height: 125px;		
	overflow: hidden;	
}		

.oliviafloat{		
	display: flex;		
	position:relative;		
	justify-content: center;		
	background-image: url("../images/graphics/olivia-on-rock.png");		
	background-repeat: no-repeat;		
	background-position: center;		
	width: 160px;		
	height: 160px;		
	margin-left: auto;		
	margin-right: auto;		
	transition: transform 0.1s;		
	animation: falling 5s infinite alternate;
}	

.oliviafloat:hover{		
	animation: shake 0.4s;	
}		

@keyframes 
shake {	0% { transform: translateX(0); }		20% { transform: translateX(-8px); rotate: 2deg;}		40% { transform: translateX(8px); rotate: -3deg;}		60% { transform: translateX(-8px); rotate: 3deg;}		80% { transform: translateX(8px); rotate: -3deg;}		100% { transform: translateX(0); rotate: 4deg;}	}