style.css

body {
	font-family: sans-serif;
	margin: 0;
	padding: 20px;
	background-color: #22222A;
	color: white;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

h1 {
	font-size: 2em;
	margin: 0;
}

p {
	margin: 0;
}

#servers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.server {
	background-color: #11111A;
	border-radius: 5px;
	padding: 5px;
}

.server>.head {
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: space-between;
}

.loading {
	margin-top: 10px;
	position: relative;
	height: 20px;
	background: repeating-linear-gradient(45deg, #31315c, #31315c 20px, #50505f 20px, #50505f 40px);
	animation: amogus 1s linear infinite;
	background-size: 200% 100%;
	border-radius: 5px;
}

.services {
	margin-top: 10px;
}

@keyframes amogus {

	0% {
		background-position: calc(20px * sqrt(2) * 2 * -1) 0px;
	}

	100% {
		background-position: calc(20px * sqrt(2) * 2 * 0) 0px;
	}

}

.service {
	display: flex;
	flex-direction: row;
	gap: 5px;
	margin-top: 5px;
	align-items: center;
}

.service>.status {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.service.ok>.status {
	background-color: green;
}

.service.error>.status {
	background-color: red;
}