/* standard stylesheet for use just-about-everywhere */

:root {
	color-scheme: dark;
	--text: #3f3;
    --highlight: #7f7;
}   
h1, h3 { color: var(--highlight) }


html {
    background: #000;
    color: var(--text);
    font-family: monospace;
    padding:1em;
	font-size: 12pt;
}   

a { 
    color: var(--highlight);
} 

.readable-column {
	/* use for a limited-width reading layout which works on mobile too */
    width: 100%;
    max-width: 80ch;      /* ch = width of the '0' glyph in the current font */

	margin-left: auto;
	margin-right: auto;
	padding-left: 0.666rem;
	padding-right: 0.666rem;

}

/* some useful media queries */

@media (orientation: portrait) {
    /* Applies whenever viewport height >= viewport width */
}

@media (width <= 48rem) {
    /* ~768px at default 16px root font size, reasonably good cut-off point for "is this a small screen" */
}

@media (pointer: coarse) and (hover: none) {
    /* to actually detect touchscreens (phones/tablets) - no precise pointer, no hover */
}