@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap');

body{
	font-family: georgia;
	font-size: 16px;
	color: midnightblue;
}

header{
	background-color: black;
	height: 60px;
	padding-left: 10px;
}

header h1{
	font-family: 'Metal Mania', cursive;
	font-size: 30px;
	color: mediumseagreen;
	line-height: 60px;
}

nav{
	background-color: lemonchiffon;
}

.validation{
	color:red;
	display: inline;	
}

nav li{
	display: inline;
	list-style: none;
}

nav a{
	display: inline-block;
	padding: 10px;
	color: blue;
	font-size: 
}

h1{
	color: red;
	font-size: 140%;
	font-weight: bold;
	margin-bottom: 20px;
}

p{
	line-height: 24px;
	margin-bottom: 12px;
	margin-top: 6px;
	font-size: 20px;
}
footer{
	background-color: steelblue;
	color: whitesmoke;
	font-size: 85%;
	padding: 10px;
}

main{
	float: left;
	box-sizing: border-box;
	padding: 20px;
	width: 70%;
}

aside{
	float:left;
	box-sizing: border-box;
	padding: 20px;
	width: 30%;
}

#content{
	overflow: auto;
}

h2{
	margin:10px;
}

h3{
	margin:10px;
}

aside ul li{
	font-size: 32px;
	color: mediumvioletred;
	padding-top: 10px;
}

img{
	width: 100%;
}

#mobile-nav-button{
	position:absolute;
	top: 0px;
	right:0px;
	width: 44px;
	height: 44px;
	font-weight: bold;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	display: none;
}

label{
    display: block;
    padding-top:10px;
    font-weight: bold;
    color: midnightblue;
}
input[type=text]{
	display: inline;
	font-weight: normal;
	width: 300px;
}
textarea{
  width: 300px;
  height:80px;
}

pre{
	font-weight: bold;
	size: 16px;
	border: 2px solid black;
	display: inline-block;
	padding: 4px;
}

input[type=button]{
  border:2px solid gray;
  background-color: #333333;
  border-radius: 4px;
  padding:10px;
  color:gray;
  font-weight: bold;
}

#image-gallery{
  width:380px;
}

#image-gallery #mainImg{
  width:100%;
  border: 2px solid #333333;
 } 


@media all and (max-width : 800px) {

	main, aside{
		float: none;
		width: 100%;
	}

	#mobile-nav-button{
		display: block;
		color: mediumseagreen;
	}

	#main-nav{
		position: absolute;
		top: 60px;
		height: 100%;
		width: 0;
		transition: width .5s;
		z-index: 100;
	}

	#main-nav li{
		overflow: hidden;
	}

	#main-nav.show{
		width: 200px;
	}

	#main-nav ul li{
		display: block;
	}
}