/*
 * Laptop (default)
 */
body:before {
	display: none;
	visibility: hidden;
	content: "laptop";
}

#toggle {
	display: none;
}

/*
 * Desktop
 */
@media all and (min-width: 1281px) {
	body:before {
		content: "desktop";
	}
}

/*
 * Tablet landscape
 */
@media all and (min-width: 471px) and (max-width: 1024px) {
	body:before {
		content: "tablet";
	}

	footer { padding:0; }
	footer ul li { border:0; }
	footer ul
	{
		display:flex;
		flex-direction: column-reverse;
		text-align:center;
	}

	nav ul.bubble
	{
		position:relative;
		left:auto;
		margin:1em;
	}
	
	h1 {
		font-size:15pt;
		font-weight:700;
	}

	h2 {
		margin-top:1em;
		font-size:14pt;
		font-weight:700;
	}
}

/*
 * Mobile portrait
 */
@media all and (max-width: 470px) {
	body:before {
		content: "mobile";
	}

	footer { padding:0; }
	footer ul li { border:0; }
	footer ul
	{
		display:flex;
		flex-direction: column-reverse;
		text-align:center;
	}

	nav ul.bubble
	{
		position:relative;
		left:auto;
		margin:1em;
	}

	#page 
	{
		padding: 0;
		justify-content:unset;
	}

	main
	{
		width: 100vw;
		max-width: unset;
		min-width: unset;
		border-radius:0;
		position:relative;
		top:0;
	}

	.title
	{
		font-size:16pt;
	}
	.subtitle
	{
		font-size:12pt;
	}

	h1 {
		font-size:15pt;
		font-weight:700;
	}

	h2 {
		margin-top:1em;
		font-size:14pt;
		font-weight:700;
	}
	
}