* {
	box-sizing: border-box;
}

h1, h2, h3{
	text-align:center;
	font-weight:bolder;
	text-decoration:underline;
	margin-top:0;
}
h1 { 
	font-size:1.75em; 
}
h2 {
	font-size: 1.5em;
}
h3 {
	font-size: 1.25em;
}

body {
	padding: 0;
	font-size: 17px;
}

pre {
	max-width: min(100%,90vw);
	overflow-x: auto;
}

.body {
	padding: 1em;
	position:relative;
	max-width:100vw;
}

.hidden {
	display:none;
}

.good-text {
	color: forestgreen;
	font-weight: bolder;
}
.warn-text {
	color: rgb(255, 123, 7);
	font-weight: bolder;
}
.bad-text {
	color: red;
	font-weight: bolder;
}

.dump {
	max-width: 100%;
	outline:var(--card-border);
	border-radius:.5em;
	overflow:hidden;
	text-align:initial !important;
}

.dump > .header {
	background: var(--mobile-foreground);
	color: var(--mobile-background);
	padding-top:.25em;
	padding-bottom: .25em;
	padding-left: 1em;
	padding-right: 1em;
	text-align: initial !important;}

.dump > pre {
	margin:1em;
	max-height: 15em;
	overflow: auto;
	padding-right:1em;
	width:calc(100% - 1.1em) !important;
	max-width:initial !important;
	white-space: pre-wrap;
	word-wrap: break-word;
	display:inline-block;
	text-align: initial !important;
}

.center-box {
	position: relative;
	display: table;
	margin: auto;
	padding: 1em;
	margin-top: 2em;
	margin-bottom: 2em;
	border: 1px solid black;
	border-radius: 1em;
	box-shadow: .25em .25em .5em gray;
}

.sticky-banner {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	background: var(--banner-background);
	color: var(--banner-color);
	padding: .5em;
	font-size: larger;
	font-weight: bolder;
	z-index: 99999;
	box-shadow: var(--banner-shadow);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
}

.sticky-banner a {
	color: var(--banner-color);
}

img.text-icon {
	width: initial !important;
	height: 1.5em !important;
	max-width: initial !important;
	max-height: initial !important;
	vertical-align: middle;
	padding-left:.5em;
	padding-right:.5em;
}

.card {
	width: 10em;
	height: 8.5em;
	display: inline-block;
	margin: .75em;
	background: var(--card-background) !important;
	color: var(--mobile-foreground) !important;
	border: var(--card-border);
	border-radius: .5em;
	box-shadow: var(--card-shadow);
	padding: .5em;
	overflow:hidden;
	position:relative;
}

.card:active,
.card:hover {
	text-shadow: initial !important;
	color: var(--mobile-f-button-foreground) !important;
	background: var(--mobile-f-button-background) !important;
}

.card img {
	width: 5.75em;
	height: 5.75em;
}

@media (max-width: 639px) {
	body {
			font-size: 14px;
		}
	.sticky-banner {
		grid-template-columns: auto auto auto;
		gap: .5rem;
	}
}