@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');
}

:root {
	--light-blue: #2AA1BF;
	--dark-blue: #095C81;
	--light-color: #333;
	--dark-color: #CCC;
	--light-background: #FFF;
	--dark-background: #111;
	--light-code-background: #EBEBEB;
	--dark-code-background: #333;
}

body {
	width: 360px;
	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);
	}
} */

h2 {
	margin: 12px 8px 8px;
}
summary {
	margin: 12px 8px 8px;
}
summary > h2 {
	margin: 0;
	display: inline-block;
}

.panel-list-item > .icon {
	text-align: center;
	width: 23px;
	margin-right: 4px;
}
.panel-list-item > .icon > img {
	vertical-align: text-bottom;
}

#state {
	margin: 0 8px;
}
#state > img {
	vertical-align: text-bottom;
	margin-right: 4px;
}

#calendar {
	margin: 0 8px;
}
#calendar > div > img {
	vertical-align: text-bottom;
	margin-right: 4px;
}

#space-api {
	margin: 0;
	padding: 0 8px;
	height: 240px;
	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;
}