/* body */
body {
	background-color: #3399CC; 
/*	margin: 20px 0px 20px 0px; */
	margin-top: 20;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 30;
	-webkit-text-size-adjust: 100%;
}

	/* grid_container */
.grid-container {
	display: grid;
	grid-template-columns: auto;
	gap: 5px;
	width: 900px;
	margin: auto;
}

.grid-container > div {
	background-color: #ffff99;
	border: 1px solid black;
	border-radius: 5px;
	padding: 5px 25px;
}

.grid-container > div:nth-of-type(1) {
	font-size: 50px;
}

.grid-container > div:nth-of-type(2) {
	display: none;
/*	visibility: hidden; */
}

.grid-container > div:nth-of-type(3) {
	height: 800px;
}

.fontz {
	background-color: black;
	color: white;
	width: fit-content;
	font-size: 20px;
}

.mitten {
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ruta {
	position: relative;
	border: 5px solid black;
	height: fit-content;
	width: fit-content;
	padding: 50px 150px 50px 50px;
	top: 0%;
	left: 0%;
	overflow: hidden;
}

.grid-container div:nth-of-type(3) > div:nth-of-type(3) {
	border: 0px solid black;
	padding: 0px 0px 0px 50px;
}

.container, .container2 {
	height: 300px;
	width: 300px;
	position: relative;
	top: 0px;
	left: 0px;
	float: left;
}

.container2 {
	left: 100px;
}

.square {
	height: 94%;
	width: 94%;
	background: white;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -47% 0 0 -47%;
}

 .black-0,  .black-1,  .black-2, 
 .black-3,  .black-4,  .black-5, 
 .black-6,  .black-7,  .black-8, 
 .black-9, .black-10, .black-11, 
.black-12, .black-13, .black-14, 
.black {
	background: black;
}

.black2 {
	background: red;
}

@keyframes rotate {
	  0%{ transform: rotate(0deg); }
	100%{ transform: rotate(360deg); }
}

@keyframes rotate2 {
	  0%{ transform: rotate(360deg); }
	100%{ transform: rotate(0deg); }
}

.test1 {
	width: 100px;
	height: 100px;
	border: 10px dashed black;
	position: relative;
}

@keyframes example {
	  0%	{
		border-radius: 0 0 0 0;
		transform: rotate(0deg);
		left:0px;
		top:0px;
		}
	 25%	{
		border-radius: 50% 0 0 0;
		transform: rotate(calc(2turn + 90deg));
		left:500px;
		top:0px;
		}
	 50%	{
		border-radius: 50% 50% 0 0;
		transform: rotate(calc(4turn + 180deg));
		left:500px;
		top:100px;
		}
	 75%	{
		border-radius: 50% 0 50% 0;
		transform: rotate(calc(6turn + 270deg));
		left:0px;
		top:100px;
		}
	100%	{
		border-radius: 50% 50% 50% 50%;
		transform: rotate(calc(8turn + 360deg));
		left:0px;
		top:0px;
		}
}

.grid-checkbox {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(4, 50px min-content);
	grid-template-rows: auto auto auto auto auto;
	border: 1px solid red;
	background-color: blue;
	gap: 1px 5px;
}

.grid-checkbox input[type=checkbox] {
	accent-color: red;
}

.grid-checkbox {
	counter-reset: grcote;
}

.grid-checkbox > div:nth-of-type(10n+6):nth-of-type(-n+26)::before,
.grid-checkbox > div:nth-of-type(10n+7):nth-of-type(-n+27)::before,
.grid-checkbox > div:nth-of-type(10n+8):nth-of-type(-n+28)::before,
.grid-checkbox > div:nth-of-type(10n+9):nth-of-type(-n+29)::before,
.grid-checkbox > div:nth-of-type(10n+10):nth-of-type(-n+30)::before {
	color: white;
	counter-increment: grcote;
	content: '' counter(grcote) '';
}

.grid-checkbox > div:nth-of-type(5n+1):nth-of-type(-n+31),
.grid-checkbox > div:nth-of-type(5n+2):nth-of-type(-n+32),
.grid-checkbox > div:nth-of-type(5n+3):nth-of-type(-n+33),
.grid-checkbox > div:nth-of-type(5n+4):nth-of-type(-n+34),
.grid-checkbox > div:nth-of-type(5n+5):nth-of-type(-n+35) {
	text-align: right;
}

.grid-checkbox > div:nth-of-type(36),
.grid-checkbox > div:nth-of-type(n+39):nth-of-type(-n+40) {
	white-space: nowrap;
	color: white;
}