:root {
	--border-radius: 0.35rem;

	--title-color: 255, 255, 255;
	--text-color: 177, 177, 177;
	--bg-color: 15, 18, 26;

	--card-bg-color: 35, 39, 49;
	--card-border-color: 33, 36, 45;

	--error-color: 248, 113, 113;
	--success-color: 16, 185, 129;
	--warning-color: 255, 187, 109;
	--maintenance-color: 149, 117, 205;
}

html {
	color: rgb(var(--text-color));
	background-color: rgb(var(--bg-color));
	font-family: Cantarell, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
		"Helvetica Neue", sans-serif;
}

html,
body {
	overflow-x: hidden;
	line-height: 1.15;
	margin: 0;
}

* {
	box-sizing: border-box;
	text-wrap: balance;
}

:is(header, section, footer) > .inner {
	max-width: 750px;
	margin: 40px auto;
	padding: 0 10px;
}

h1,
h2,
h3,
h4 {
	color: rgb(var(--title-color));
}

h3,
h4 {
	margin: 0;
}

a {
	color: rgb(var(--text-color));
}

a:hover {
	color: rgb(var(--title-color));
}

/* HEADER */

header {
	text-align: center;
}

header .inner {
	margin: 5rem auto;
}

header::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 450px;
	background-image: radial-gradient(
		circle at 50% 0,
		rgb(var(--color), 0.2) 0,
		transparent 400px
	);
	z-index: -1;
}

header .icon {
	border-radius: 50%;
	max-width: 50px;
	padding: 5px;
	margin: auto;
	position: relative;
	display: flex;
	background-image: linear-gradient(
		-45deg,
		rgb(var(--color), 0.1) 0%,
		rgb(var(--color), 0.5) 100%
	);
	filter: drop-shadow(0 0 10px rgb(var(--bg-color)));
}

header p {
	font-size: 0.9rem;
}

/* FOOTER */

footer {
	text-align: center;
}

/* GROUP */

.group {
	background: rgb(var(--card-bg-color), 0.5);
	border: 1px solid rgb(var(--card-border-color));
	margin: 10px 0;
	padding: 10px;
	border-radius: var(--border-radius);
}

.group .item {
	padding: 10px;
	border-radius: var(--border-radius);
}

.group .item:hover {
	background-color: #fff1;
}

.group > .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.group > .header .status {
	opacity: 0.7;
}

/* MONITOR */

.monitor {
	--color: 150, 150, 150;
	display: flex;
	gap: 7px;
	flex-direction: column;
}

.monitor .header {
	display: grid;
	align-items: center;
	gap: 10px;
	grid-template-columns: 22px 1fr max-content;
}

.monitor .icon {
	display: flex;
}

.monitor .uptime {
	font-size: 0.9rem;
	color: rgb(var(--color));
}

/* HEARTBEATS */

.heartbeats {
	display: flex;
	gap: 0px;
}

.heartbeats .tooltip {
	position: absolute;
	z-index: 10;
	background-color: rgb(var(--card-bg-color));
	border-radius: var(--border-radius);
	top: 100%;
	left: 50%;
	width: 180px;
	box-shadow: 0 0 10px 0 #0005;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	transform: translate(-50%, 5px);
}

.heartbeats .tooltip > * {
	padding: 15px;
}

.heartbeats .tooltip .status {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.heartbeats .tooltip .status :nth-child(1) {
	display: flex;
	flex-direction: row;
	gap: 7px;
	font-weight: 700;
	color: rgb(var(--title-color));
}

.heartbeats .tooltip img {
	max-width: 19px;
}

.heartbeats .tooltip .date {
	font-size: 0.9rem;
	text-align: center;
	font-weight: 700;
	background-color: #fff1;
	padding: 8px 15px;
}

.heartbeats .beat {
	cursor: pointer;
	position: relative;
	flex: 1;
	height: 5px;
	transition: background-color 0.3s, height 0.3s;
	background-color: rgb(var(--color), 0.4);
}

.heartbeats .beat:last-child {
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.heartbeats .beat:first-child {
	border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.heartbeats .beat:hover {
	box-shadow: inset 0 0 0 2px rgb(var(--title-color));
}

.heartbeats .beat:hover .tooltip {
	opacity: 1;
}

.monitor:hover .heartbeats .beat {
	height: 25px;
	background-color: rgb(var(--color));
}

/* STATUS COLORS */

.status-0 {
	--color: var(--error-color);
}

.status-1 {
	--color: var(--success-color);
}

.status-2 {
	--color: var(--warning-color);
}

.status-3 {
	--color: var(--maintenance-color);
}

/* HTML: <div class="loader"></div> */
.loader {
	margin-inline: auto;
	width: 60px;
	aspect-ratio: 1;
	color: var(--text-color);
	border: 10px solid;
	box-sizing: border-box;
	border-radius: 50%;
	animation: l6 2s infinite linear;
	position: relative;
}
.loader:before {
	content: "";
	position: absolute;
	height: 20px;
	inset: auto calc(50% - 10px) 100%;
	border-radius: 5px 5px 0 0;
	background: linear-gradient(currentColor 0 0) top/100% 30%,
		linear-gradient(currentColor 0 0) top/50% 100%;
	background-repeat: no-repeat;
}
.loader:after {
	content: "";
	position: absolute;
	inset: -8px -10px auto;
	height: 15px;
	background: radial-gradient(
				farthest-side,
				currentColor 94%,
				rgb(var(--bg-color))
			)
			left,
		radial-gradient(farthest-side, currentColor 94%, rgb(var(--bg-color)))
			right;
	background-size: 15px 15px;
	background-repeat: no-repeat;
}
@keyframes l6 {
	0% {
		background: conic-gradient(
			rgb(var(--warning-color)) 0,
			rgb(var(--bg-color)) 0
		);
	}
	12.5% {
		background: conic-gradient(
			rgb(var(--warning-color)) 45deg,
			rgb(var(--bg-color)) 46deg
		);
	}
	25% {
		background: conic-gradient(
			rgb(var(--warning-color)) 90deg,
			rgb(var(--bg-color)) 91deg
		);
	}
	37.5% {
		background: conic-gradient(
			rgb(var(--warning-color)) 135deg,
			rgb(var(--bg-color)) 136deg
		);
	}
	50% {
		background: conic-gradient(
			rgb(var(--warning-color)) 180deg,
			rgb(var(--bg-color)) 181deg
		);
	}
	62.5% {
		background: conic-gradient(
			rgb(var(--warning-color)) 225deg,
			rgb(var(--bg-color)) 226deg
		);
	}
	75% {
		background: conic-gradient(
			rgb(var(--warning-color)) 270deg,
			rgb(var(--bg-color)) 271deg
		);
	}
	87.5% {
		background: conic-gradient(
			rgb(var(--warning-color)) 315deg,
			rgb(var(--bg-color)) 316deg
		);
	}
	100% {
		background: conic-gradient(
			rgb(var(--warning-color)) 360deg,
			rgb(var(--bg-color)) 360deg
		);
	}
}