/* ===================================
   PeriodicX - Periodic Table
=================================== */

#elements{
    width:95%;
    margin:50px auto;
}

#elements h2{
    text-align:center;
    margin-bottom:30px;
    color:#00e5ff;
    font-size:2rem;
}

/* PERIODIC GRID */

.periodic-table{

    display:grid;

    grid-template-columns:repeat(18,70px);

    grid-auto-rows:70px;

    gap:8px;

    justify-content:center;

    align-items:center;

    margin:auto;

    padding:20px;

}

/* ELEMENT CARD */

.element{

    background:#1e293b;

    border:2px solid #334155;

    border-radius:10px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s;

    color:#fff;

    overflow:hidden;

}

.element:hover{

    transform:scale(1.08);

    box-shadow:0 0 20px cyan;

    border-color:#00e5ff;

}

/* Atomic Number */

.atomic-number{

    font-size:11px;

    color:#ccc;

}

/* Symbol */

.symbol{

    font-size:24px;

    font-weight:bold;

    color:white;

}

/* Name */

.name{

    font-size:10px;

    text-align:center;

}

/* Mass */

.mass{

    font-size:9px;

    color:#aaa;

}

/* CATEGORY COLOURS */

.alkali{

    background:#ff595e;

}

.alkaline{

    background:#ff924c;

}

.transition{

    background:#1982c4;

}

.post{

    background:#6a4c93;

}

.metalloid{

    background:#2a9d8f;

}

.nonmetal{

    background:#43aa8b;

}

.halogen{

    background:#f9c74f;

    color:#111;

}

.noble{

    background:#4cc9f0;

    color:#111;

}

.lanthanide{

    background:#ff70a6;

}

.actinide{

    background:#9d4edd;

}

/* RESPONSIVE */

@media(max-width:1400px){

.periodic-table{

transform:scale(.9);

transform-origin:top center;

}

}

@media(max-width:1100px){

.periodic-table{

transform:scale(.75);

}

}

@media(max-width:900px){

.periodic-table{

transform:scale(.6);

}

}

@media(max-width:700px){

.periodic-table{

display:grid;

grid-template-columns:repeat(18,72px);

grid-template-rows:repeat(10,72px);

gap:8px;

justify-content:center;

padding:20px;

} }