ctbk.de/css/style.css

@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url(../fonts/open-sans-v16-latin-300.woff2) format('woff2'),url(../fonts/open-sans-v16-latin-300.woff) format('woff')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;src:local('Open Sans Light Italic'),local('OpenSans-LightItalic'),url(../fonts/open-sans-v16-latin-300italic.woff2) format('woff2'),url(../fonts/open-sans-v16-latin-300italic.woff) format('woff')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(../fonts/open-sans-v16-latin-700.woff2) format('woff2'),url(../fonts/open-sans-v16-latin-700.woff) format('woff')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;src:local('Open Sans Bold Italic'),local('OpenSans-BoldItalic'),url(../fonts/open-sans-v16-latin-700italic.woff2) format('woff2'),url(../fonts/open-sans-v16-latin-700italic.woff) format('woff')}

* {
	box-sizing:border-box;
	font-family: 'Open Sans', sans-serif;
}
:root {
	scroll-behavior: smooth;
}
html {
	background: #AAA no-repeat center center fixed;
	background-size: cover;
	background-image: url('/img/bg.jpg');
	overflow-y:scroll;
	transition: background 0.5s;
	height:100%;
	overscroll-behavior: none;
}
body {
	margin: 0;
	backdrop-filter: blur(8px);
	min-height: 100%;
}
body, section {
	background: rgba(255,255,255,.5);
}
header, footer, section {
	padding: .5em 50px;
	width: 50vw;
	min-width:700px;
	margin: 0 auto;
}
header {
	padding: 0.5em 0;
	display: flex;
	flex-wrap: wrap;
}
footer {
	background: rgba(255,255,255,.8);
	font-size: .8em;
}
section {
	padding-bottom:50px;
}
h1 {
	font-weight: 400;
	font-size: 2em;
	line-height: .95;
	letter-spacing: 0.0625em;
}
h2 {
	border-top: 2px solid rgba(255,128,0,.2);
	border-image: linear-gradient(90deg, transparent, rgba(255,128,0,.4), transparent) 30;
	padding-top: 1.5em;
	font-weight: bold;
	font-size: 1.2em;
	margin: 1.5em 0 .5em;
}
h1 + h2 {
	border-top: none;
	padding-top: 0;
}
p {
	margin-top: .5em;
}
a {
	color: #F50;
	transition: color 0.3s;
}
a:hover, footer a:hover {
	color: #F20;
}
footer a {
	color: inherit;
}
section {
	filter: grayscale(100%);
	transition: filter 0.5s;
}
section:hover {
	filter:none;
}
img {
	max-width: 100%;
}
img.ico {
	height: 1em;
	width: auto;
}
img.small {
	height: 10em;
	width: auto;
}
ul {
	margin:0;
	padding-left: 1em;
}

/* Definition List */
dt {
	font-weight:bold;
	float: left;
	margin: 0 .5em .1em 0;
}
dd {
	margin: 0 0 .1em;
}

/* hackcal */
#dbkcalendar {border: 1px solid #CCC}
#dbkcalendar div {display: flex; padding: 8px 14px}
#dbkcalendar div span:first-child {font-weight: bold}
#dbkcalendar [data-date] {background: #CCC}
#dbkcalendar [data-date] span:first-child {flex: 1}
#dbkcalendar [data-uid] {font-size: .9em; gap: .5em; line-height: 1.5em}
#dbkcalendar [data-uid] span:first-child {flex: 0 0 3em}
#dbkcalendar div i {background: #FC0; border-radius: 0.25em; padding: 0 0.25em; font-style: normal; font-weight: bold; color:#000}

/* spaceapi */
aside#spaceapi {
	display: flex; 
	justify-content:right; 
	align-items: center; 
	flex-grow: 1;
}
aside#spaceapi img {
	float:left; 
	height:5em; 
	margin: 1em
}

/* Mobile devices */
@media (max-width: 700px) {
	html {background-image: none}
	body {margin:0}
	header, footer, section {padding: 1em 25px; width:auto; min-width: 300px}
	section {transition: all 0.5s}
	p {text-align: justify; hyphens: auto}
	
	/* spaceapi */
	aside#spaceapi {justify-content:left}

	/*pointer-events:none*/
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {	color-scheme: dark}
	html {background-color: #444}
 	body, section {background: rgba(0,0,0,.5); color: #BBB}
	footer {background: rgba(0,0,0,.8)}
	a {color: #FC0; transition: color 0.3s}
	a:hover, footer a:hover {color: #FA0}

	/* hackcal */
	#dbkcalendar {border-color: #444}
	#dbkcalendar div[data-date] {background: #444} 
}