/* Inspired by: https://jgthms.com/web-design-in-4-minutes/ 
 * and: https://blogs.gnome.org/shell-dev/ */

body {
	margin: 0 auto;
	max-width: 50em;
	font-family: "Libre Franklin", "Helvetica", sans-serif;
	line-height: 1.5;
	padding: 1em 2em 2em 2em;
	color: #444;
}

h1,h2,h3,h4,h5,h6 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	color: #333;
	font-weight: 600;
}


.cdf-flag {
	width: 15rem;
	margin-top: 2rem;
	margin-bottom: 0rem;
	border: 0.15rem solid white;
	border-radius: 0rem;
}

img {
	margin: 1rem auto 1rem auto;
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 0.5rem;
	filter: drop-shadow(0 0 0.15rem black);
}
.boilerdash-img {
	width: 100%;
	max-width: 40rem;
}

.m68k-img {
	width: 100%;
	max-width: 30rem;
}

.garmin-img {
  filter: none;
}

iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.iframe-container {
  margin: 1rem auto 1rem auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

/* Links */

a {
	color: #111;
	text-decoration: none;
	/*-webkit-box-shadow: inset 0 -1px 0 rgba(15,15,15,1);
	box-shadow: inset 0 -1px 0 rgba(15,15,15,1);*/
	position: relative;
}

/*inspired by https://codepen.io/alphardex/pen/WNQPWmj */
a::before,
a::after {
	position: absolute;
	content: "";
	left: 0;
	bottom: -0.1rem;
	display: block;
	width: 100%;
	height: 1px;
	background: #111;
	transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

a::before {
	transform: scaleX(0);
	transform-origin: left;
}

a::after {
	transform-origin: right;
	transition-delay: 0s;
}

a:hover::before {
		transform: scaleX(1);
		transition-delay: 0.25s;
}

a:hover::after {
		transform: scaleX(0);
		transition-delay: 0s;
}

hr {
	color: white;
}