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


/* SMALL.CSS --------------------------------------------------------- */ 	

/* INNER WRAPPER -------- */ 	
#inner-wrapper{
	max-width: var(--max-width);
	margin: 4rem auto 0 auto;
	}

/* HEADER ----------- */ 	
#header{
	max-width: var(--max-width);
	margin: 0 auto;
	}	
li {
    padding: 0.25rem 0;
}

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


/* RIGHT SIDE IMAGES */ 
.img-right-wrapper{
	padding: 0;
	grid-gap: 3.5rem;
	grid-template-columns: 1fr 1fr;
	}
.img-right-wrapper.small{
	grid-template-columns: 4fr 1fr;
	}	
.img-right-wrapper.medium{
	grid-template-columns: 2fr 1fr;
	}	
.img-right-wrapper>div:first-child{ order: initial; }
.img-right-wrapper>div:nth-child(2){ 
	align-self: center;
	order: initial; 
	}
.img-right-wrapper.small>div:nth-child(2), .img-right-wrapper.medium>div:nth-child(2) {
	width: 100%;
	}	
.img-right-wrapper.small img, .img-right-wrapper.medium img{
    width: 100%;
    justify-self: center;
	margin: 0 auto;
	}
h1 + .img-right-wrapper{
	margin-top: 2.5rem;
	}	
h2 {
	font-size:  1.8rem;
	}	
h2+h3{
	padding-top: 2rem;
	}
h3+.img-right-wrapper{
	padding-top: 0;
	}
p + h2, ul + h2, .img-right-wrapper + h2{ padding-top: 2.5rem; }	
p + h2 {
	padding-top: 3rem;
	}		
/* center images */
.img-center-wrapper{
	padding: 1rem 3rem;
	}	 
.img-center-wrapper.medium{
	width: 70%;
	margin: 0 auto;
	}

button { 
	transition: transform .25s ease-in-out; 
	min-width: 9rem;
	}
button:hover{ 
	transform: scale(1.15);
	z-index: 100;
	} 
.button-wrapper{ padding-top: 3rem; }

.toggle-box .toggle-content-wrapper{
	padding: 2rem 1.5rem;
	}
.toggle-title{
	padding: 1.25rem 1.5rem;
	}

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

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


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

/* HOME PAGE -------------------------------- */
#home-title{
	font-size: 6rem;
	}
.banner{
	padding: 1.5rem;
	}
.main-icons > div{
	width: 200px;
	}