@import"https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;600&display=swap";body{overflow-y:auto;overflow-x:auto}.periodicTable{display:grid;grid-template-columns:repeat(18,auto);grid-template-rows:repeat(10,auto);row-gap:3px;margin-top:2rem;max-width:100%;height:auto}.nobleGas,.lanthanide,.nonMetal,.alkaliMetal,.alkalineEarthMetal,.metalloid,.halogen,.transitionMetal,.postTransitionMetal,.actinide,.elementTile{margin:1px;width:67px;max-width:67px;min-width:55px;height:auto;border:1px solid #000000}.nonMetal{background-color:#fff;transition:.2s;color:#919100;border-color:#919100}.nonMetal:hover{color:#000;background-image:linear-gradient(to bottom right,#fbfb89,#eee,#fbfb89);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.nobleGas{color:#ffa27e;border-color:#ffa27e;background-color:#fff;transition:.2s}.nobleGas:hover{color:#000;background-image:linear-gradient(to bottom right,#ffa27e,#eee,#ffa27e);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.alkaliMetal{color:#cc5f5f;border-color:#cc5f5f;background-color:#fff;transition:.2s}.alkaliMetal:hover{color:#000;background-image:linear-gradient(to bottom right,#cc5f5f,#eee,#cc5f5f);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.alkalineEarthMetal{color:#8d29eb;background-color:#fff;border-color:#8d29eb;transition:.2s}.alkalineEarthMetal:hover{color:#000;background-image:linear-gradient(to bottom right,#8d29eb,#eee,#8d29eb);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.metalloid{color:#31a931;background-color:#fff;border-color:#31a931;transition:.2s}.metalloid:hover{color:#000;background-image:linear-gradient(to bottom right,#31a931,#eee,#31a931);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.postTransitionMetal{color:#a1fb1b;border-color:#a1fb1b;background-color:#fff;transition:.2s}.postTransitionMetal:hover{color:#000;background-image:linear-gradient(to bottom right,#a1fb1b,#eee,#a1fb1b);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.halogen{color:#8aaa00;background-color:#fff;border-color:#8aaa00;transition:.2s}.halogen:hover{color:#000;background-image:linear-gradient(to bottom right,#daff36,#eee,#daff36);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.transitionMetal{color:#47cbf7;background-color:#fff;border-color:#47cbf7;transition:.2s}.transitionMetal:hover{color:#000;background-image:linear-gradient(to bottom right,#47cbf7,#eee,#47cbf7);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.lanthanide{color:#5252ec;background-color:#fff;border-color:#5252ec;transition:.2s}.lanthanide:hover{color:#000;background-image:linear-gradient(to bottom right,#5252ec,#eee,#5252ec);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.actinide{color:#f4ab3c;border-color:#f4ab3c;background-color:#fff;transition:.2s}.actinide:hover{color:#000;background-image:linear-gradient(to bottom right,#f4ab3c,#eee,#f4ab3c);transform:scale(1.25);transition:.2s;cursor:pointer;border:none}.elementNumber{font-size:10px;font-weight:700;padding-top:2px;padding-left:4px}.elementSymbol{font-size:2.25rem;font-weight:700;text-align:center;line-height:1}.elementName,.elementAtomicMass{font-size:.65rem;letter-spacing:.2px;overflow:hidden;text-align:center;line-height:1.4}.blankRow1{grid-column:2/span 12;grid-row:1}.blankRowAd{grid-column:14/span 4;grid-row:1}.blankRow2{grid-column:3/span 10;grid-row:2/span 2}.blankRow3{grid-column:3;grid-row:6/span 2}.blankRow4{grid-column:1/span 18;grid-row:8;margin:6px}.blankRow5{grid-column:1/span 3;grid-row:9/span 2}@media (max-width: 767px){body{margin:0;min-width:340px}.periodicTable{display:flex;flex-direction:column;padding:0 25px 25px}.nobleGas,.lanthanide,.nonMetal,.alkaliMetal,.alkalineEarthMetal,.metalloid,.halogen,.transitionMetal,.postTransitionMetal,.actinide,.elementTile{width:100%;max-width:none;min-width:none;min-height:50px;margin-bottom:10px}.nobleGas:hover,.lanthanide:hover,.nonMetal:hover,.alkaliMetal:hover,.alkalineEarthMetal:hover,.metalloid:hover,.halogen:hover,.transitionMetal:hover,.postTransitionMetal:hover,.actinide:hover,.elementTile:not(.elementTileDisabled):hover{transform:scale(1.01);border:2px solid rgba(255,255,255,0)}.blankRow1,.blankRow2,.blankRow3,.blankRow4,.blankRow5{display:none}.elementTile{display:flex;align-items:center}.elementNumber{width:10%;text-align:center;font-size:1.2rem}.elementSymbol{width:10%;text-align:center;font-size:1.8rem}.elementName,.elementAtomicMass{width:70%;padding-left:5%;font-size:1.3rem;transform:translateY(15%);letter-spacing:2px}}.elementTile{transition:.2s;color:var(--element-text-color);background:var(--element-bg-color);box-shadow:0 4px 4px 0 var(--element-bg-color)}.elementTile:not(.elementTileDisabled):hover{transform:scale(1.25);transition:.2s;cursor:pointer;color:var(--element-text-hover-color);background:var(--element-bg-hover-color)}.elementTile.elementTileDisabled{background:#a6a6a6;box-shadow:none;border-color:#a6a6a6;min-height:85.13px}.elementTile.elementTileDisabled div{display:none}