feat: css in separate file

resources/style.css

@@ -0,0 +1,131 @@
+body {
+	background: #f7f7f7;
+	color: #000;
+	margin: 20px;
+	font: 13px monospace;
+	line-height: 1.3;
+}
+
+.hiddenDiv {
+	display: none;
+}
+
+.app {
+	margin-bottom: 20px;
+}
+
+.app img {
+	-webkit-filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
+	filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
+	width: 100px;
+}
+
+.info .subsection {
+	display: inline-block;
+	vertical-align: top;
+}
+
+.info .list {
+	padding-left: 20px;
+}
+
+.icon {
+	padding-right: 20px;
+}
+
+.info > .list {
+	display: inline-block;
+	padding-left: 0px;
+}
+
+.floatLeft {
+	float: left;
+}
+
+a         { color: #aaa; }
+a:hover   { color: #000; }
+a:visited { color: #aaa; }
+
+h1 {
+	font-size: 18px;
+}
+
+h2 {
+	font-size: 14px;
+	margin-top: 4ex;
+	text-transform: uppercase;
+}
+
+.expired, .warning {
+	color: darkred;
+}
+.expiring {
+	color: #996600;
+}
+.valid {
+	color: darkgreen;
+}
+
+.deviceType {
+	color: #aaa;
+	font-size: 11px;
+}
+
+.clear {
+	clear: left;
+}
+
+table {
+	width: 600px;
+}
+
+tr {
+	line-height: 1.75;
+}
+
+td {
+	padding-left: 8px;
+	padding-right: 8px;
+}
+
+tr:nth-child(odd) {
+	background-color: #eee;
+}
+
+tr:nth-child(even) {
+	background-color: #fafafa;
+}
+.footer {
+	margin-top: 20px;
+	color: #aaa;
+	font-size: 11px;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		background: #323232;
+		color: #fff;
+	}
+
+	a         { color: #aaa; }
+	a:hover   { color: #fff; }
+	a:visited { color: #aaa; }
+
+	.expired, .warning {
+		color: red;
+	}
+	.expiring {
+		color: orange;
+	}
+	.valid {
+		color: lightgreen;
+	}
+
+	tr:nth-child(odd) {
+		background-color: #1e1e1e;
+	}
+
+	tr:nth-child(even) {
+		background-color: #292929;
+	}
+}