<!doctype html>
<html>
	<head>
		{% block head %}{% endblock %}
		<meta charset="utf-8" />
		<title>{% block title %}{% endblock %}</title>
		<meta name="viewport" content="width=400rem" />
		<meta name="supported-color-schemes" content="light dark">
		<link rel="stylesheet" href="/res/pico.min.css">
		<link rel="stylesheet" href="/res/styles/base.css">
		<link rel="icon" type="image/x-icon" href="/res/icons/favicon.ico">
		<style>
			.people div {text-align:center;}
			.people h3, .people p, .people h5 {margin:0;}
			.people {grid-auto-flow:row;}
			.people img {display:block;}
			
			main {min-height: 30em;}
			
			h1 img {max-height:1.4em;}
			.notice {padding:0.8em;border-radius:3px;background:#e53935;color:#eee;}
			.notice a {color:#eee;text-decoration:underline;}
			.container {max-width:50em;padding:1em;box-sizing:border-box;}
			td > a[role=button] {padding: 0.3em 0.7em;}
			td {padding-left: 0.2em;padding-right: 0.2em;}
			td > input[type=file] {margin:0;padding:0;}
			section {margin-bottom:3em;}
			@media (min-width: 500px) {body .grid {grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));}}
			details {margin-bottom:0;}
			header img {display:block;margin: 0 auto;}
			
			summary[role=button] {background:var(--primary-focus);color:var(--contrast);}
			summary img, td img {height:1.2em;width:2em;box-sizing: border-box;}
			
			

			body .grid.people { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important }
			.status {float:right;}
			
			footer {opacity:0.4;margin:0;padding:0;max-width:40em;text-align:center;transition:opacity .4s;}
			footer:hover {opacity:1;}
			footer img {height:1.3em;}
			
			.tag {background:var(--primary);color:var(--contrast);font-size:0.8em;font-weight:600;padding:0.1em 0.3em;border-radius:3px;}

			.grid_2x2 {
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(2, 1fr);
			}
		</style>
		<script src="/res/scripts/base.js" defer></script>
	</head>
	<body onscroll="onScrollNav()">
		{% include 'blocks/navbar.html' %}
		{% block main %}{% endblock %}
		
		<script type="text/javascript">
			document.addEventListener("DOMContentLoaded", function(event) {
			  var anchor = window.location.hash;
			  if (anchor) {
				var element = document.querySelector(anchor);
				if (element && element.tagName === "DETAILS") {
				  element.setAttribute("open", "");
				}
			  }
			});
		</script>
		<footer>
			Made in 🇮🇹 by <a href="https://lab.foxo.me"><img src="/res/icons/silhouette.svg" class="icon" /></a> and maintained by <a href="https://twitter.com/stranckV2">Stranck</a> and <a href="https://about.woffo.ovh/">DrewThaWoof</a><br><a href="/manage/privacy">Privacy</a>
		</footer>
	</body>
</html>
