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

a:hover {
	font-weight: 1000;
	/*background: deeppink;
	color: ghostwhite;*/
}

   a:nth-child(5n):hover { background: #39ff14; } /* neon green */
   a:nth-child(5n+1):hover { background: #ff073a; } /* neon red */
   a:nth-child(5n+2):hover { background: #0ff0fc; } /* neon cyan */
   a:nth-child(5n+3):hover { background: #f6f; }    /* neon pink */
   a:nth-child(5n+4):hover { background: #f9f900; } /* neon yellow */

   a:nth-child(5n):active { background: #39ff14; } /* neon green */
   a:nth-child(5n+1):active { background: #ff073a; } /* neon red */
   a:nth-child(5n+2):active { background: #0ff0fc; } /* neon cyan */
   a:nth-child(5n+3):active { background: #f6f; }    /* neon pink */
   a:nth-child(5n+4):active { background: #f9f900; } /* neon yellow */


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