:root {
	--palette-1: #ff0026;
	--palette-2: #d91e4d;
	--palette-3: #ff0094;
	--palette-4: #e000ff;
	--palette-5: #ff5a00;
}

body {
	font-family:system-ui,sans-serif;
	color: midnightblue;
	background-image: radial-gradient(circle, lightsteelblue 1px, ghostwhite 1px);
        background-size: 15px 15px;
}
a {
	color: var(--palette-2);
	text-decoration: none;
	font-style: italic;
}

a:hover {
	font-weight: 1000;
	color: var(--palette-1);
	/*background: deeppink;
	color: ghostwhite;*/
}

.dashboard {
	overflow: hidden;
}

.dashboard .container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	height: 100dvh;
}

.dashboard .frame {
	--tile-size: clamp(3.5rem, 20vw, 4.75rem);
	display: grid;
	grid-template-columns: repeat(4, var(--tile-size));
	grid-template-rows: repeat(6, var(--tile-size));
	grid-template-areas:
		"files files desk desk"
		"home navidrome desk desk"
		"couchdb navidrome radio tasks"
		"calendar calendar dash dash"
		"sys jellyfin dash dash"
		"metadata quantum obsidian .";
	gap: clamp(0.5rem, 1.5vw, 1rem);
}

.dashboard .box {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 0.5rem;
	box-sizing: border-box;
	overflow-wrap: anywhere;
}

.dashboard :is(.desk, .dash, .home, .radio, .couchdb, .jellyfin, .obsidian, .quantum, .metadata, .tasks, .sys) {
	aspect-ratio: 1;
}

.dashboard a:focus-visible {
	outline: 0.2rem solid currentColor;
	outline-offset: 0.2rem;
}

.desk { grid-area: desk; }
.home { grid-area: home; }
.files { grid-area: files; }
.dash { grid-area: dash; }
.calendar { grid-area: calendar; }
.radio { grid-area: radio; }
.couchdb { grid-area: couchdb; }
.jellyfin { grid-area: jellyfin; }
.navidrome { grid-area: navidrome; }
.obsidian { grid-area: obsidian; }
.quantum { grid-area: quantum; }
.metadata { grid-area: metadata; }
.tasks { grid-area: tasks; }
.sys { grid-area: sys; }

@media (min-width: 34rem) {
	.dashboard .frame {
		--tile-size: clamp(3.5rem, 10vw, 6.25rem);
		grid-template-columns: repeat(8, var(--tile-size));
		grid-template-rows: repeat(4, var(--tile-size));
		grid-template-areas:
			"sys . . files files desk desk tasks"
			". . couchdb radio navidrome desk desk home"
			". jellyfin calendar calendar navidrome dash dash ."
			". . metadata quantum obsidian dash dash .";
	}
}

@media (min-width: 62rem) {
	.dashboard .frame {
		--tile-size: clamp(4.75rem, 6vw, 6.5rem);
		grid-template-columns: repeat(11, var(--tile-size));
		grid-template-rows: repeat(3, var(--tile-size));
		grid-template-areas:
			"sys . calendar calendar . . files files desk desk tasks"
			". . jellyfin couchdb radio dash dash navidrome desk desk home"
			". . metadata quantum obsidian dash dash navidrome . . .";
	}
}

   a:nth-child(5n):hover { background: var(--palette-1); }
   a:nth-child(5n+1):hover { background: var(--palette-2); }
   a:nth-child(5n+2):hover { background: var(--palette-3); }
   a:nth-child(5n+3):hover { background: var(--palette-4); }
   a:nth-child(5n+4):hover { background: var(--palette-5); }

   a:nth-child(5n):active { background: var(--palette-1); }
   a:nth-child(5n+1):active { background: var(--palette-2); }
   a:nth-child(5n+2):active { background: var(--palette-3); }
   a:nth-child(5n+3):active { background: var(--palette-4); }
   a:nth-child(5n+4):active { background: var(--palette-5); }


.frame div,a,label {
	border-radius:0.5rem;
}

.box {
	background: white;
	box-shadow: 0 0.1rem 0.3rem hsla(0,0%,0%, 0.3);
	/*box-shadow: 0 0.1rem 0.2rem hsla(205,50%,53%, 0.5);*/

}

@media (prefers-color-scheme: dark) {
	body {
	background-image: radial-gradient(circle, hsla(0,0%,14%,1) 1px, hsla(0,0%,10%,1) 1px);
        background-size: 15px 15px;
	color: ghostwhite;
	}
	a {
		color: hsla(0,0%,50%,1);

	}
	a:hover {
		color:black;
	}
        .box {
		background: hsla(0,0%,18%,1);
		box-shadow:0 0.1rem 0.3rem hsla(0, 0%,0%, 0.8);
		/*, 0 0.5rem 0.2rem hsla(0, 0%,0%, 1);*/
		/*box-shadow: 0 0.1rem 0.2rem rgba(255, 20,147, 0.5);*/
	}
}