.App{height:auto;width:auto;padding:1rem;margin:1rem;background:linear-gradient(135deg,#0f2027,#2c5364);box-shadow:0 0 40px #00fff7a0,inset 0 0 80px #ff00c8a0;border-radius:18px;border:2px solid #00fff7}.App,h1{text-align:center}h1{color:#ff00c8;text-shadow:0 0 8px #00fff7,0 0 24px #ff00c8;letter-spacing:2px;font-family:Orbitron,Segoe UI,Arial,sans-serif}.highlighted{border:3px solid #fffb00;box-shadow:0 0 20px #fffb00,0 0 40px #ff00c8;z-index:2}.periodic-table{display:grid;grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(7,1fr);gap:9px;margin:5px;padding:5px;width:auto;height:auto;background:rgba(20,20,40,.7);border-radius:12px;box-shadow:inset 0 0 40px #00fff7a0}.element,.periodic-table{align-items:center;justify-content:center}.element{display:flex;flex-wrap:wrap;width:70px;height:70px;border-radius:10px;cursor:pointer;transition:all .2s,box-shadow .3s;position:relative;background:inherit;box-shadow:0 4px 24px #00fff7a0,0 0 0 2px #ff00c8;border:2px solid #ff00c8;color:#fff;overflow:hidden}.element:hover{transform:scale(1.2) rotate(-2deg);box-shadow:0 0 40px #ff00c8,0 0 80px #00fff7;border-color:#fffb00;z-index:3}.number{font-size:14px;font-weight:700;top:1rem;left:3rem;color:#00fff7;text-shadow:0 0 6px #ff00c8}.symbol{font-size:1.7em;font-weight:700;position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);color:#ff00c8;text-shadow:0 0 8px #00fff7,0 0 24px #ff00c8;font-family:Orbitron,Segoe UI,Arial,sans-serif;letter-spacing:1px}.atomicMass{font-size:11px;font-weight:700;top:1rem;position:relative;color:#ff00a6;text-shadow:0 0 6px #00fff7}.element-info{position:fixed;top:0;left:0;right:0;bottom:0;scroll-behavior:auto;display:flexbox;background:linear-gradient(135deg,#0f2027cc,#2c5364cc);color:#ffffff;overflow:auto;max-height:100%;box-shadow:0 0 60px #ff00c8,inset 0 0 120px #00fff7;border:2px solid #ff00c8;border-radius:18px;opacity:100%}.element-info h2{margin-bottom:10px;font-size:22px;color:#ff00c8;text-shadow:0 0 8px #00fff7;font-family:Orbitron,Segoe UI,Arial,sans-serif}.element-info p{font-size:22px;margin:10px;text-shadow:0 0 6px #ff00c8}.element-info p,.element-info ul{font-family:Share Tech Mono,Verdana,Geneva,Tahoma,monospace;color:#00fff7}.element-info ul{list-style-type:none;padding:0;margin:0;font-size:20px;text-shadow:0 0 4px #ff00c8}.element .number{font-size:.7em;position:absolute;top:5px;right:5px;color:#00fff7;text-shadow:0 0 6px #ff00c8}.deselect-button{background:linear-gradient(90deg,#ff00c8,#00fff7);color:#fff;border:none;margin:1em;padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:background .3s,box-shadow .3s;box-shadow:0 0 16px #00fff7,inset 0 0 32px #ff00c8;letter-spacing:1px;text-shadow:0 0 4px #000}.deselect-button:hover{background:linear-gradient(90deg,#fffb00,#ff00c8);box-shadow:0 0 32px #fffb00,inset 0 0 64px #ff00c8}.category-list{display:flex;flex-wrap:wrap;list-style:none;background:rgba(0,0,0,.3);border-radius:8px;box-shadow:inset 0 0 16px #00fff7;padding:.5em}.category-item{display:flex;align-items:center;margin:.1em;padding:.5em 1em;font-size:1.3rem;color:#fff;border:2px solid #ff00c8;border-radius:10px;background:inherit;box-shadow:0 0 10px #00fff7,inset 0 0 20px #ff00c8;font-family:Orbitron,Segoe UI,Arial,sans-serif;letter-spacing:1px;transition:background .3s,box-shadow .3s,color .3s,transform .2s}.category-item:hover{background:linear-gradient(90deg,#ff00c8,#fffb00);color:#000;box-shadow:0 0 24px #fffb00,0 0 40px #ff00c8;transform:scale(1.1) skewX(-8deg)}.category-item:after{content:"";display:block;width:30px;height:10px;margin-left:10px;border-radius:8%;border:1.5px solid #eeff00}.alkali-metals:after{background:linear-gradient(90deg,#009b2c 90%,#ff00c8 0)}.alkaline-metals:after{background:linear-gradient(90deg,#aaff00 90%,#00fff7 0)}.actinides:after{background:linear-gradient(90deg,#fffb00 90%,#ff00c8 0)}.lanthanide:after{background:linear-gradient(90deg,#970101 90%,#fffb00 0)}.transition-metals:after{background:linear-gradient(90deg,purple 90%,#00fff7 0)}.post-transition-metals:after{background:linear-gradient(90deg,#faf2f2 100%,#ff00c8 0)}.metalloids:after{background:linear-gradient(90deg,#40e0d0 90%,#ff00c8 0)}.nonmetal:after{background:linear-gradient(90deg,#8F00FF 90%,#00fff7 0)}.noble-gas:after{background:linear-gradient(90deg,#003cff 90%,#ff00c8 0)}.Superheavy-Transactinide:after{background:linear-gradient(90deg,#a9a9a9 90%,#ff00c8 0)}@media only screen and (max-width:500px){.category-list{display:block}.category-item{font-size:1rem;margin-right:0}}.atomic-structure{position:relative;width:400px;height:400px;background-color:#000000;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:3rem auto}.nucleus{z-index:10;width:60px;height:60px;font-size:12px;text-align:center}.atomic-structure .nucleus,.nucleus{background-color:crimson;border-radius:50%;color:white;font-weight:700;display:flex;align-items:center;justify-content:center}.atomic-structure .nucleus{width:40px;height:40px;z-index:2;font-size:.9rem}.atomic-structure .shell{position:absolute;border:1px dashed #999;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.atomic-structure .electron{background-color:blue;border-radius:50%;width:10px;height:10px}@media (max-width:2000px){.periodic-table{grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(7,1fr)}.element{width:80px;height:80px;font-size:25px}.element:hover{transform:scale(1.1);font-size:25px}.element .number{font-size:.6em;position:absolute;top:1px;left:40px}.element .atomicMass{font-size:15px;position:absolute;top:55px}.symbol{font-size:20px;font-weight:700}}@media (max-width:1500px){.periodic-table{grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(7,1fr)}.element{width:55px;height:55px;font-size:21px}.element:hover{transform:scale(1.2);font-size:25px}.element .number{font-size:12px;position:absolute;top:4px;left:35px}.element .atomicMass{font-size:10px;position:absolute;top:40px}.symbol{font-size:20px;font-weight:700}}@media (max-width:1000px){.periodic-table{grid-template-columns:repeat(18,1fr);grid-template-rows:repeat(7,1fr)}.element{width:40px;height:40px}.element:hover{transform:scale(1.2)}.element .number{font-size:7px;position:absolute;top:4px;left:26px}.element .atomicMass{font-size:8px;position:absolute;top:28px}.symbol{font-size:12px;font-weight:700}}@media (max-width:520px){.periodic-table{display:inline-block}.category-list,.wrapper{display:block}.category-item{font-size:1rem;margin-right:0}.element{width:200px;height:200px;margin:10px 10px 30px;padding:10px;transition:all .4s;gap:20px;font-size:16px}.element:hover{transform:scale(1.2)}.symbol{font-size:4em;font-weight:700}.element .number{font-size:2em;position:absolute;top:15px;left:120px}.element .atomicMass{font-size:20px;position:absolute;top:170px}}.element[data-group="1"][data-period="1"]{grid-column:1/span 1;grid-row:1/span 1}.element[data-group="18"][data-period="1"]{grid-column:18/span 1;grid-row:1/span 1}.element[data-group="1"][data-period="2"]{grid-column:1/span 2;grid-row:2/span 1}.element[data-group="2"][data-period="2"]{grid-column:2/span 2;grid-row:2/span 1}.element[data-group="13"][data-period="2"]{grid-column:13/span 2;grid-row:2/span 1}.element[data-group="14"][data-period="2"]{grid-column:14/span 2;grid-row:2/span 1}.element[data-group="15"][data-period="2"]{grid-column:15/span 2;grid-row:2/span 1}.element[data-group="16"][data-period="2"]{grid-column:16/span 2;grid-row:2/span 1}.element[data-group="17"][data-period="2"]{grid-column:17/span 2;grid-row:2/span 1}.element[data-group="18"][data-period="2"]{grid-column:18/span 2;grid-row:2/span 1}.element[data-group="1"][data-period="3"]{grid-column:1/span 2;grid-row:3/span 1}.element[data-group="2"][data-period="3"]{grid-column:2/span 2;grid-row:3/span 1}.element[data-group="13"][data-period="3"]{grid-column:13/span 2;grid-row:3/span 1}.element[data-group="14"][data-period="3"]{grid-column:14/span 2;grid-row:3/span 1}.element[data-group="15"][data-period="3"]{grid-column:15/span 2;grid-row:3/span 1}.element[data-group="16"][data-period="3"]{grid-column:16/span 2;grid-row:3/span 1}.element[data-group="17"][data-period="3"]{grid-column:17/span 2;grid-row:3/span 1}.element[data-group="18"][data-period="3"]{grid-column:18/span 2;grid-row:3/span 1}.element[data-group="1"][data-period="4"]{grid-column:1/span 2;grid-row:4/span 1}.element[data-group="2"][data-period="4"]{grid-column:2/span 2;grid-row:4/span 1}.element[data-group="3"][data-period="4"]{grid-column:3/span 2;grid-row:4/span 1}.element[data-group="4"][data-period="4"]{grid-column:4/span 2;grid-row:4/span 1}.element[data-group="5"][data-period="4"]{grid-column:5/span 2;grid-row:4/span 1}.element[data-group="6"][data-period="4"]{grid-column:6/span 2;grid-row:4/span 1}.element[data-group="7"][data-period="4"]{grid-column:7/span 2;grid-row:4/span 1}.element[data-group="8"][data-period="4"]{grid-column:8/span 2;grid-row:4/span 1}.element[data-group="9"][data-period="4"]{grid-column:9/span 2;grid-row:4/span 1}.element[data-group="10"][data-period="4"]{grid-column:10/span 2;grid-row:4/span 1}.element[data-group="11"][data-period="4"]{grid-column:11/span 2;grid-row:4/span 1}.element[data-group="12"][data-period="4"]{grid-column:12/span 2;grid-row:4/span 1}.element[data-group="13"][data-period="4"]{grid-column:13/span 2;grid-row:4/span 1}.element[data-group="14"][data-period="4"]{grid-column:14/span 2;grid-row:4/span 1}.element[data-group="15"][data-period="4"]{grid-column:15/span 2;grid-row:4/span 1}.element[data-group="16"][data-period="4"]{grid-column:16/span 2;grid-row:4/span 1}.element[data-group="17"][data-period="4"]{grid-column:17/span 2;grid-row:4/span 1}.element[data-group="18"][data-period="4"]{grid-column:18/span 2;grid-row:4/span 1}.element[data-group="1"][data-period="5"]{grid-column:1/span 2;grid-row:5/span 1}.element[data-group="2"][data-period="5"]{grid-column:2/span 2;grid-row:5/span 1}.element[data-group="4"][data-period="5"]{grid-column:4/span 2;grid-row:5/span 1}.element[data-group="5"][data-period="5"]{grid-column:5/span 2;grid-row:5/span 1}.element[data-group="6"][data-period="5"]{grid-column:6/span 2;grid-row:5/span 1}.element[data-group="7"][data-period="5"]{grid-column:7/span 2;grid-row:5/span 1}.element[data-group="8"][data-period="5"]{grid-column:8/span 2;grid-row:5/span 1}.element[data-group="9"][data-period="5"]{grid-column:9/span 2;grid-row:5/span 1}.element[data-group="10"][data-period="5"]{grid-column:10/span 2;grid-row:5/span 1}.element[data-group="11"][data-period="5"]{grid-column:11/span 2;grid-row:5/span 1}.element[data-group="12"][data-period="5"]{grid-column:12/span 2;grid-row:5/span 1}.element[data-group="13"][data-period="5"]{grid-column:13/span 2;grid-row:5/span 1}.element[data-group="14"][data-period="5"]{grid-column:14/span 2;grid-row:5/span 1}.element[data-group="15"][data-period="5"]{grid-column:15/span 2;grid-row:5/span 1}.element[data-group="16"][data-period="5"]{grid-column:16/span 2;grid-row:5/span 1}.element[data-group="17"][data-period="5"]{grid-column:17/span 2;grid-row:5/span 1}.element[data-group="18"][data-period="5"]{grid-column:18/span 2;grid-row:5/span 1}.element[data-group="1"][data-period="6"]{grid-column:1/span 2;grid-row:6/span 1}.element[data-group="2"][data-period="6"]{grid-column:2/span 2;grid-row:6/span 1}.element[data-group="4"][data-period="6"]{grid-column:4/span 2;grid-row:6/span 1}.element[data-group="5"][data-period="6"]{grid-column:5/span 2;grid-row:6/span 1}.element[data-group="6"][data-period="6"]{grid-column:6/span 2;grid-row:6/span 1}.element[data-group="7"][data-period="6"]{grid-column:7/span 2;grid-row:6/span 1}.element[data-group="8"][data-period="6"]{grid-column:8/span 2;grid-row:6/span 1}.element[data-group="9"][data-period="6"]{grid-column:9/span 2;grid-row:6/span 1}.element[data-group="10"][data-period="6"]{grid-column:10/span 2;grid-row:6/span 1}.element[data-group="11"][data-period="6"]{grid-column:11/span 2;grid-row:6/span 1}.element[data-group="12"][data-period="6"]{grid-column:12/span 2;grid-row:6/span 1}.element[data-group="13"][data-period="6"]{grid-column:13/span 2;grid-row:6/span 1}.element[data-group="14"][data-period="6"]{grid-column:14/span 2;grid-row:6/span 1}.element[data-group="15"][data-period="6"]{grid-column:15/span 2;grid-row:6/span 1}.element[data-group="16"][data-period="6"]{grid-column:16/span 2;grid-row:6/span 1}.element[data-group="17"][data-period="6"]{grid-column:17/span 2;grid-row:6/span 1}.element[data-group="18"][data-period="6"]{grid-column:18/span 2;grid-row:6/span 1}.element[data-group="17"][data-period="8"]{grid-column:17/span 2;grid-row:8/span 1}.element[data-group="16"][data-period="8"]{grid-column:16/span 2;grid-row:8/span 1}.element[data-group="15"][data-period="8"]{grid-column:15/span 2;grid-row:8/span 1}.element[data-group="14"][data-period="8"]{grid-column:14/span 2;grid-row:8/span 1}.element[data-group="13"][data-period="8"]{grid-column:13/span 2;grid-row:8/span 1}.element[data-group="12"][data-period="8"]{grid-column:12/span 2;grid-row:8/span 1}.element[data-group="11"][data-period="8"]{grid-column:11/span 2;grid-row:8/span 1}.element[data-group="10"][data-period="8"]{grid-column:10/span 2;grid-row:8/span 1}.element[data-group="9"][data-period="8"]{grid-column:9/span 2;grid-row:8/span 1}.element[data-group="8"][data-period="8"]{grid-column:8/span 2;grid-row:8/span 1}.element[data-group="7"][data-period="8"]{grid-column:7/span 2;grid-row:8/span 1}.element[data-group="6"][data-period="8"]{grid-column:6/span 2;grid-row:8/span 1}.element[data-group="5"][data-period="8"]{grid-column:5/span 2;grid-row:8/span 1}.element[data-group="4"][data-period="8"]{grid-column:4/span 2;grid-row:8/span 1}.element[data-group="3"][data-period="5"]{grid-column:3/span 2;grid-row:5/span 1}.element[data-group="3"][data-period="6"]{grid-column:3/span 2;grid-row:6/span 1}.element[data-group="1"][data-period="7"]{grid-column:1/span 2;grid-row:7/span 1}.element[data-group="2"][data-period="7"]{grid-column:2/span 2;grid-row:7/span 1}.element[data-group="3"][data-period="7"]{grid-column:3/span 2;grid-row:7/span 1}.element[data-group="4"][data-period="7"]{grid-column:4/span 2;grid-row:7/span 1}.element[data-group="5"][data-period="7"]{grid-column:5/span 2;grid-row:7/span 1}.element[data-group="6"][data-period="7"]{grid-column:6/span 2;grid-row:7/span 1}.element[data-group="7"][data-period="7"]{grid-column:7/span 2;grid-row:7/span 1}.element[data-group="8"][data-period="7"]{grid-column:8/span 2;grid-row:7/span 1}.element[data-group="9"][data-period="7"]{grid-column:9/span 2;grid-row:7/span 1}.element[data-group="10"][data-period="7"]{grid-column:10/span 2;grid-row:7/span 1}.element[data-group="11"][data-period="7"]{grid-column:11/span 2;grid-row:7/span 1}.element[data-group="12"][data-period="7"]{grid-column:12/span 2;grid-row:7/span 1}.element[data-group="13"][data-period="7"]{grid-column:13/span 2;grid-row:7/span 1}.element[data-group="14"][data-period="7"]{grid-column:14/span 2;grid-row:7/span 1}.element[data-group="15"][data-period="7"]{grid-column:15/span 2;grid-row:7/span 1}.element[data-group="16"][data-period="7"]{grid-column:16/span 2;grid-row:7/span 1}.element[data-group="17"][data-period="7"]{grid-column:17/span 2;grid-row:7/span 1}.element[data-group="18"][data-period="7"]{grid-column:18/span 2;grid-row:7/span 1}.element[data-group="4"][data-period="9"]{grid-column:4/span 2;grid-row:9/span 2}.element[data-group="5"][data-period="9"]{grid-column:5/span 2;grid-row:9/span 2}.element[data-group="6"][data-period="9"]{grid-column:6/span 2;grid-row:9/span 2}.element[data-group="7"][data-period="9"]{grid-column:7/span 2;grid-row:9/span 2}.element[data-group="8"][data-period="9"]{grid-column:8/span 2;grid-row:9/span 2}.element[data-group="9"][data-period="9"]{grid-column:9/span 2;grid-row:9/span 2}.element[data-group="10"][data-period="9"]{grid-column:10/span 2;grid-row:9/span 2}.element[data-group="11"][data-period="9"]{grid-column:11/span 2;grid-row:9/span 2}.element[data-group="12"][data-period="9"]{grid-column:12/span 2;grid-row:9/span 2}.element[data-group="13"][data-period="9"]{grid-column:13/span 2;grid-row:9/span 2}.element[data-group="14"][data-period="9"]{grid-column:14/span 2;grid-row:9/span 2}.element[data-group="15"][data-period="9"]{grid-column:15/span 2;grid-row:9/span 2}.element[data-group="16"][data-period="9"]{grid-column:16/span 2;grid-row:9/span 2}.element[data-group="17"][data-period="9"]{grid-column:17/span 2;grid-row:9/span 2}