* {
	box-sizing: border-box;
}

body {
  max-width: 1366px;
  margin: 20px auto;
  font-family: "Arial", "sans-serif";
  font-size: 16px;
  padding: 5px;
}

#links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

#links img {
	max-width: 400px;
}

#links a {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
	padding: 10px;
	border-radius: 5px;
	text-decoration: none;
	color: black;
	background-color: #fff;
	transition: .2s transform;
}

#links a:hover {
	transform: scale(1.02);
}

@media (width < 800px){
	#links {
		grid-template-columns: repeat(2, 1fr); 
	}
}

@media (width < 601px){
	#links {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	#links img {
		max-width: 90vw;
	}
}

nav a{
	color: #000;
}

#tema-btn {
	float: right;
	font: inherit;
	background: none;
	border: none;
	color: #000;
	text-decoration: underline;
}

#tema-btn:hover {
	cursor: pointer;
}

html.escuro {
	color: #fff;
	background: #000;
}

html.escuro a {
	color: #fff;
}

html.escuro #links a {
	background-color: #444;
	color: #fff;
	box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2);
}

html.escuro #tema-btn {
	color: #fff;
}