*
{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}
.Periodensystem
{
	width: 850px;
}

.Periodensystem_Main
{
	display: grid;
	grid-template-areas: 
	". Gruppennummer_I   .  .  . . . . . . . . . . . . . . Gruppennummer_VIII"
	"Periodenummer_one   H  Gruppennummer_II . . . . . . . . . . Gruppennummer_III Gruppennummer_IV Gruppennummer_V Gruppennummer_VI Gruppennummer_VII He"
	"Periodenummer_two   Li Be  . . . . . . . . . . B C N O F Ne"
	"Periodenummer_three Na Mg Gruppennummer_III_A Gruppennummer_IV_A Gruppennummer_V_A Gruppennummer_VI_A Gruppennummer_VII_A Gruppennummer_VIII_A Gruppennummer_VIII_A Gruppennummer_VIII_A Gruppennummer_I_A Gruppennummer_II_A Al Si P S Cl Ar"
	"Periodenummer_four  K  Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga Ge As Se Br Kr"
	"Periodenummer_five  Rb Sr Y  Zr Nb Mo Tc Ru Rh Pd Ag Cd In Sn Sb Te I Xe"
	"Periodenummer_six   Cs Ba Lanthanoide Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po At Rn"
	"Periodenummer_seven Fr Ra Acrinoide Rf Db Sg Bh Hs Mt Ds Rg Cn . Fl . Lv . .";
	grid-gap: 5px;
}

.Element
{
	border-radius: 5px;
	height: 40px;
	width: 40px;
}
.Element .Element_Name
{
	font-size: 18px;
	position: absolute;
	transform: translate(3px, 10px);
}
.Element .Massenzahl
{
	font-size: 10px;
	position: absolute;
	transform: translate(19px, 3px);
}
.Element .Ordnungszahl
{
	font-size: 10px;
	position: absolute;
	transform: translate(19px, 29px);
}

.fest .Element_Name
{ color: #212121; }
.gasförmig .Element_Name
{ color: #C0392B; }
.früssig .Element_Name
{ color: #34495E; }

.Metalle
{ background-color: #85C1E9; }
.Halbmetalle
{ background-color: #A9DFBF; }
.Nichtmetalle
{ background-color: #F7DC6F; }

.Gruppennummer_I
{ grid-area: Gruppennummer_I; }
.Gruppennummer_II
{ grid-area: Gruppennummer_II; }
.Gruppennummer_III
{ grid-area: Gruppennummer_III; }
.Gruppennummer_IV
{ grid-area: Gruppennummer_IV; }
.Gruppennummer_V
{ grid-area: Gruppennummer_V; }
.Gruppennummer_VI
{ grid-area: Gruppennummer_VI; }
.Gruppennummer_VII
{ grid-area: Gruppennummer_VII; }
.Gruppennummer_VIII
{ grid-area: Gruppennummer_VIII; }
.Gruppennummer_III_A
{ grid-area: Gruppennummer_III_A; }
.Gruppennummer_IV_A
{ grid-area: Gruppennummer_IV_A; }
.Gruppennummer_V_A
{ grid-area: Gruppennummer_V_A; }
.Gruppennummer_VI_A
{ grid-area: Gruppennummer_VI_A; }
.Gruppennummer_VII_A
{ grid-area: Gruppennummer_VII_A; }
.Gruppennummer_VIII_A
{ grid-area: Gruppennummer_VIII_A; }
.Gruppennummer_I_A
{ grid-area: Gruppennummer_I_A; }
.Gruppennummer_II_A
{ grid-area: Gruppennummer_II_A; }
.Periodenummer_1
{ grid-area: Periodenummer_one }
.Periodenummer_2
{ grid-area: Periodenummer_two }
.Periodenummer_3 
{ grid-area: Periodenummer_three }
.Periodenummer_4 
{ grid-area: Periodenummer_four }
.Periodenummer_5 
{ grid-area: Periodenummer_five }
.Periodenummer_6 
{ grid-area: Periodenummer_six }
.Periodenummer_7 
{ grid-area: Periodenummer_seven }
.Periodensystem_Main .H
{ grid-area: H; }
.Periodensystem_Main .Li
{ grid-area: Li; }
.Periodensystem_Main .Na
{ grid-area: Na; }
.Periodensystem_Main .K
{ grid-area: K; }
.Periodensystem_Main .Rb
{ grid-area: Rb; }
.Periodensystem_Main .Cs
{ grid-area: Cs }
.Periodensystem_Main .Fr
{ grid-area: Fr; }
.Periodensystem_Main .Be
{ grid-area: Be; }
.Periodensystem_Main .Mg
{ grid-area: Mg; }
.Periodensystem_Main .Ca
{ grid-area: Ca; }
.Periodensystem_Main .Sr
{ grid-area: Sr; }
.Periodensystem_Main .Ba
{ grid-area: Ba; }
.Periodensystem_Main .Ra
{ grid-area: Ra; }
.Periodensystem_Main .Sc
{ grid-area: Sc; }
.Periodensystem_Main .Y
{ grid-area: Y; }
.Periodensystem_Main .Ti
{ grid-area: Ti; }
.Periodensystem_Main .Zr
{ grid-area: Zr; }
.Periodensystem_Main .Hf
{ grid-area: Hf; }
.Periodensystem_Main .Rf
{ grid-area: Rf; }
.Periodensystem_Main .V
{ grid-area: V; }
.Periodensystem_Main .Nb
{ grid-area: Nb; }
.Periodensystem_Main .Ta
{ grid-area: Ta; }
.Periodensystem_Main .Db
{ grid-area: Db; }
.Periodensystem_Main .Cr
{ grid-area: Cr; }
.Periodensystem_Main .Mo
{ grid-area: Mo; }
.Periodensystem_Main .W
{ grid-area: W; }
.Periodensystem_Main .Sg
{ grid-area: Sg; }
.Periodensystem_Main .Mn
{ grid-area: Mn; }
.Periodensystem_Main .Tc
{ grid-area: Tc; }
.Periodensystem_Main .Re
{ grid-area: Re; }
.Periodensystem_Main .Bh
{ grid-area: Bh; }
.Periodensystem_Main .Fe
{ grid-area: Fe; }
.Periodensystem_Main .Ru
{ grid-area: Ru; }
.Periodensystem_Main .Os
{ grid-area: Os; }
.Periodensystem_Main .Hs
{ grid-area: Hs; }
.Periodensystem_Main .Co
{ grid-area: Co; }
.Periodensystem_Main .Rh
{ grid-area: Rh; }
.Periodensystem_Main .Ir
{ grid-area: Ir; }
.Periodensystem_Main .Mt
{ grid-area: Mt; }
.Periodensystem_Main .Ni
{ grid-area: Ni; }
.Periodensystem_Main .Pd
{ grid-area: Pd; }
.Periodensystem_Main .Pt
{ grid-area: Pt; }
.Periodensystem_Main .Ds
{ grid-area: Ds; }
.Periodensystem_Main .Cu
{ grid-area: Cu; }
.Periodensystem_Main .Ag
{ grid-area: Ag; }
.Periodensystem_Main .Au
{ grid-area: Au; }
.Periodensystem_Main .Rg
{ grid-area: Rg; }
.Periodensystem_Main .Zn
{ grid-area: Zn; }
.Periodensystem_Main .Cd
{ grid-area: Cd; }
.Periodensystem_Main .Hg
{ grid-area: Hg; }
.Periodensystem_Main .Cn
{ grid-area: Cn; }
.Periodensystem_Main .B
{ grid-area: B; }
.Periodensystem_Main .Al
{ grid-area: Al; }
.Periodensystem_Main .Ga
{ grid-area: Ga; }
.Periodensystem_Main .In
{ grid-area: In; }
.Periodensystem_Main .Tl
{ grid-area: Tl; }
.Periodensystem_Main .C
{ grid-area: C; }
.Periodensystem_Main .Si
{ grid-area: Si; }
.Periodensystem_Main .Ge
{ grid-area: Ge; }
.Periodensystem_Main .Sn
{ grid-area: Sn; }
.Periodensystem_Main .Pb
{ grid-area: Pb; }
.Periodensystem_Main .Fl
{ grid-area: Fl; }
.Periodensystem_Main .N
{ grid-area: N; }
.Periodensystem_Main .P
{ grid-area: P; }
.Periodensystem_Main .As
{ grid-area: As; }
.Periodensystem_Main .Sb
{ grid-area: Sb; }
.Periodensystem_Main .Bi
{ grid-area: Bi; }
.Periodensystem_Main .O
{ grid-area: O; }
.Periodensystem_Main .S
{ grid-area: S; }
.Periodensystem_Main .Se
{ grid-area: Se; }
.Periodensystem_Main .Te
{ grid-area: Te; }
.Periodensystem_Main .Po
{ grid-area: Po; }
.Periodensystem_Main .Lv
{ grid-area: Lv; }
.Periodensystem_Main .F
{ grid-area: F; }
.Periodensystem_Main .Cl
{ grid-area: Cl; }
.Periodensystem_Main .Br
{ grid-area: Br; }
.Periodensystem_Main .I
{ grid-area: I; }
.Periodensystem_Main .At
{ grid-area: At; }
.Periodensystem_Main .He
{ grid-area: He; }
.Periodensystem_Main .Ne
{ grid-area: Ne; }
.Periodensystem_Main .Ar
{ grid-area: Ar; }
.Periodensystem_Main .Kr
{ grid-area: Kr; }
.Periodensystem_Main .Xe
{ grid-area: Xe; }
.Periodensystem_Main .Rn
{ grid-area: Rn; }

.Periodensystem_Main .Lanthanoide
{ grid-area: Lanthanoide; }
.Periodensystem_Main .Acrinoide
{ grid-area: Acrinoide; }