body {
	background-color: black;
	font-family: degular-display, sans-serif;
	padding: 10px;
}

#periodic-table
{
	display: grid;
	grid-template-columns: repeat(18, 1fr);
	grid-template-rows: repeat(7, 1fr)
		[separator-start] 0.25fr
		[separator-end lanthanides-start] 1fr
		[lanthanides-end actinides-start] 1fr
		[actinides-end];
	grid-gap: 0.250em;
	list-style: none;
	padding: 0;
	counter-reset: atomic-number;
}

#news
{
	color: grey;
	font-size: 1em;
	position: absolute;
	bottom: 10px;
	right: 10px;
	padding-right: 0.250em;
	opacity: 0.25;
}

#periodic-table li
{
	border: 1px solid grey;
	color: grey;
	padding: 0.5em 0.125em;
	text-align: center;
	counter-increment: atomic-number;
	height: 1.5em;
	font-size: 2em;
	opacity: 0.25;
}

.found {
	 opacity: 1 !important;
	 cursor: pointer;
}

.found:hover
{
	color: white !important;
	border: 1px solid white !important;
}


#periodic-table li:nth-of-type(2)
{
	grid-column: 18;
}

#periodic-table li:nth-of-type(5),
#periodic-table li:nth-of-type(13)
{
	grid-column: 13;
}

#periodic-table li:nth-of-type(n+58):nth-of-type(-n+71)
{
	grid-row: lanthanides;
}

#periodic-table li:nth-of-type(n+90):nth-of-type(-n+103)
{
	grid-row: actinides;
}

#periodic-table::before
{
	content: '';
	grid-row: lanthanides / actinides;
	grid-column: 1 / span 3;
}

/* @media (min-width: 60em)
{
	#periodic-table li::before
	{
		content: counter(atomic-number, decimal);
		font-feature-settings: 'subs';
	}
}

@media (min-width: 72em)
{
	#periodic-table li
	{
		font-size: 1.2em;
	}

	#periodic-table li::after
	{
		content: attr(title);
		display: block;
		margin-top: 0.5em;
		font-size: 0.5em;
	}
}

@media (min-width: 90em)
{
	#periodic-table li
	{
		font-size: 1.5em;
	}
} */