*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial,sans-serif;
background:#f8fafc;
padding:30px;
}

h1{
text-align:center;
margin-bottom:10px;
color:#1d5a7a;
}

.subtitle{
text-align:center;
margin-bottom:40px;
color:#555;
}

#periodic-table{
display:grid;
grid-template-columns:repeat(18,70px);
gap:10px;
width:max-content;
margin:auto;
}

.element{
background:white;
border-radius:12px;
padding:10px;
text-align:center;
border:1px solid #ddd;
transition:.3s;
}
.element:hover{

transform:scale(1.08);

box-shadow:0 4px 12px rgba(0,0,0,0.2);

z-index:10;
}
.nonmetal{
background:#b7f7b7;
}

.noblegas{
background:#bde0ff;
}

.alkali{
background:#ffd6a5;
}

.alkaline{
background:#fff3a3;
}

.metalloid{
background:#e0c3fc;
}

.halogen{
background:#ffb7c5;
}

.element:hover{
transform:translateY(-5px);
box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.element{
width:80px;
height:95px;

border:1px solid #d0d0d0;
border-radius:12px;

background:white;

text-align:center;

padding:6px;

box-sizing:border-box;

transition:0.3s;

cursor:pointer;
}
.number{
font-size:12px;
color:gray;
}

.symbol{
font-size:26px;
font-weight:bold;
color:#1d5a7a;
}

.name{
font-size:12px;
}

.weight{
font-size:11px;
color:#666;
}
.legend{
text-align:center;
margin:25px;
}

.box{
padding:8px 12px;
margin:4px;
border-radius:6px;
display:inline-block;
font-size:14px;
font-weight:bold;
}
.element a{
    text-decoration:none;
    color:inherit;
}
.nonmetal{
    background:#c8f7c5;
}

.noblegas{
    background:#b9d9ff;
}

.alkali{
    background:#ffd6a5;
}

.alkaline{
    background:#fff3a3;
}

.metalloid{
    background:#d8b4fe;
}

.halogen{
    background:#ffb3c1;
}
.posttransition{
    background:#e8e8e8;
}
.transition{
    background:#a7f3d0;
}
.lanthanides{
    background:#f9c2ff;
}
.actinides{
    background:#ffb4a2;
}
.family-badge{

display:inline-block;

padding:8px 18px;

background:#dbeafe;

color:#1d5a7a;

border-radius:30px;

font-weight:600;

margin-top:15px;

}