.grid-container {
  	display: grid;
  	grid-template-columns: repeat(18, 1fr);
  	grid-gap: 4px;
}
.elDef {
    background-color: dimgray;
}
.elBox {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
}
.elBox:hover{
    background-color:#eeeeee;
    transition-duration: 0.1s;
}

.elText {
   position:  absolute;
   top: 24px;
   left: 6px;
   bottom: 0;
   right: 0;
   text-align: left;
   font-size: 20px;
   font-weight: 700;
   color: white;
}

.elText-Big {
   position:  absolute;
   top: 42%;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   font-size: 150px;
   font-weight: 700;
   color: white;
}

.elNumber {
   position:  absolute;
   top: 2px;
   left: 6px;
   bottom: 0;
   right: 6px;
   text-align: left;
   font-size: 14px;
   font-weight: 400;
   color: white;
}

.elNumber-Big {
   position:  absolute;
   top: 2px;
   left: 6px;
   bottom: 0;
   right: 6px;
   text-align: right;
   font-size: 24px;
   font-weight: 400;
   color: white;
}

/* Types of Elements */

.reactiveNonmetal {
	background-color: #8D6E63;
}

.alkaliMetal {
	background-color: #EF5350;
}

.alkalineEarthMetal {
	background-color: #AB47BC;
}

.lanthanoid {
	background-color: #5C6BC0;
}

.actinide {
	background-color: #FFA726;
}

.transitionMetal {
	background-color: #26A69A;
}

.postTransitionMetal {
	background-color: #9CCC65;
}

.metalloid {
	background-color: #FFEE58;
}

.nobleGas {
	background-color: #29B6F6;
}

.unknownChemical {
	background-color: #78909C;
}

.H-1 {
    grid-column: 1;
    grid-row: 1;
}

.He-2 {
    grid-column: 18;
    grid-row: 1;
}
.Li-3 {
    grid-column: 1;
    grid-row: 2;
}
.Be-4 {
    grid-column: 2;
    grid-row: 2;
}
.B-5 {
    grid-column: 13;
    grid-row: 2;
}
.C-6 {
    grid-column: 14;
    grid-row: 2;
}
.N-7 {
    grid-column: 15;
    grid-row: 2;
}
.O-8 {
    grid-column: 16;
    grid-row: 2;
}
.F-9 {
    grid-column: 17;
    grid-row: 2;
}
.Ne-10 {
    grid-column: 18;
    grid-row: 2;
}
.Na-11 {
    grid-column: 1;
    grid-row: 3;
}
.Mg-12 {
    grid-column: 2;
    grid-row: 3;
}
.Al-13 {
    grid-column: 13;
    grid-row: 3;
}
.Si-14 {
    grid-column: 14;
    grid-row: 3;
}
.P-15 {
    grid-column: 15;
    grid-row: 3;
}
.S-16 {
    grid-column: 16;
    grid-row: 3;
}
.Cl-17 {
    grid-column: 17;
    grid-row: 3;
}
.Ar-18 {
    grid-column: 18;
    grid-row: 3;
}
.K-19 {
    grid-column: 1;
    grid-row: 4;
}
.Ca-20 {
    grid-column: 2;
    grid-row: 4;
}
.Sc-21 {
    grid-column: 3;
    grid-row: 4;
}
.Ti-22 {
    grid-column: 4;
    grid-row: 4;
}
.V-23 {
    grid-column: 5;
    grid-row: 4;
}
.Cr-24 {
    grid-column: 6;
    grid-row: 4;
}
.Mn-25 {
    grid-column: 7;
    grid-row: 4;
}
.Fe-26 {
    grid-column: 8;
    grid-row: 4;
}
.Co-27 {
    grid-column: 9;
    grid-row: 4;
}
.Ni-28 {
    grid-column: 10;
    grid-row: 4;
}
.Cu-29 {
    grid-column: 11;
    grid-row: 4;
}
.Zn-30 {
    grid-column: 12;
    grid-row: 4;
}
.Ga-31 {
    grid-column: 13;
    grid-row: 4;
}
.Ge-32 {
    grid-column: 14;
    grid-row: 4;
}
.As-33 {
    grid-column: 15;
    grid-row: 4;
}
.Se-34 {
    grid-column: 16;
    grid-row: 4;
}
.Br-35 {
    grid-column: 17;
    grid-row: 4;
}
.Kr-36 {
    grid-column: 18;
    grid-row: 4;
}
.Rb-37 {
    grid-column: 1;
    grid-row: 5;
}

.Sr-38 {
    grid-column: 2;
    grid-row: 5;
}
.Y-39 {
    grid-column: 3;
    grid-row: 5;
}
.Zr-40 {
    grid-column: 4;
    grid-row: 5;
}
.Nb-41 {
    grid-column: 5;
    grid-row: 5;
}
.Mo-42 {
    grid-column: 6;
    grid-row: 5;
}
.Tc-43 {
    grid-column: 7;
    grid-row: 5;
}
.Ru-44 {
    grid-column: 8;
    grid-row: 5;
}
.Rh-45 {
    grid-column: 9;
    grid-row: 5;
}
.Pd-46 {
    grid-column: 10;
    grid-row: 5;
}
.Ag-47 {
    grid-column: 11;
    grid-row: 5;
}
.Cd-48 {
    grid-column: 12;
    grid-row: 5;
}
.In-49 {
    grid-column: 13;
    grid-row: 5;
}
.Sn-50 {
    grid-column: 14;
    grid-row: 5;
}
.Sb-51 {
    grid-column: 15;
    grid-row: 5;
}
.Te-52 {
    grid-column: 16;
    grid-row: 5;
}
.I-53 {
    grid-column: 17;
    grid-row: 5;
}
.Xe-54 {
    grid-column: 18;
    grid-row: 5;
}
.Cs-55 {
    grid-column: 1;
    grid-row: 6;
}

.Ba-56 {
    grid-column: 2;
    grid-row: 6;
}
.La-57 {
    grid-column: 3;
    grid-row: 6;
}
.Hf-72 {
    grid-column: 4;
    grid-row: 6;
}
.Ta-73 {
    grid-column: 5;
    grid-row: 6;
}
.W-74 {
    grid-column: 6;
    grid-row: 6;
}
.Re-75 {
    grid-column: 7;
    grid-row: 6;
}
.Os-76 {
    grid-column: 8;
    grid-row: 6;
}
.Ir-77 {
    grid-column: 9;
    grid-row: 6;
}
.Pt-78 {
    grid-column: 10;
    grid-row: 6;
}
.Au-79 {
    grid-column: 11;
    grid-row: 6;
}
.Hg-80 {
    grid-column: 12;
    grid-row: 6;
}
.Tl-81 {
    grid-column: 13;
    grid-row: 6;
}
.Pb-82 {
    grid-column: 14;
    grid-row: 6;
}
.Bi-83 {
    grid-column: 15;
    grid-row: 6;
}
.Po-84 {
    grid-column: 16;
    grid-row: 6;
}
.At-85 {
    grid-column: 17;
    grid-row: 6;
}
.Rn-86 {
    grid-column: 18;
    grid-row: 6;
}
.Fr-87 {
    grid-column: 1;
    grid-row: 7;
}

.Ra-88 {
    grid-column: 2;
    grid-row: 7;
}
.Ac-89 {
    grid-column: 3;
    grid-row: 7;
}
.Rf-104 {
    grid-column: 4;
    grid-row: 7;
}
.Db-105 {
    grid-column: 5;
    grid-row: 7;
}
.Sg-106 {
    grid-column: 6;
    grid-row: 7;
}
.Bh-107 {
    grid-column: 7;
    grid-row: 7;
}
.Hs-108 {
    grid-column: 8;
    grid-row: 7;
}
.Mt-109 {
    grid-column: 9;
    grid-row: 7;
}
.Ds-110 {
    grid-column: 10;
    grid-row: 7;
}
.Rg-111 {
    grid-column: 11;
    grid-row: 7;
}
.Cn-112 {
    grid-column: 12;
    grid-row: 7;
}
.Nh-113 {
    grid-column: 13;
    grid-row: 7;
}
.Fl-114 {
    grid-column: 14;
    grid-row: 7;
}
.Mc-115 {
    grid-column: 15;
    grid-row: 7;
}
.Lv-116 {
    grid-column: 16;
    grid-row: 7;
}
.Ts-117 {
    grid-column: 17;
    grid-row: 7;
}
.Og-118 {
    grid-column: 18;
    grid-row: 7;
}
.Ce-58 {
    grid-column: 4;
    grid-row: 8;
}
.Pr-59 {
    grid-column: 5;
    grid-row: 8;
}
.Nd-60 {
    grid-column: 6;
    grid-row: 8;
}
.Pm-61 {
    grid-column: 7;
    grid-row: 8;
}
.Sm-62 {
    grid-column: 8;
    grid-row: 8;
}
.Eu-63 {
    grid-column: 9;
    grid-row: 8;
}
.Gd-64 {
    grid-column: 10;
    grid-row: 8;
}
.Tb-65 {
    grid-column: 11;
    grid-row: 8;
}
.Dy-66 {
    grid-column: 12;
    grid-row: 8;
}
.Ho-67 {
    grid-column: 13;
    grid-row: 8;
}
.Er-68 {
    grid-column: 14;
    grid-row: 8;
}
.Tm-69 {
    grid-column: 15;
    grid-row: 8;
}
.Yb-70 {
    grid-column: 16;
    grid-row: 8;
}
.Lu-71 {
    grid-column: 17;
    grid-row: 8;
}
.Th-90 {
    grid-column: 4;
    grid-row: 9;
}
.Pa-91 {
    grid-column: 5;
    grid-row: 9;
}
.U-92 {
    grid-column: 6;
    grid-row: 9;
}
.Np-93 {
    grid-column: 7;
    grid-row: 9;
}
.Pu-94 {
    grid-column: 8;
    grid-row: 9;
}
.Am-95 {
    grid-column: 9;
    grid-row: 9;
}
.Cm-96 {
    grid-column: 10;
    grid-row: 9;
}
.Bk-97 {
    grid-column: 11;
    grid-row: 9;
}
.Cf-98 {
    grid-column: 12;
    grid-row: 9;
}
.Es-99 {
    grid-column: 13;
    grid-row: 9;
}
.Fm-100 {
    grid-column: 14;
    grid-row: 9;
}
.Md-101 {
    grid-column: 15;
    grid-row: 9;
}
.No-102 {
    grid-column: 16;
    grid-row: 9;
}
.Lr-103 {
    grid-column: 17;
    grid-row: 9;
}
/* MEDIA QUERY */

@media screen and (max-width: 1360px) {
    .elText {
        font-size:16px;
    }
}

@media screen and (max-width: 1140px) {
	.elText {
   		top: 24px;
	}	
	.elNumber {
   		left: 6px;
   		text-align: left;
   		font-size: 14px;
   		font-weight: 400;
   		color: white;
	}
}

@media screen and (max-width: 1000px) {
    .elNumber {
        display:none;
    }
	.elText {
   		top: 6px;
	}	

}

@media screen and (max-width: 978px) {
    .elNumber {
        display:none;
    }
    .elText {
        top: 2px;
        text-align: center;
        left: 0;
    }   

}

@media screen and (max-width: 768px) {
    .elNumber {
        display:none;
    }
    .elText {
        top: 0;
        text-align: center;
        left: 0;
        font-size:14px;
    }   

}