/* Periodic Table Container */
ol.periodic-table {
    direction: ltr;
    all: unset;
    container-type: inline-size;
    counter-reset: element;
    display: grid;
    font-family: system-ui, sans-serif;
    font-size: 1.8cqi;
    grid-gap: 1px;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(10, 1fr);
    color: #fff;
    margin: 10px 0;
}

/* Element name and abbreviation */
ol.periodic-table abbr {
    display: grid;
    grid-area: 2 / 1 / 3 / 4;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 0;
    font-weight: bold;
}

ol.periodic-table abbr::after {
    content: attr(title);
    display: block;
    font-size: 0.33em;
    font-weight: 400;
    place-self: end center;
}

/* Element Box */
ol.periodic-table li {
    cursor: pointer;
    aspect-ratio: 1 / 1;
    counter-increment: element;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    transition: scale .125s ease-in;
    border-radius: 2px;
}

ol.periodic-table li::before {
    content: counter(element);
    position: relative;
    left: 3px;
}

ol.periodic-table li::after {
    content: attr(data-mass);
    grid-area: 1 / 2 / 2 / 2;
    justify-self: end;
    position: relative;
    right: 3px;
}

ol.periodic-table li::before,
ol.periodic-table li::after {
    font-size: .33em;
}

@media (hover: hover) {
    ol.periodic-table li:hover {
        box-shadow: 0 0 0 .25px #000;
        scale: 1.3;
        z-index: 100;
    }
}

/* Layout */
ol.periodic-table li:nth-of-type(2) {
    grid-column: 18;
}

ol.periodic-table li:nth-of-type(5),
ol.periodic-table li:nth-of-type(13) {
    grid-column: 13;
}

/* Lanthanides */
ol.periodic-table li:nth-of-type(58) {
    grid-area: 9 / 3 / 9 / 3;
}

ol.periodic-table li:nth-of-type(59) {
    grid-area: 9 / 4 / 9 / 4;
}

ol.periodic-table li:nth-of-type(60) {
    grid-area: 9 / 5 / 9 / 5;
}

ol.periodic-table li:nth-of-type(61) {
    grid-area: 9 / 6 / 9 / 6;
}

ol.periodic-table li:nth-of-type(62) {
    grid-area: 9 / 7 / 9 / 7;
}

ol.periodic-table li:nth-of-type(63) {
    grid-area: 9 / 8 / 9 / 8;
}

ol.periodic-table li:nth-of-type(64) {
    grid-area: 9 / 9 / 9 / 9;
}

ol.periodic-table li:nth-of-type(65) {
    grid-area: 9 / 10 / 9 / 10;
}

ol.periodic-table li:nth-of-type(66) {
    grid-area: 9 / 11 / 9 / 11;
}

ol.periodic-table li:nth-of-type(67) {
    grid-area: 9 / 12 / 9 / 12;
}

ol.periodic-table li:nth-of-type(68) {
    grid-area: 9 / 13 / 9 / 13;
}

ol.periodic-table li:nth-of-type(69) {
    grid-area: 9 / 14 / 9 / 14;
}

ol.periodic-table li:nth-of-type(70) {
    grid-area: 9 / 15 / 9 / 15;
}

ol.periodic-table li:nth-of-type(71) {
    grid-area: 9 / 16 / 9 / 16;
}

/* Actinides */
ol.periodic-table li:nth-of-type(90) {
    grid-area: 10 / 3 / 10 / 3;
}

ol.periodic-table li:nth-of-type(91) {
    grid-area: 10 / 4 / 10 / 4;
}

ol.periodic-table li:nth-of-type(92) {
    grid-area: 10 / 5 / 10 / 5;
}

ol.periodic-table li:nth-of-type(93) {
    grid-area: 10 / 6 / 10 / 6;
}

ol.periodic-table li:nth-of-type(94) {
    grid-area: 10 / 7 / 10 / 7;
}

ol.periodic-table li:nth-of-type(95) {
    grid-area: 10 / 8 / 10 / 8;
}

ol.periodic-table li:nth-of-type(96) {
    grid-area: 10 / 9 / 10 / 9;
}

ol.periodic-table li:nth-of-type(97) {
    grid-area: 10 / 10 / 10 / 10;
}

ol.periodic-table li:nth-of-type(98) {
    grid-area: 10 / 11 / 10 / 11;
}

ol.periodic-table li:nth-of-type(99) {
    grid-area: 10 / 12 / 10 / 12;
}

ol.periodic-table li:nth-of-type(100) {
    grid-area: 10 / 13 / 10 / 13;
}

ol.periodic-table li:nth-of-type(101) {
    grid-area: 10 / 14 / 10 / 14;
}

ol.periodic-table li:nth-of-type(102) {
    grid-area: 10 / 15 / 10 / 15;
}

ol.periodic-table li:nth-of-type(103) {
    grid-area: 10 / 16 / 10 / 16;
}

/* Element Categories */
.taec { background-color: #017eae; } /* Top Alkaline Earth Metals */
.met { background-color: #70cd43; } /* Metalloids (Semimetals) */
.alk { background-color: #ebb53c; } /* Alkali Metals */
.rnm { background-color: #66aa69; } /* Reactive Non-Metals */
.aec { background-color: #2ba2d0; } /* Alkaline Earth Metals */
.act { background-color: #fd7640; } /* Actinides */
.lan { background-color: #9ba2a9; } /* Lanthanides */
.nbl { background-color: #d92621; } /* Noble Gases */
.ukp { background-color: #364c64; } /* Unknown properties */
.trm { background-color: #ff5543; } /* Post-Transition Metals */

/* Mobile-first approach */
@media (max-width: 768px) {
    ol.periodic-table {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        font-size: 16px;
    }
    
    ol.periodic-table li {
        aspect-ratio: unset;
        height: auto;
        padding: 15px;
        grid-template-columns: 50px 1fr 100px;
        grid-template-rows: auto;
        text-align: left;
    }

    ol.periodic-table li::before,
    ol.periodic-table li::after {
        font-size: .8em;
    }
    
    ol.periodic-table li::before {
        grid-area: 1 / 1 / 2 / 2;
        align-self: center;
        left: 0;
    }
    
    ol.periodic-table li::after {
        grid-area: 1 / 3 / 2 / 4;
        align-self: center;
        right: 0;
        font-size: 0.8em;
    }

    ol.periodic-table abbr {
        grid-area: 1 / 2 / 2 / 3;
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-left: 10px;
    }
    
    ol.periodic-table abbr::after {
        place-self: start;
        font-size: 0.8em;
        margin-top: 5px;
    }
    
    ol.periodic-table li:nth-of-type(n) {
        grid-area: auto !important;
    }
}