:root {
  	--max-width: 850px;
	}

h1{ font-size: 2.75rem; }

/* INNER WRAPPER -------- */ 	
#inner-wrapper{
	margin: 4rem auto 0 auto;
	max-width: var(--max-width);
	}	
ul.inline-menu {
	padding: 1rem 0 .5rem 0;
	}	
ul.inline-menu li{
	margin: .25rem 0;
	}
	
li {
    padding: 0.35rem 0;
	}

#header {
    max-width: var(--max-width);
    margin: 0 auto;
	}
#header-icon-wrapper{
	grid-gap: .65rem;
	}

/* adds hover animation */
.scale-hover{
	cursor: pointer;
	transition: transform .25s ease-in-out;
	}
.scale-hover:hover{ transform: scale(1.5); }	



.img-right-wrapper.small>div:nth-child(2) { width: 100%; }
.img-right-wrapper.medium>div:nth-child(2)	{ width: 100%; }

.img-right-wrapper.small img{
    width: 12rem;
    justify-self: center;
	}


.img-center-wrapper{
	padding: 1rem 5%;
	}	 
.img-center-wrapper.medium img{
	max-width: 35rem;
    margin: 0 auto;
    text-align: center;
    display: block;
	}


.toggle-box .toggle-content-wrapper{
	padding: 1.5rem;
	}
.toggle-title{
	padding: 1.25rem 1.5rem;
	}	
.toggle-title.icon{
	position: relative;
	padding-left: 4.5rem;
	}
.toggle-title.icon img{
	width: 2.5rem;
    position: absolute;
    left: 1rem;
    top: .9rem;
    display: block;
	}


button { 
	transition: transform .25s ease-in-out; 
	min-width: 9rem;
	}
button.large{ width: auto; }


/* TOP MESSAGE BOXES ----------------- */ 
.top-message-wrapper{
	padding: 2rem;
	border-radius: 1rem;
	margin-bottom: 1rem;
	}

/* BACK TO TOP ------------------ */ 	
#back-to-top{
	margin-bottom: 1rem;
	}	


/* PAGE SPECIFIC STYLES ---------------------- */

/* HOME PAGE -------------------------------- */
#home-title{
	font-size: 6rem;
	line-height: 5rem;
	}
.banner{
	}
.main-icons > div{
	width: 190px;
	}


/* PLAY MENU -------------------------------- */

#saved-games-wrapper{
	grid-gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    }



video{ max-width: 500px; }
audio{ max-width: 32rem; }

@media all and (min-width:580px) {

	/* RIGHT SIDE IMAGES */ 
	.img-right-wrapper{
		padding: 0;
		grid-gap: 6%;
		grid-template-columns: auto min-content;
		}
	.img-right-wrapper img{
		width: 20rem;
		padding: 0;
		}	
	.img-right-wrapper.medium img{
	    width: 12rem;
	    justify-self: center;
		}		
	.img-right-wrapper>div:first-child{ order: initial; }
	.img-right-wrapper>div:nth-child(2){ 
		align-self: center;
		order: initial; 
		}

}    

@media (hover: hover) {
	button:hover{ 
	transform: scale(1.15);
	z-index: 100;
	} 
}