@font-face {
  font-family: "MeuMenu";
  src: url("../fonts/menu.woff?kwg5nn") format('woff');
}

[class^="icon-"], [class*="icon-"] {
  margin-right: 3px;
  font-family: "Meumenu";
  font-style: normal;
}

.icon-fogar::before {
  content: "\e900";
}

body {
	font-family: verdana;
	font-size:16px;
 }

body * {
	border-radius: 10px;
}

header {
	display:flex;
	flex-direction:column;
	background-color: lightblue;
	justify-content: space-around;
	align-items:center;
	min-width: 900px;
}

header h2 {
	font-style: italic;
}

nav {
	grid-area:nav;
	display:flex;
	flex-flow: column wrap;
	padding-right: 150px;
	gap: 5px;
	height: 200px;
	color:white;
}

nav div {
	text-align: center;
	background-color:#048c4c;
	border-radius:5px;
	height:30px;
	width: 150px;
	padding: 5px 8px;
}

nav h3 {
	display:inline;
}

nav a {
	color:white;
	text-decoration: none;
}

nav div:hover {
	cursor:pointer;
	background-color:#8c8c8d;
}

nav a:active {
	background-color: #275f31;
	color:white;
}

main {
	margin:auto;
	display:grid;
	grid-column-gap: 10px;
	background-color: #275f31;
	gap:10px;
	padding:5px;
}

article.actividade {
	background-color: lightblue;
	margin:30px;
	padding:15px;
}

article.actividade h1 {
	font-size: 28px;
}

.resultado {
	font-size: 18px;
}

article.actividade img {
	height: 300px;
	width:auto;
	min-width: 200px;
	max-width:100%;
	border:1px solid white;
	box-shadow: 2px 2px 2px 2px #000000;
	display: block;
    margin-left: auto;
    margin-right: auto
}

footer {
	margin:0px;
	display:flex;
	justify-content: space-around;
	color:white;
	background-color: #275f31;
	height:70px;
	flex-flow:column;
	align-items: center;
}

@media (resolution: 72dpi)

@media screen and (max-width: 800px) {
	body {
		grid-template-areas: 
		"header header"
		"nav nav"
		"main aside"
		"footer footer";
		grid-template-columns: 1fr 25%;
	}

	main {
		grid-template-areas: 
		"img1 img2"
		"img3 img4"
		"img5 img6";
	}

	nav {
		flex-flow: row;
	}

	aside input#enviar {
	font-size: 100%;
}

	footer {
		height:70px;
	}
}

@media screen and (max-width: 360px) {

	header {
		height: 150px;
		flex-flow:column;
		justify-content: space-around;
	}

	body {
		grid-template-areas: 
		"header"
		"nav"
		"main"
		"aside"
		"footer";
		justify-content: space-around;
		grid-template-columns: auto;
	}

	main {
		grid-template-areas: 
		"img1" "img2" "img3" "img4" "img5" "img6";
	}