* {padding: 0; margin: 0; overflow: hidden; color: white}
#layout {display: flex; justify-content: center; align-items: center}
main {
	width: min(728px, 100vw);
	height: min(90px, 12.367vw);
	box-sizing: border-box;
	border: 3px ridge grey;
	background-color: black;
}
@media (prefers-reduced-motion: no-preference) {
	html {animation: 0.1s linear 0s fade-in;}
}
#inside {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-areas: "main";
}
#johnvert {grid-area: main; display: block; width: 100%; height: 100%}
#johnvert img {border: none; width: 100%; height: 100%;}
@media not all and (min-width: 500px) {
	main {border: 1px ridge grey;}
}
#badge {
	grid-area: main;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	box-sizing: border-box;
}
#badge a {
	display: block;
	background-color: black;
	width: 5.54016620498614958400%;
	height: 23.80952380952380952300%;
	position: relative;
	border-left: 1px solid grey;
	border-top: 1px solid grey;
	z-index: 100;
	padding-top: 1px;
}
#badge img {width: 100%; height: 100%;}
@keyframes fade-in {
	0% {opacity: 0;}
	100% {opacity: 0.5;}
}