body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
main
{
    display:flex;
    flex-direction:column;

}
main>aside
{
    flex-basis:30%;
   
}
main>article
{
    flex-grow:1;
  
    
}
article > ol
{
    display: grid;
    list-style-type: none;
    grid-template-columns: 1em repeat(18, minmax(60px, 1fr));
    grid-gap: 2px 2px;
    padding:0;
    
}
.Group {
    text-align: center;
    color: #003660;
    line-height:1;
}
.Period {
    align-self: center;
    text-align: right;
    color: #003660;
    line-height: 1;
}
.Gas 
{
    color: #900;
}
.Liquid
{
    color: #00D
}
.UnknownState
{
    color: #676
}
.Nonmetal {
    background-color: hsl(120deg, 73%, 74%);
}
.Noble
{
    background-color: hsl(300deg, 44%, 82%);
}
.Alkali 
{
    background-color: hsl(48deg, 77%, 64%);
}
.Alkaline
{
    background-color: hsl(60deg, 83%, 67%);
}
.Metalloid 
{
    background-color: hsl(165deg, 58%, 76%);
}
.Poor
{
    background-color: hsl(192deg, 62%, 80%);
}
.Transition
{
    background-color: hsl(12deg, 87%, 85%);
}
.Lanthanoid {
    background-color: hsl(42deg, 62%, 76%);
    grid-row-start: 10;
    /*grid-column-start: 5;*/
}
.Actinoid
{
    background-color: hsl(340deg, 67%, 88%);
    grid-row-start: 11;
}
.Unknown
{
    background-color: #EEE;
}

li {
    line-height: 0.9;
    display: block;
    font-weight: normal;
    padding: 0.2rem;
    pointer-events: none;
}

em,data
{
    font-size:0.8em;
    font-style:normal;
}
b {
    font-size: 1em;
    font-weight: normal
}
abbr {
    font-weight: 600;
    font-size: 1.5em;
}
.EmptyRegion 
{
    display: flex;
    grid-column: 4/14;
    grid-row: 2/5;
    justify-content: space-evenly;
}
.EmptyRegion2
{
    grid-column:14/19
}
.EmptyRegion3 
{
    grid-column: 1 / span 3;
    grid-row: 9 / span 3;
}
.Parentheses 
{
    grid-column-end:span 15;
    font-size: 1em;
    margin:6px;
    text-align:center;
}
.Description > abbr {
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.4;
}
.Description > b 
{
    font-size:0.8em;
}
.VerticalInner 
{
    grid-column-start: 4;
    grid-row: 7/span 5;
    background-color: #CEF;
    border: solid #AAF;
}
.Label51-57 {
    grid-column-start: 4;
    grid-row-start: 7;
    font-size: 0.9em;
    align-self: center;
    text-align: center;
}
.Label89-103 
{
    grid-column-start: 4;
    grid-row-start: 8;
    font-size: 0.9em;
    align-self: center;
    text-align: center;
}
.Period-Removed6 {
    grid-column-start: 4;
    grid-row-start: 10;
    text-align: right;
    align-self: center;
    padding-right: 5px;
}
.Period-Removed7
{
    grid-column-start: 4;
    grid-row-start: 11;
    text-align: right;
    align-self: center;
    padding-right: 5px;
}
.StateOfMatter
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.StateOfMatter>div
{
    display: flex;
    align-items: baseline;
}
.StateOfMatter dt
{
    border:2px solid black;
    box-sizing: content-box;
    width:1.4em;
    line-height:1.4;
    text-align: center;
    font-weight: 600;
}
dd
{
    margin:4.5px;
}
.TypeOfMatter {
    display: grid;
   grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    font-size: 1em;
    min-width: 0;
    grid-gap: 1px;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.TypeOfMatter>.Metals {
    border: 2px solid black;
    grid-column-end: span 5;
    text-align: center;
    border-bottom: none;
    border-top-left-radius:8px;
    padding:6px;
}
.TypeOfMatter > dd {
    display:flex;
    writing-mode: vertical-rl;
    grid-row-end: span 2;
    margin: 0;
    padding: 5px;
    max-height:8.72em;
}
.TypeOfMatter>.Lanthanoid, .TypeOfMatter>.Actinoid
{
    writing-mode:initial;
   grid-row-start:initial;
    grid-row-end:span 1;
}
.TypeOfMatter>.Metalloid
{
    grid-row-end:span 3;
    writing-mode:vertical-rl;
    padding:5px;
}
.TypeOfMatter > .Nonmetals 
{
    border: 2px solid black;
    grid-column-end: span 2;
    text-align: center;
    border-bottom: none;
    border-top-right-radius: 8px;
    padding: 6px;
}