@viewport {
	width: auto;
	height: auto;
}
html {
	font-size: 62.5%;
	background: #333333;
	max-height: 600px;
	max-width: 800px;
	min-height: 432px;
	min-width: 576px;
}
*,
*::before,
*::after {
  box-sizing: border-box; 
}
* {
	color: #FFFFFF;
	font-family: asap, "sans-serif";
	font-style: normal;
	font-weight: 700;
	background-repeat: no-repeat;
	box-sizing: border-box;
}
div {
	font-size: clamp(.6rem, 1.4vw, 1.1rem); 
}
body {
	font-size: 1em;
	overflow: hidden;
	background: #333333;

	/*padding:
		env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);*/
}
iframe, img {
	border: none;
}

#animation_container {
	margin: auto;
	display: block;
	width: 800px;
	height: 600px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
}
#dom_overlay_container {
	height: 600px;
	width: 800px;
	display: block;
}
#canvas {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: block;
	position: absolute;
}
svg {
	height: auto;
	max-width: 100%;
	width: auto;
}
#buttons {
	left: 10%;
	bottom: 10%;
	display: inline-flex;
	height: 7.5%;
	position: inherit;
	flex-direction: row;
	justify-content: space-between;
}
#buttons .badge, #buttons .email {
	height: 100%;
	width: auto;
}
.badge {
	padding-left: 15%;
}
a.badge {
	content: url("../images/link_buttons/badge.svg");
}
a.badge:hover {
	content: url("../images/link_buttons/badge-hover.svg");
}
a.badge:visited {
	content: url("../images/link_buttons/badge-visited.svg");
}
a.email:hover {
	content: url("../images/link_buttons/email-hover.svg");
}
a.email:visited {
	content: url("../images/link_buttons/email-visited.svg");
}
a.email {
	content: url("../images/link_buttons/email.svg");
}