.content{
	display: grid;
	z-index: -2;

	background-color: black;

	grid-template-columns: auto;
	grid-template-rows: min-content auto;
}
.panel{
	position: relative;
	display: grid;
	height: 30px;

	background-color: rgba(0,0,0,0.3);
	color: white;

	grid-template-rows: auto;
	grid-template-columns: auto min-content min-content;
	/*grid-auto-columns: auto;*/
	/*grid-auto-flow: column;*/

	font-weight: normal;
}
.panel div{
	margin-top: auto;
	margin-bottom: auto;
}
.panel .clock{
	padding: 0 50px 0 50px;
}
.panel .system_tray{
	display: grid;
	grid-auto-flow: column;
	grid-gap: 5px;
	font-size: 0.8em;
}
.svg{
	filter: brightness(1.7);
}
.panel .spacer{
	width: auto;
}
.panel .dock{
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(5, 30px);
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	height: 100%;
}
.panel .dock .icon img{
	height: 24px;
}
.panel .dock .icon {
	position: relative;
	top: 0;
	box-sizing: border-box;
	padding: 3px;
	height: 30px;
	transition: 0.5s;
}


.panel .dock .icon:hover {
	top: 8px;
	transition: 0.25s;
}
.panel .dock .icon:hover {
	border-radius: 6px;
	transition: 0.25s;
}



.panel .dock .icon:hover{
	background-color: rgba(255,255,255,0.1);
}
.panel .dock .icon .active-s{
	position: absolute;
	height: calc(100% - 2px);
	width: 100%;
	top: 0;
	left: 0;
	border-bottom: 2px crimson solid;
	background-color: rgba(255,255,255,0.09);
}
.panel .dock .icon .active-b{
	position: absolute;
	height: calc(100% - 2px);
	width: 6px;
	top: 0;
	left: 12px;
	border-bottom: 2px crimson solid;
}
.panel .dock .active-m{
	position: absolute;
	height: calc(100% - 2px);
	width: 12px;
	top: 0;
	left: 9px;
	border-bottom: 2px crimson dashed;
}
.desktop{
	padding: 30px;
	/*display: grid;*/
}
.desktop .icon{
	width: min-content;
	text-align: center;
	font-size: 0.8em;
}

.background{
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;

	background: url('../background.png');
	background-size: cover;
}