.element{
    position:absolute;
    height:38px;
    width:38px;

    font-family: Arial, sans-serif, Helvetica;

    border-radius: 5px;
    user-select: none;
}
.element .atomic-number{
    font-size:8px;
    position: absolute;
    top:2px;left: 2px;
}
.element .symbol{
    font-size:15px;
    position: absolute;
    bottom:50%;left: 50%;
    transform: translate(-50%, 50%);
}
.element .name{
    font-size:7px;
    position: absolute;
    bottom:0;left: 50%;
    transform: translate(-50%, 0%);
}


.actinides{
    background-color: #efbebe;
}
.alkali-metals{
    background-color: #c4efbe;
}
.alkaline-earth-metals{
    background-color: #efdfbe;
}
.lanthanides{
    background-color: #efd2be;
}
.metalloids{
    background-color: #eeb5c4;
}
.noble-gases{
    background-color: #f5a2a2;
}
.post-transition-metals{
    background-color: #e9beef;
}
.reactive-nonmetal{
    background-color: #BED7EF;
}
.transition-metals{
    background-color: #bcaff2;
}
.unknown-properties{
    background-color: #e5dfdf;
}


#molybdenum .name,
#darmstadium .name,
#roentgenium .name,
#copernicium .name,
#livermorium .name,
#mendelevium .name{
    font-size:6px;
    bottom:1px;
}

#rutherfordium .name,
#praseodymium .name{
    font-size:5px;
    bottom:2px;
}