:root {
	--dis-max-width: 800px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #F0E0D0;
		--back-color: #100A00;
		--label-color: #FFC0B0;
		--directive-color: #C0FFB0;
		--operand-color: #C0FFB0;
		--comment-color: #A0A0A0;
		--address-color: #A0A0A0;
		--op-symbol-color: #A0A0F0;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--text-color: black;
		--back-color: white;
		--label-color: red;
		--directive-color: green;
		--operand-color: green;
		--comment-color: gray;
		--address-color: gray;
		--op-symbol-color: blue;
	}
}

body {
	position: relative;
	width: 100%;
	max-width: var(--dis-max-width);
	margin: 0 auto;
	font-size:3vw;	
	font-family: Lucida, monospace;
	background: var(--back-color);
	color: var(--text-color);
}

.long-comment {
	display:block;
	white-space: pre;
	color: var(--comment-color);
	font-size:2vw;
}


@media only screen and (min-width:780px) {
	body {
		font-size:10pt;
	}

	.long-comment {
   		margin-left: 4em;
		font-size:10pt;
	}
}



.symbols .symbol {
	display:table-row;
}

.symbols .symbol::before {
	display:table-cell;
	content: attr(label);
	width: 10em;
	max-width: 10em;
	overflow: hidden;
	text-wrap: wrap;
	word-break: break-all;
}

.line {
	position:relative;
	display:block;
	word-break: break-all;
}

.line::after {
	clear:both;
	content:"";
	display: table;
}

.line .label {
	/* display:inline-block; */
	float:left;
	display:block;
	color: var(--label-color);
	width: 100%;
	margin-left: 4em;
}

.line .address {
	position: absolute;
	left: 0;
	color: var(--address-color);
}

.line .address a {
	color: var(--address-color);
	text-decoration: none;
}

.line .address a:hover {
	text-decoration: underline;
}


.line .opcode {
	display:inline-block;
	float:left;
	width: 3.5em;
	max-width: 3.5em;
	margin-left: 8em;
}

.line .opcode.directive {
	color:var(--directive-color);
}

.line .opcode.directive::before {
	display:inline;
	content: ".";
}


.line .operand {
	display:inline-block;
	float:left;
	width: 16em;
	max-width: 16em;
}

.line .operand[type="operand"] {
	color: va;
}

.line .comment {
	display:inline-block;
	float:left;
	color: var(--comment-color);
	max-width: 24em;
}

a.op-symbol {
	text-decoration: none;
	color: var(--op-symbol-color);
}

a.op-symbol:hover {
	text-decoration: underline;
}


div#tool-symbol {
	display:none;
	position:absolute;
	border: 2px solid var(--op-symbol-color);
	border-radius: 5px;
	background: var(--back-color);
	padding:0.5em;
}