/* styles whole site */
body {
	margin: 0%;
	
	font-family: sans-serif;
	text-align: center;
}

/* styles all sections */ 
section {
	padding: 12px;
}

/* styles all paragraphs */
p {
	text-align: justify;
}

/* styles header */
header {
	background-color: #7dc242;
	width: 100%;
	position: fixed;
	z-index: 1;
	overflow: hidden;
}

h1 {
  font-family: 'Noto Sans Symbols', sans-serif;
}
/* styles links in topnav */
#topnav a {
  float: left;
  display: block;
  color: #000000;
  padding: 12px;
  padding-top: 20px;
  text-decoration: none;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
	text-align: center;
	height: 24px;

}

/* styles topnav hover */
#topnav a:hover {
  background-color: #ffffff;
}

/* hide topnav mobile icons while on desktop */
#topnav #hamburger-menu-icon, #topnav #close-menu-icon {
	display: none;
}

/* styles home section */
#home {
	/* push home down to avoid coverup by topnav */
	transform: translate(0%, 24px);
}

/* styles about section */
#about {
	float: left;
}

/* styles image in about section  */
#about img {
	max-width: 90%;
	float: right;
  padding: 30px;
  border: white;
  
}

/* styles gallery section */
#gallery {

}

/* styles contact section */
#contact {

}

/* styles name and email textbox of email contact form */
#name, #email {
	max-width: 35%;
	width: 340px;
}

/* styles message textbox of email contact form */
#message {
	max-width: 90%;
	width: 750px;
	max-height: 50%;
	height: 100px;
}

/* styles send email button of email contact form */
button {
	width: 50px;
	max-width: 25%;
}

/* styles socials section */
#socials {
	color: #fff;
	background-color: #0668b3;
}

/* styles images in socials section */
#socials img {
	width: 50px;
	padding: 0% 24px;
  padding-bottom: 35px;
  
}

/* styles footer */
footer {
	color: #000;
	padding: 12px;
}

/* styles images in footer */
footer img {
	width: 350px;
	padding: 0% 24px;
}

/* when screen is less than 600px, switch to mobile mode */
@media screen and (max-width: 600px) {
	#home img {
		width: 90%;
		padding: 0%;
	}
	
  #topnav a:not(:first-child) {
		display: none;
	}
  #topnav #hamburger-menu-icon {
    float: right;
    display: block;
  }

	#topnav #close-menu-icon {
    float: right;
    display: none;
  }

	#topnav.mobile {
		position: fixed;
	}
		
	#topnav.mobile #hamburger-menu-icon {
			display: none;
	    position: absolute;
	    right: 0;
	    top: 0;
	}

	#topnav.mobile #close-menu-icon {
			display: block;
			background-color: #fff;
	    position: absolute;
	    right: 0;
	    top: 0;
  }
		
	#topnav.mobile a {
	    float: none;
	    display: block;
	    text-align: left;
	}

	#socials img {
		width: 10%;
		padding: 0% 12px;
	}
	
	footer img {
		width: 90%;
		padding: 0%;
	}
}