ProxmoxAAS-Dashboard/css/style.css

:root {
	--fail-color: #f00;
	--success-color: #0f0;
}

* {
	box-sizing: border-box;
}

h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select, td {
	font-family: monospace;
}

body {
	min-height: 100vh;
}

img.clickable {
	cursor: pointer;
}

img {
	height: 1em;
	width: 1em;
}

.flex {
	display: flex;
}

.row {
	flex-direction: row;
	column-gap: 10px;
	align-items: center;
}

.wrap {
	flex-wrap: wrap;
	row-gap: 10px;
}

.nowrap {
	flex-wrap: nowrap;
}

.hidden {
	visibility: hidden;
}

.none {
	display: none;
}

nav {
	overflow: hidden;
	color: white;
	background-color: black;
	font-size: larger;
}

nav a, nav h1, nav label {
	text-align: left;
	padding: 14px 16px;
	text-decoration: none;
}

#hamitems a:hover {
	background-color: white;
	color: black;
}

#hamitems a[aria-current="true"] {
	background-color: white;
	color: black;
}

#hamitems:hover a[aria-current="true"] {
	background-color: black;
	color: white;
}

#hamitems:hover a[aria-current="true"]:hover {
	background-color: white;
	color: black;
}

#hamnav label, #hamburger {
	display: none;
}

@media screen and (min-width: 600px){
	nav {
		display: flex;
		align-items: center;
	}

	#hamitems {
		display: flex;
	}
}

@media screen and (max-width: 600px){
	nav {
		display: grid;
		grid-template-columns: 1fr auto;
	}

	#hamitems {
		display: block;
		grid-column: 1 / span 2;
	}

	#hamitems a {
		box-sizing: border-box;
		display: block;
		text-align: center;
		width: 100%;
		border-top: 1px solid #888;
	}

   	#hamnav label { 
		display: inline-block; 
	}
  
	#hamitems { 
		display: none; 
	}

	#hamnav input:checked ~ #hamitems { 
		display: block; 
	}
}