:root {
	color-scheme: light dark;

	--bgcolor: light-dark(oklch(0.8458 0.0144 236.42), oklch(0.1863 0.0144 236.42));
	--subtle: light-dark(oklch(from var(--bgcolor) calc(l - 0.05) c h), oklch(from var(--bgcolor) calc(l + 0.05) c h));
	--subtle2: light-dark(oklch(from var(--bgcolor) calc(l - 0.2) c h), oklch(from var(--bgcolor) calc(l + 0.2) c h));
}

body {
    min-width: 20rem;
    width: min(65ch, 100vw - 2rem);
    margin-inline: auto;
    line-height: 1.5;
    font-size: 1.25rem;
    letter-spacing: .0003em;
    font-smooth: always;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    hyphens: auto;
    font-family: 'Atkinson Hyperlegible', 'Atkinson Hyperlegible Fallback', system-ui, -apple-system-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

	background-color: var(--bgcolor);
	color: light-dark(oklch(0.1863 0.0144 236.42), oklch(0.8458 0.0144 236.42));
}

#message {
	border-width: 1px;
	border-style: solid;
	padding: 0.5rem;
	background-color: var(--subtle);

	&.hidden {
		display: none;
	}

	&.info {
		--c: light-dark(oklch(0.4506 0.1241 261.28), oklch(0.626 0.1333 261.28));
		--type: "Info: ";
		border-color: var(--c);
	}

	&.warn {
		--c: light-dark(oklch(0.4506 0.1241 19.39), oklch(0.626 0.1333 19.39));
		--type: "Warning: ";
		border-color: var(--c);
	}

	&::before {
		content: var(--type);
		color: var(--c);
	}
}

.monitor {
	border: 1px solid var(--subtle2);
	background-color: var(--subtle);
	padding: 0.5rem;
	margin-bottom: 0.5rem;

	h2 {
		margin-top: 0;
		margin-bottom: 1rem;
	}

	.uptime {
		float: right;
		background-color: light-dark(oklch(from var(--bgcolor) calc(l - 0.12) c h), oklch(from var(--bgcolor) calc(l + 0.12) c h));
		padding: 0.25rem;

		&::after {
			content: "%";
		}
	}

	.squares {
		display: flex;
		height: 2rem;
		gap: 0.25rem;
		justify-content: end;
		overflow: hidden;

		.square {
			aspect-ratio: 1/2.75;
			background-color: var(--subtle2);

			&.up {
				background-color: light-dark(oklch(0.4506 0.1241 135), oklch(0.626 0.1333 135));
			}

			&.down {
				background-color: light-dark(oklch(0.4506 0.1241 19.39), oklch(0.626 0.1333 19.39));
			}
		}
	}

	&:nth-child(2) {
		margin-top: 1rem;
	}
}