* { user-select: none; }
*:focus { outline: 0; }
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

#main, #aside, #menu {
	padding: 0 0.25em;
	font-size: 325%;
	text-align: center;
	font-family: "Helvetica";
}

#mainstock h1 { font-size: 1.2em; }
#mainstock, #currency, #aside { margin-top: 2em; }
#mainstock > .price {
	font-size: 2em;
	font-weight: bold;
}
#mainstock .extended {
	font-size: 0.7em;
	display: none;
}
#mainstock .extended h2 {
	font-size: 0.4em;
	margin: 1em 0 0 0;
	font-weight: normal
}
#mainstock .absolute { font-size: 1.25em; }

#currency .price, #bitcoin .price, #call .price {
	font-weight: bold;
}

#watchlist dl {
	display: inline-block;
	border-radius: 1em;
	padding: 0.1em 0.35em;
	margin: 0.1em;
	color: white;
	cursor: pointer;
}
#watchlist dl.green { background-color: green; }
#watchlist dl.red { background-color: red; }
#watchlist dl.gray { background-color: gray; }
#watchlist dt {	font-size: 0.8em; }
#watchlist dd {
	font-size: 0.35em;
	margin-inline-start: 0;
	margin-top: -0.25em;
}
#aside .watchlistbar {
	display: flex;
	justify-content: space-evenly;
	margin: 0.5em 0 0 0;
}
#aside .watchlistbar i, #menu i {
	font-size: 1em;
	margin: 0 0.1em;
	cursor: pointer;
	line-height: 1.15;
}
#aside .watchlistbar .icon {
	margin-left: 1em;
}

.green { color: green; }
.red { color: red; }

body {
	background-color: white;
	margin: 0;
	padding: 0.5em;
}

@media screen and (max-width: 1270px) { /* Tesla */
	#aside, #menu { font-size: 300%; }
	#main { font-size: 250%; }
	.over20 #watchlist dl {	font-size: 0.95em; }
	.over30 #watchlist dl {	font-size: 0.9em; }
	.over40 #watchlist dl {	font-size: 0.85em; }
	.over50 #watchlist dl {	font-size: 0.8em; }
	.over60 #watchlist dl {	font-size: 0.75em; }
}

@media screen and (min-width: 1100px) {
	body {
		display: flex;
		min-height: calc(100% - 1em);
		flex-direction: column;
	}
	#data {
		display: flex;
		align-items: center;
		flex-grow: 2;
	}
	#main {
		flex-grow: 2;
		white-space: nowrap;
		min-width: 42.5%;
	}
	#mainstock, #aside { margin-top: 0; }
	.over60 #main { min-width: 35%; }
}

@media (prefers-color-scheme: dark) {
	body { background-color: black; }
	#mainstock, #currency, #bitcoin, #call, i { color: white; }
/*	html[data-tesla='true'] body { background-color: #212121 !important; }*/
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	#main { font-size: 140%; }
	#aside { font-size: 200%; }
	.watchlistbar { font-size: 90%; }
}