body{font-family:Arial,sans-serif;text-align:center;background-color:#f9f9f9}h1{margin:20px}.periodic-table{display:grid;grid-template-columns:repeat(18,50px);gap:5px;justify-content:center;margin:20px auto;inline-size:fit-content}.element{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#e6e6e6;border:1px solid #ccc;border-radius:5px;padding:5px;font-size:12px;color:#333;inline-size:50px;block-size:50px;position:relative}.element:hover{background-color:#d4edda;cursor:pointer}.element .symbol{font-weight:700;font-size:14px}.element .number{position:absolute;inset-block-start:2px;inset-inline-start:5px;font-size:10px}.element .name{font-size:10px;font-style:italic}