: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;*/
}

   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);*/
	}
}