@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}.app{margin:0 auto;padding:2rem;text-align:center;font-family:Inter,sans-serif;transition:.3s ease-in-out;min-height:100vh}.app>span{position:absolute;right:1rem;top:2rem;cursor:pointer}.app>span>img{padding:4px;border:1.6px solid;border-radius:50%}footer{margin-top:3rem}h1{font-size:20px;font-weight:700;margin-bottom:2rem;text-align:center}.dark{background-color:#161122;color:beige;transition:.3s ease-in-out}.periodic-table{display:grid;grid-template-columns:repeat(18,64px);grid-template-rows:repeat(10,64px);gap:5px}.elements{border:2px solid #aaa;color:#fff;display:flex;position:relative;align-items:center;justify-content:center;border-radius:1px;box-shadow:0 0 5px #0000004d;transition:.2s ease-in-out}.elements:hover{transform:scale(1.25);z-index:1;box-shadow:0 0 20px #0009;transition:.2s ease-in-out}.elements .number,.name{position:absolute;font-size:8px;left:5px}.number{top:5px}.name{bottom:5px}@media screen and (max-width: 1265px){.periodic-table{overflow:scroll}}.modal-wrap{position:fixed;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#0000004f;z-index:1}.element-modal{color:beige;border-radius:7px;width:40%;height:fit-content;margin-block:auto;padding:2rem;box-shadow:0 0 20px #00000080;position:relative;animation:pop-in .3s ease-in-out}@keyframes pop-in{0%{transform:scale(0)}to{transform:scale(1)}}.element-modal .modal-close{position:absolute;right:1rem;top:1.6rem;cursor:pointer}.element-modal strong{font-size:20px;display:block;margin-bottom:1.1rem}.element-modal span{font-weight:700}.element-modal p{text-align:left}.element-modal .block{text-transform:capitalize}p{margin-bottom:1rem}@media screen and (max-width: 975px){.element-modal{width:75%;overflow:hidden}}