@charset "UTF-8";

/* Stylesheet for Web Apps
 * by Sascha Leib for denkfehler.online
 * File name: homepage.css
 */

/* reduce space on top of the main headline */

#main-content {
	display: grid;
	grid-template-columns: 2fr 1fr;
	column-gap: 8pt;
	/* border: red dotted 1px; */
}

#main-center {
	/* border: blue dotted 1px; */
}
#main-center h1 {
	margin-top: 0;
}

#highlights {
	background-color: #EEE;
	/*border: #999 solid 1px;*/
	height: 100%;
}
#highlights h3 {
	margin: 0 0 3pt 0;
	padding: 2pt 2pt 4pt 4pt;
	background-color: #999;
	color: #FFF;
}

#highlights #highlight-list {
	overflow: scroll-y;
	margin: 0 2pt 0 6pt;
	list-style: none inside;
	padding: 0;
}
#highlights #highlight-list li {
	border-top: #999 solid 1px;
}
#highlights #highlight-list li:first-child {
	border-top: none;
}

#highlights #highlight-list h4 {
	font-size: 14pt;
	line-height: 1.25em;
	margin: 6pt 0 6pt 0;
}

#highlights #highlight-list p {
	font-size: 11pt;
	line-height: 1.25em;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#main-content > hr {
	grid-column: 1 / span 2;
}

@media all and (max-width: 950px) {
	#phInclude {
		margin:	0 6pt 5pt 64px;
	}
}

@media all and (max-width: 640px) {
	#main-content {
		grid-template-columns: none;
	}
	#main-content > hr {
		grid-column: 1 / span 1;
	}
	
}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {

	body.darkmode #highlights {
		background-color: rgba(0,0,0,0.25);
	}
	body.darkmode #highlights h3 {
		background-color: #000;
		color: #999;
	}
}