#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}nav{padding:30px}nav a{font-weight:700;color:#2c3e50}nav a.router-link-exact-active{color:#42b983}.periodic-table{display:grid;grid-template-columns:repeat(18,1fr);gap:5px;padding:20px;grid-auto-rows:minmax(100px,auto);overflow-y:hidden}.element{border:1px solid #ccc;padding:10px;text-align:center;background-color:#f9f9f9;position:relative;box-sizing:border-box}.number{font-size:.8em;color:#666;position:absolute;top:5px;left:5px}.symbol{font-size:1.5em;font-weight:700;margin-top:20px}.name{font-size:.9em;color:#333}.weight{font-size:.8em;color:#999;position:absolute;bottom:5px;right:5px}.element:first-child{grid-column:1;grid-row:1}.element:nth-child(2){grid-column:18;grid-row:1}.element:nth-child(3){grid-column:1;grid-row:2}.element:nth-child(4){grid-column:2;grid-row:2}.element:nth-child(5){grid-column:13;grid-row:2}.element:nth-child(6){grid-column:14;grid-row:2}.element:nth-child(7){grid-column:15;grid-row:2}.element:nth-child(8){grid-column:16;grid-row:2}.element:nth-child(9){grid-column:17;grid-row:2}.element:nth-child(10){grid-column:18;grid-row:2}.element:nth-child(11){grid-column:1;grid-row:3}.element:nth-child(12){grid-column:2;grid-row:3}.element:nth-child(13){grid-column:13;grid-row:3}.element:nth-child(14){grid-column:14;grid-row:3}.element:nth-child(15){grid-column:15;grid-row:3}.element:nth-child(16){grid-column:16;grid-row:3}.element:nth-child(17){grid-column:17;grid-row:3}.element:nth-child(18){grid-column:18;grid-row:3}.element:nth-child(19){grid-column:1;grid-row:4}.element:nth-child(20){grid-column:2;grid-row:4}.element:nth-child(21){grid-column:3;grid-row:4}.element:nth-child(22){grid-column:4;grid-row:4}.element:nth-child(23){grid-column:5;grid-row:4}.element:nth-child(24){grid-column:6;grid-row:4}.element:nth-child(25){grid-column:7;grid-row:4}.element:nth-child(26){grid-column:8;grid-row:4}.element:nth-child(27){grid-column:9;grid-row:4}.element:nth-child(28){grid-column:10;grid-row:4}.element:nth-child(29){grid-column:11;grid-row:4}.element:nth-child(30){grid-column:12;grid-row:4}.element:nth-child(31){grid-column:13;grid-row:4}.element:nth-child(32){grid-column:14;grid-row:4}.element:nth-child(33){grid-column:15;grid-row:4}.element:nth-child(34){grid-column:16;grid-row:4}.element:nth-child(35){grid-column:17;grid-row:4}.element:nth-child(36){grid-column:18;grid-row:4}.element:nth-child(37){grid-column:1;grid-row:5}.element:nth-child(38){grid-column:2;grid-row:5}.element:nth-child(39){grid-column:3;grid-row:5}.element:nth-child(40){grid-column:4;grid-row:5}.element:nth-child(41){grid-column:5;grid-row:5}.element:nth-child(42){grid-column:6;grid-row:5}.element:nth-child(43){grid-column:7;grid-row:5}.element:nth-child(44){grid-column:8;grid-row:5}.element:nth-child(45){grid-column:9;grid-row:5}.element:nth-child(46){grid-column:10;grid-row:5}.element:nth-child(47){grid-column:11;grid-row:5}.element:nth-child(48){grid-column:12;grid-row:5}.element:nth-child(49){grid-column:13;grid-row:5}.element:nth-child(50){grid-column:14;grid-row:5}.element:nth-child(51){grid-column:15;grid-row:5}.element:nth-child(52){grid-column:16;grid-row:5}.element:nth-child(53){grid-column:17;grid-row:5}.element:nth-child(54){grid-column:18;grid-row:5}.element:nth-child(55){grid-column:1;grid-row:6}.element:nth-child(56){grid-column:2;grid-row:6}.element:nth-child(57){grid-column:3;grid-row:9}.element:nth-child(58){grid-column:4;grid-row:9}.element:nth-child(59){grid-column:5;grid-row:9}.element:nth-child(60){grid-column:6;grid-row:9}.element:nth-child(61){grid-column:7;grid-row:9}.element:nth-child(62){grid-column:8;grid-row:9}.element:nth-child(63){grid-column:9;grid-row:9}.element:nth-child(64){grid-column:10;grid-row:9}.element:nth-child(65){grid-column:11;grid-row:9}.element:nth-child(66){grid-column:12;grid-row:9}.element:nth-child(67){grid-column:13;grid-row:9}.element:nth-child(68){grid-column:14;grid-row:9}.element:nth-child(69){grid-column:15;grid-row:9}.element:nth-child(70){grid-column:16;grid-row:9}.element:nth-child(71){grid-column:17;grid-row:9}.element:nth-child(72){grid-column:4;grid-row:6}.element:nth-child(73){grid-column:5;grid-row:6}.element:nth-child(74){grid-column:6;grid-row:6}.element:nth-child(75){grid-column:7;grid-row:6}.element:nth-child(76){grid-column:8;grid-row:6}.element:nth-child(77){grid-column:9;grid-row:6}.element:nth-child(78){grid-column:10;grid-row:6}.element:nth-child(79){grid-column:11;grid-row:6}.element:nth-child(80){grid-column:12;grid-row:6}.element:nth-child(81){grid-column:13;grid-row:6}.element:nth-child(82){grid-column:14;grid-row:6}.element:nth-child(83){grid-column:15;grid-row:6}.element:nth-child(84){grid-column:16;grid-row:6}.element:nth-child(85){grid-column:17;grid-row:6}.element:nth-child(86){grid-column:18;grid-row:6}.element:nth-child(87){grid-column:1;grid-row:7}.element:nth-child(88){grid-column:2;grid-row:7}.element:nth-child(89){grid-column:3;grid-row:10}.element:nth-child(90){grid-column:4;grid-row:10}.element:nth-child(91){grid-column:5;grid-row:10}.element:nth-child(92){grid-column:6;grid-row:10}.element:nth-child(93){grid-column:7;grid-row:10}.element:nth-child(94){grid-column:8;grid-row:10}.element:nth-child(95){grid-column:9;grid-row:10}.element:nth-child(96){grid-column:10;grid-row:10}.element:nth-child(97){grid-column:11;grid-row:10}.element:nth-child(98){grid-column:12;grid-row:10}.element:nth-child(99){grid-column:13;grid-row:10}.element:nth-child(100){grid-column:14;grid-row:10}.element:nth-child(101){grid-column:15;grid-row:10}.element:nth-child(102){grid-column:16;grid-row:10}.element:nth-child(103){grid-column:17;grid-row:10}.element:nth-child(104){grid-column:4;grid-row:7}.element:nth-child(105){grid-column:5;grid-row:7}.element:nth-child(106){grid-column:6;grid-row:7}.element:nth-child(107){grid-column:7;grid-row:7}.element:nth-child(108){grid-column:8;grid-row:7}.element:nth-child(109){grid-column:9;grid-row:7}.element:nth-child(110){grid-column:10;grid-row:7}.element:nth-child(111){grid-column:11;grid-row:7}.element:nth-child(112){grid-column:12;grid-row:7}.element:nth-child(113){grid-column:13;grid-row:7}.element:nth-child(114){grid-column:14;grid-row:7}.element:nth-child(115){grid-column:15;grid-row:7}.element:nth-child(116){grid-column:16;grid-row:7}.element:nth-child(117){grid-column:17;grid-row:7}.element:nth-child(118){grid-column:18;grid-row:7}@media (max-width:768px){.periodic-table{grid-template-columns:repeat(4,1fr);gap:2px;padding:10px}.element{padding:5px;height:auto}.symbol{font-size:1.2em;margin-top:10px}.name,.number,.weight{font-size:.7em}}