@font-face {
  font-family: 'md-io';
  src: local('MD IO'),
       url('MDIO-Light.woff2') format('woff2'),
       url('MDIO-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
* {
	-webkit-text-size-adjust: 100%;
}
html {
	margin:0;
	font-size:11px;
	font-family: 'MDIO-Light', Menlo, sans-serif;
	line-height:1.4em;
	background: linear-gradient(to right, white 400px, #eee 400px, #eee 100vw);
}
body {
	margin:24px;
}
#content {
	padding-left:env(safe-area-inset-left);
}
#logo {
	width:30px;
	height:30px;
	background: url(bars.svg) no-repeat center;
	background-size: contain;	
}
#links {
	margin:48px 0;
	p {
		margin:0;
		color:#666;
	}
	a {
		color:orangered;
		position: relative;
		top:-0.5px;
	}
}
#foot {
	position: absolute;
	bottom:24px;
}

@media only screen and (max-width: 450px) {
  html {
  	background: unset;
  }
}

@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
    }
}