Simple Twine Styles

gistfile1.txt

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400;1,600&display=swap');

tw-story {
	display: block; /* reset */
	width: 90vw; /* width on viewports <1000 */
	margin: auto;
	padding: 2rem 0;
	padding-bottom: 2rem;
	background: #fff; /* reset */
	color: #404040;
	overflow: visible; /* reset */
	font-family: 'EB Garamond', Georgia, serif;
	font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.85rem;
}
b, h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
}
h1, h2, h3 {
	color: #121212;
}
tw-sidebar {
	text-align: left;
	display: grid; /* flex to grid */
	grid-template-columns: min-content min-content; /* flex to grid */
  	width: min-content;
  	grid-gap: 1rem;
	/*display: none;*/ /* Uncomment to hide sidebar */
}
tw-icon[alt] {
	opacity: 1;
  	margin: 0 0 1rem;
    font-size: 3rem;
}
tw-icon[alt]:hover {
    opacity: 1;
}

@media (min-width: 576px) {
	tw-story {
		padding: 2rem 0; /* reset */
	}
	tw-sidebar {
		left: unset; /* reset */
		width: min-content;
		position: unset; /* reset */
	}
}
@media (min-width: 1000px) {
	tw-story {
		max-width: 800px;
		font-size: 1.6rem;
		line-height: 2rem;
	}
	/*tw-sidebar {
		position: absolute;
		left: -6rem;
		grid-template-columns: 1fr;
		width: 4rem;
	}*/
}
@media (prefers-color-scheme: dark) {
	body {
		background: #000;
	}
	tw-story {
		color: #d5d5d5;
		background: #000;
	}
	h1, h2, h3 {
		color: #eaeaea;
	}
}