#loading-wrapper {
	font-family: var(--chatting-font);
	margin-top:  2rem;
	}
#progress-bar-wrapper{
	position: relative;
	border: 3px solid #ccc;
	width: 100%;
	height: 2rem;
	border-radius: .25rem;
    overflow: hidden;
    margin-top: .5rem;
	}
#progress-bar{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background-color: var(--asu-maroon);
	}



#snake-selection-wrapper{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .25rem;
	margin: 3rem 0 3rem 0;
	}
#snake-selection-wrapper > div{
	width: 100%;
	border: .35rem solid transparent;
	border-radius: .75rem;
	cursor: pointer;
	padding: .25rem;
	max-width: 230px;
	text-align: center;
	}
#snake-selection-wrapper img{ display: block; }	
#snake-selection-wrapper > div:hover{ border-color: #ccc; }
#snake-selection-wrapper > div.active, #snake-selection-wrapper > div.active:hover{ border-color: var(--link); }
#snake-selection-wrapper .name {
	font-family: var(--chatting-font);
	color: var(--brown-text);
	font-weight: bold;
	line-height: 1.25rem;
	padding-bottom: .25rem;
	font-size: 1.1rem;
	line-height: 1.25rem;
	}
#snake-selection-wrapper > div *{ pointer-events: none; }

#level-progress-bar{
	display: grid;
	grid-template-columns: max-content auto;
	gap: .75rem;
	align-items: center;
	padding-bottom: 1rem;
	}
#level-progress-bar .label{ 
	color: var(--brown-text); 
	font-family: var(--chatting-font);
	font-weight: bold;
	}	
#level-progress-bar .bubble-wrapper{
	display: flex;
	gap: .75rem;
	}
#level-progress-bar .bubble{
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	outline: 4px solid transparent;
	position: relative;
	display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
    color: #fff;
	}
#level-progress-bar .bubble.active{ outline-color: var(--asu-orange); }	
#level-progress-bar .bubble.complete{ background-color:  var(--asu-maroon); }
#level-progress-bar .bubble:before{
	content: '';
    width: .75rem;
    height: 4px;
    background-color: #ccc;
    position: absolute;
    left: -.75rem;
    margin-top: -1px;
    top: 50%;
    z-index: -10;
	}
#level-progress-bar .bubble.complete:before, #level-progress-bar .bubble.active:before{ background-color: var(--asu-maroon); }		
#level-progress-bar .bubble:first-child:before{ width:0; } 





#snake-status-block{ 
	font-size: .95rem;
	display: grid; 
	gap: .75rem;
	grid-template-columns: max-content auto;
	align-items: center;
	padding-top: 1rem;
    padding-bottom: 1.5rem;
	}
#snake-status-block img{
	width: 6rem;
	height: 6rem;
	}
#snake-status-block .snake-type{ 
	font-weight: bold; 
	color: var(--brown-text);
    font-size: 1.1rem;
    font-family: var(--chatting-font);
    margin-bottom: .15rem;
	}
#snake-status-block .health-wrapper{ display: grid; }
#snake-status-block .health-block{
	display: grid;
	gap: .4rem;
	grid-template-columns: 1fr 2fr;
	align-items: center;
	}
#snake-status-block .bar-wrapper{
	position: relative;
	border: 3px solid #ccc;
	width: 100%;
	height: 1.25rem;
	border-radius: .25rem;
    overflow: hidden;
	}
#snake-status-block .bar{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	}
#snake-status-block .bar-label{ 
	font-weight: bold; 
	font-family: var(--chatting-font);
	}
#snake-status-block .health-block.energy .bar-wrapper { border-color: #cc7900; }
#snake-status-block .health-block.hydration .bar-wrapper { border-color: #0068b5;}

#snake-status-block .health-block.energy .bar-label { color: #cc7900; }
#snake-status-block .health-block.hydration .bar-label { color: #0068b5;}

#snake-status-block .health-block .bar { transition: width 2s ease-in-out; }

/* energy */
#snake-status-block .health-block.energy .bar{ background-color: #ffc533; }
#snake-status-block .health-block.energy .bar.low{ animation: lowEnergy .3s ease-in infinite alternate; }
@keyframes lowEnergy {
	0% { background-color: #ffc533; }
	100% { background-color: #ffe433; }
	}
#snake-status-block .health-block.energy .bar.extra-low{ animation: extraLowEnergy .3s ease-in infinite alternate; }
@keyframes extraLowEnergy {
	0% { background-color: #ff9d00; }
	100% { background-color: #ffeb33; }
	}

/* health */
#snake-status-block .health-block.hydration .bar{ background-color: #7dd1ff; }
#snake-status-block .health-block.hydration .bar.low{ animation: lowHydration .3s ease-in infinite alternate; }
@keyframes lowHydration {
	0% { background-color: #7dd1ff; }
	100% { background-color: #03a6ff; }
	}
#snake-status-block .health-block.hydration .bar.extra-low{ animation: extraLowHydration .3s ease-in infinite alternate; }
@keyframes extraLowHydration {
	0% { background-color: #7dd1ff; }
	100% { background-color: #03a6ff; }
	}

#snake-status-block .starting-bar{
	position: absolute;
	top: 0;
	height: 100%;
	margin-left: -1px;
	}
#snake-status-block .hydration .starting-bar{ border-right: 2px dotted #0068b5; }
#snake-status-block .energy .starting-bar{ border-right: 2px dotted #cc7900; }

#snake-status-block .offspring-health-status{
	font-weight: bold; 
	font-family: var(--chatting-font);
	color: var(--brown-text);
	}
#snake-status-block .offspring-health-status.poor{ color: #ea0000; }
#snake-status-block .offspring-health-status.average{ color: var(--asu-orange); }
#snake-status-block .offspring-health-status.great{ color: #1aab00; }
#snake-status-block .offspring-health-status > div{ display: inline-block; }


.story-content{
	text-align: center;
	background-color: #efd9b4;
	position: relative;
	padding: 1rem;
    margin: 2rem 0;
    color: var(--brown-text);
    font-size: 1.15rem;
    line-height: 1.75rem;
    font-family: var(--chatting-font);
	}
.story-content.left{ text-align: left; }	
.story-content p{ padding: .75rem 0; }	
.story-content ul{
	margin: .5rem 2rem .75rem 2rem;
    display: inline-block;
	}
.story-content ul + p{ padding-top: 1.25rem; }	
.story-content li{ 
	text-align: left; 
	line-height: 1.5rem;
	}	

.story-content:before{
	content: "";
	display: block;
	position: absolute;
	background-image: url('../images/borders/rock-border-top.svg');
	background-repeat: repeat-x;
    background-size: cover;
    height: 35px;
	top: -34px;
	width: 100%;
	left: 0;
	}
.story-content:after{
	content: "";
	display: block;
	position: absolute;
	background-image: url('../images/borders/rock-border-bottom.svg');
	background-repeat: repeat-x;
    background-size: cover;
	width: 100%;
	height: 35px;
	bottom: -34px;	
	left: 0;
	}		
.story-content + .button-wrapper{ margin-top: 4rem; }
h1 + .story-content{ margin-top: 3rem; }
.story-content + #additional-content > .toggle-box{ padding-top: .75rem; }
#additional-content > .toggle-box + .toggle-box{ padding-top: .25rem; }
#additional-content + .button-wrapper { margin-top: 2rem; }

img.story{
	margin: 3.5rem auto 0 auto;
	display: block;
	width: 100%;
	}

.caption-wrapper{
	margin: 3.5rem auto 0 auto;
	display: grid;
	align-items: center;
	max-width: 500px;
	}
.caption-wrapper img{ 
	border-radius: .75rem .75rem 0 0; 
	width: 100%;
	}	
.caption-wrapper .caption{
	border-radius: 0 0 .75rem .75rem;
	background-color: var(--pale-grey); 
	padding: .5rem 1rem;
	text-align: center;
	}

#additional-content + img.story, 
#additional-content + .caption-wrapper { margin-top: 1rem; }
img.story + .button-wrapper, 
.caption-wrapper + .button-wrapper { margin-top: 2rem; }
img.story + .story-content, 
.caption-wrapper + .story-content { margin-top: 3.5rem; }
#additional-content img.story, 
#additional-content .caption-wrapper { 
	margin-top: 1rem; 
	width: 100%;
	}
#additional-content img.story + p { margin-top: 1rem; } 

#prompt, #congrats{
	padding: .5rem 0;
    font-size: 1.4rem;
    font-weight: bold;
	}


#snake-impact{
	display: grid;
	justify-items: center;
	gap: .5rem;
	background-image: url('../images/borders/stick-border.svg');
	background-repeat: repeat-x;
    background-size: 13rem;
    background-position: top left;
    padding-top: 4rem;
    margin-top: 1rem;
	}
#snake-impact img{ width: 4rem; }



#choice-button-wrapper{
	background-image: url('../images/borders/stick-border.svg');
	background-repeat: repeat-x;
    background-size: 13rem;
    background-position: top left;
    padding-top: 4rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-width: 40%;
	gap: .5rem;
	}
#choice-button-wrapper > div{
	background-color: #debf8a;
	cursor: pointer;
	font-size: 1.5rem;
	border-radius: .5rem;
	font-weight: bold;
	padding: 1rem 1.5rem;
	}	
#choice-button-wrapper > div:hover{
	outline: .35rem solid transparent;
	outline-color: var(--brown-text);
	} 
#choice-button-wrapper.hidden{ display: none; }

#choice-feedback{
	margin: 3rem 0 3rem 0;
	font-size: 2.25rem;
	text-align: center;
	font-family: var(--special-font);
	line-height: .9;
	transform: scale(0);
	color: #c59566;
	}
#choice-feedback{ animation: scaleChoice 1s forwards; }	
@keyframes scaleChoice {
	0% { transform: scale(.5); }
	40% { transform: scale(1.25); }
	70% { transform: scale(.9); }
	100% { transform: scale(1); }
	}
#choice-feedback .positive{ color: #78c148; }
#choice-feedback .negative{ color: #f28172; }

#points-earned-feedback{
	display:flex; 
    align-items: center;
    gap: .5rem;
    font-weight: bold;
    justify-content: center;
    color: #5e574d;
    padding-bottom: 1rem;
	}
#points-earned-feedback img{ width: 2.5rem; }


#level-complete-feedback #score-section-wrapper{
	font-size: 1.4rem;
    font-weight: bold;
    background-image: url('../images/borders/stick-border.svg');
	background-repeat: repeat-x;
    background-size: 13rem;
    background-position: top left;
    padding-top: 5rem;
    margin-top: 1rem;
	}
#level-complete-feedback .high-score{ margin: 0; }
#level-complete-feedback .max-score-info{ 
	font-size: 1rem;
	font-weight:normal; 
	margin-top: .25rem;
	}     
#level-complete-feedback .high-score img{ width: 2.5rem; }    


#level-complete-feedback #badge-section-wrapper{
	background-image: url('../images/borders/stick-border.svg');
	background-repeat: repeat-x;
    background-size: 13rem;
    background-position: top left;
    padding-top: 4rem;
    margin-top: 1.5rem;
	}
#level-complete-feedback .badge-wrapper{
	display: flex;
	text-align: center;
    line-height: 1.15rem;
    flex-wrap: wrap;
	font-size: 1rem; 
	justify-content: center;
	margin: 1rem 0 0 0;
	gap: .5rem;
	}
#level-complete-feedback .badge-wrapper .badge{
	background-color: #fff;
	border-radius: .5rem;
	padding: 1.5rem 1rem; 
	width: 10rem;
	}
#level-complete-feedback .badge-wrapper img{ 
	width: 100%; 
	max-width: 9rem;
}	
#level-complete-feedback .badge-wrapper .title{ 
	font-weight:bold; 
	font-weight: bold;
    color: var(--brown-text);
    margin-top: .5rem;
	}
#level-complete-feedback .badge-wrapper .snake-type{ 
	color: #727272;
    padding-top: .15rem;
    font-size: .9rem;
    line-height: 1.15rem;
	}
#level-complete-feedback .badge-wrapper .points{
	padding-top: .25rem;
	font-weight: bold;
	color: #30a900;
	}

#level-complete-buttons{ margin-bottom: 1.5rem; }


.badge-list{
	display: grid;
	gap: 1rem;
	}
.badge-list .badge-wrapper{
	display: grid;
    grid-template-columns: max-content auto;
    gap: 1rem;
    align-items: center;
	}
.badge-list .badge-wrapper img{ width: 4.5rem; }	
.badge-list .badge-wrapper .title{ 
	font-weight:bold; 
	font-weight: bold;
    color: var(--brown-text);
    margin-top: .5rem;
    font-weight: bold;
	}
.badge-list .badge-wrapper .about{ line-height: 1rem; }	



@media print, (min-width:420px) {
	#snake-selection-wrapper > div{ border-radius: 1rem; }
	#snake-selection-wrapper .name {
		padding-bottom: .5rem;
		padding-top: 0;
		font-size: 1.15rem;
		}
		
	#snake-status-block{ 
		gap: 1rem; 
		font-size: 1rem;
		}
	#snake-status-block img{
		width: 7rem;
		height: 7rem;
		}
	
	#snake-status-block .offspring-health-status{ margin-bottom: .3rem; }
	#snake-status-block .health-wrapper{ gap: .25rem 2rem; }	
	#snake-status-block .health-block{ grid-template-columns: 5rem auto; }
	#snake-status-block .bar-wrapper{ height: 1.5rem; }
	
	#additional-content + img.story{ margin-top: 1.5rem; }

	.story-content{ 
		padding: 1.5rem; 
		margin: 2.5rem 0;
		}
	.story-content:before{ background-size: contain; }
	.story-content:after{ background-size: contain; }
	
	img.story{ max-width: 570px; }
	#prompt, #congrats{
		padding: 1rem 0; 
		line-height: 2.25rem;
		}

	#snake-impact{ 
		padding-top: 5rem; 
		margin-top: 2rem;
		grid-template-columns: auto auto;
        text-align: left;
        gap: 1rem;
		}
	#choice-feedback{ font-size: 3rem; }
	#choice-button-wrapper { 
		padding-top: 5rem; 
		gap: 1.5rem;
		}
	#choice-button-wrapper > div { min-width: 30%; }

	#level-complete-feedback #score-section-wrapper{ margin-top: 2rem; }
	#level-complete-feedback .high-score{ 
        display:flex; 
	    align-items: center;
	    gap: .5rem;
	    font-weight: bold;
	    justify-content: center;
	    margin: 1rem 0 0 0;
    	}

	#level-complete-feedback .badge-wrapper, .story-content .badge-wrapper{ gap: 1.5rem; }
	#level-complete-feedback .badge-wrapper .badge{ width: 12rem; }

}    


@media print, (min-width:580px) {
	img.story{ border-radius: .75rem; }
	#additional-content img.story {
	    margin-top: .5rem;
	    max-width: 570px;
		}	

	#snake-selection-wrapper{ 
		gap: 1rem; 
		margin: 4rem 3rem 2rem 3rem;
		}
	#snake-selection-wrapper > div{
		border: .5rem solid transparent;
		padding: .5rem;
		}
}

@media print, (min-width:650px) {

	#snake-status-block .health-wrapper{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr) ); }		
	#snake-status-block .health-block{ grid-template-columns: max-content auto; } 
	#snake-status-block .snake-type{ font-size: 1.2rem; }

}

@media print {

	#snake-selection-wrapper{ margin: 1rem 3rem; }


	#new-game .button-wrapper { display: none; }

	#snake-status-block img {
        width: 5rem;
        height: 5rem;
    }

    .badge-list .badge-wrapper img { width: 3.5rem; }



	.side-padding{ 
		padding-left: 0;
		padding-right:0; 
		}

	.story-content {
		padding: 0;
		margin-top: 0;
		background-color: transparent;
		font-size: 1rem;
		color: #000;
		text-align: left;
		margin: 0 0 1rem 0;
		line-height: 1.5rem;
		}
	.story-content:before, .story-content:after { 
		background-image: none; 
		height: 0;
		}
	img.story{ 
		margin-top: 1rem;
		margin-bottom: 1.5rem; 
		max-width: 350px;
		}

	img.story + .story-content, .caption-wrapper + .story-content { margin-top: 1rem; }
	h1 + .story-content { margin-top: 1rem; }

	#additional-content img.story, #additional-content .caption-wrapper { max-width: 350px; }

	.caption-wrapper { max-width: 350px; }
	.caption-wrapper .caption { padding: 0 1rem; }

	#choice-button-wrapper{
		background-image: none;
		padding-top: 1rem;
		margin: 0;
		}

	#choice-button-wrapper > div {
		font-size: 1.1rem;
		padding: .75rem;
		background-color: #efefef;
		text-align: center;
		}	
	#choice-feedback {
		font-size: 2rem;
		margin: 1rem 0 2rem 0;
		animation: none;
		transform: scale(1);
		}	

	#prompt, #congrats{ font-size: 1.2rem; }
	#congrats{ padding: 0; }
	
	#snake-impact {
		background-image: none;
		margin: 0;
		padding: 0;
		display: block;
		}	
	#snake-impact img{ display: none; }	

	#points-earned-feedback img { width: 1.5rem; }

	#level-complete-feedback #score-section-wrapper,
	#level-complete-feedback #badge-section-wrapper {
		background-image: none;
		margin: 0;
		padding: 0;
		}	

	#level-complete-feedback #score-section-wrapper{ font-size: 1rem; }

	#score-section-wrapper .high-score{
		font-size: 1rem;
		justify-content: left;
		}
	#score-section-wrapper .high-score img{ width: 1.5rem; }	

	#badge-section-wrapper .badge-wrapper{ 
		padding-bottom: 1rem;
		justify-content: start;
		gap: 1rem 1.5rem;
		}

	#level-complete-feedback .badge-wrapper .badge{
		display: grid;
		grid-template-columns: min-content auto;
		gap: 1rem .75rem;
		width: auto;
		text-align: left;
		padding: 0;
		max-width: 14rem;
		}	
	#level-complete-feedback .badge-wrapper img { width: 5rem; }

}