* {
	border: 0;
	margin: 0;
	padding: 0;
}

@media (orientation: landscape) {
  .block {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  .block {
    flex-direction: column;
  }
}

html, body {
	height: 100%;
}

body {
	background-image: url("assets/triangles.svg");
	background-size: cover;
}

img {
	-webkit-filter: grayscale(100%) drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
	filter: grayscale(100%);
	opacity: 0.8;
	padding: 1.5em;

	transition: all 0.25s ease;
}

img:hover {
	-webkit-filter: grayscale(0) drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
	filter: grayscale(0);
	opacity: 1.0;
}

.block {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}