/* ul of horizontal nav bar */
ul#navbarlist{
    /* why is this no longer at the top? */
    float: right;
    position: fixed;
    top: 0;
    right: 0;
    display: inline-block;
    list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #f6e4b6;
	border: 0;
	height: 5em;
	--navbarheight: 5em;
}
ul#navbarlist .currentpage{
	background-color: #35605A;
}
ul#navbarlist li {
    float: left;
    background-color: #3AB64B;
    }


/* clickable link area of each text item in nav bar list */
ul#navbarlist li a {
    top: 0;
    border: 0;
    border-left: 3px solid #f6e4b6;
    
    display: block;
    
    color: white;
	text-align: center;
	
    padding: calc(calc(var(--navbarheight) - 3em) / 2);
    padding-left: 2em;
    padding-right: 2em;
    
	text-decoration: none;
	font-size:1.5em;
		
}

#horizontalnav img {
	background-color: #f6e4b6;
	position: relative; 
	left: 0; 
	top: 0;
	display: inline; 
	padding: calc(1em / 4);
	margin: 0; 
	float: left;
	padding-right: 0;
	height: var(--navbarheight); 
	width:  calc(4.5em * calc(1146 / 314)); 
	border:0;
       box-sizing: border-box;	
}

/* change color of text on hover */
ul#navbarlist li a:hover{
/* on hover on navbar */
    background-color: #35CE8D;
    color: white;
}

/* div for horizontal nav bar */
#horizontalnav{
	position: fixed;
	
	width: 100%;
	top: 0;
	left: 0;
	height: 5em;
	display: block;
	background-color: #f6e4b6;
	z-index: 100;
}
@media screen and (min-width: 650px) and (max-width: 1300px) {
   
#horizontalnav {
font-size: 0.5em;
}
}

@media screen and (max-width: 650px) {
   
   ul#navbarlist { display: none }
   ul#navbarlist li{ display: none }
   ul#navbarlist li a{ display: none }
#horizontalnav img{ position: relative; height: 100%; left: calc(calc(100vw - calc(5em * calc(1146 / 314))) / 2)}
#spacer{
height: calc(calc(100vw * calc( 314 / 1146)) * 0.5);
}
}
#navtoggle {
position: fixed;
left: 1%;
top: 2em;

}
#spansquare{
	background-color: none;
}
ul#navmenu{
	
height: auto;
top: 0;
bottom: 0;
padding: 50px;
padding-top: 250px;
margin: -200px 0 0 -50px;
}
@media screen and (min-width: 650px) {
    #navtoggle{ display: none}
    #spansquare{ display: none}
    #navmenu{ display: none}
    #navtoggle span{ display: none}
    nav{ display: none }

}


#paypalbutton {
	background-color: #3AB64B;
    color: white;
    border-radius: 20px;
    width: 30%;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    position: relative;	
	height: auto;
	text-align: center;
	z-index: 502;
}

#paypalbutton:hover{
    background-color: #35CE8D;
}

@media screen and (max-width: 650px) {
	#paypalbutton{
		width: 80%;
	}
}
@media screen and (min-width:650px) and (max-width:1300px){
	#paypalbutton{
		width: 60%;
	}
}
/* the list item in the nav bar corresponding to the current page has this class to make the background a different colour */