@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: normal;
	src: url('font/Nunito-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: bold;
	src: url('font/Nunito-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Nunito Sans';
	font-style: italic;
	font-weight: normal;
	src: url('font/Nunito-Italic.ttf') format('truetype');
}

:root {
	--light-blue: #2AA1BF;
	--dark-blue: #095C81;
	--light-color: #0C0C0C;
	--dark-color: #FFFFFF;
	--light-background: #F9F9F9;
	--dark-background: #4A4A4A;
	--light-code-background: #EBEBEB;
	--dark-code-background: #383838;
}

body {
	width: 360px;
	padding: 6px 12px;
	color: var(--light-color);
	background-color: var(--light-background);
	font-family: 'Nunito Sans';
}
@media (prefers-color-scheme: dark) {
	body {
		color: var(--dark-color);
		background-color: var(--dark-background);
	}
}

section.no-padding {
	margin: 0 -12px -6px;
}
h2 {
	margin: 6px 0 4px;
}
summary {
	margin: 6px 12px 6px;
}
summary > h2 {
	margin: 0;
	display: inline-block;
}
time {
	font-style: italic;
}
svg {
	vertical-align: text-bottom;
}

.panel-section-list {
	margin: 0 -12px;
}
.panel-list-item > .icon {
	text-align: center;
	width: 23px;
	margin-right: 4px;
}

#calendar > div > svg, #state > svg {
	margin-right: 4px;
}

#space-api {
	margin: 0;
	padding: 0 8px;
	height: 122px;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: var(--light-code-background);
}
@media (prefers-color-scheme: dark) {
	#space-api {
		background-color: var(--dark-code-background);
	}
}
#space-api code {
	font-family: monospace;
	font-size: 10px;
}