.periodic-table {
    padding: 3% 0;
}

     .periodic-table .content {
        position: relative;
        overflow: hidden;
        font-family: 'Janda Safe and Sound';
        font-size: 0.8rem;
        font-weight: normal;
    }

         .periodic-table .content .hashtag {
            text-transform: uppercase;
            position: absolute;
            width: 100%;
            text-align: center;
            left: 0;
            top: 7%;
            color: #002c39;
            font-size: 2rem;
            pointer-events: none;
        }

         .periodic-table .content .line {
            overflow: hidden;
        }

             .periodic-table .content .line .element,
             .periodic-table .content .line .empty-space {
                position: relative;
                overflow: hidden;
                display: inline-block;
                width: 4.95%;
                padding-top: 4.95%;
                float: left;
                margin: 0.3%;
            }

                 .periodic-table .content .line .element,
                 .periodic-table .content .line .element .inner-content {
                    -webkit-border-radius: 5px;
                    border-radius: 5px;
                }

                     .periodic-table .content .line .element .inner-content {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #fff;
                        color: rgb(102,102,102);
                        border: 1.5px solid;
                        border-bottom-width: 3px;
                        border-right-width: 3px;
                    }

                         .periodic-table .content .line .element .inner-content.has-detail {
                            border-color: rgb(61,61,61);
                            background: rgb(102,102,102);
                            color: #fff;
                        }

                             .periodic-table .content .line .element .inner-content.has-detail:active {
                                border-width: 1.5px;
                                border-top-width: 3px;
                                border-left-width: 3px;
                            }

                     .periodic-table .content .line .element.metalli-alcalini .inner-content {
                        color: rgb(231,77,62);
                    }

                         .periodic-table .content .line .element.metalli-alcalini .inner-content.has-detail {
                            border-color: rgb(143,39,36);
                            background: rgb(231,77,62);
                            color: #fff;
                        }

                     .periodic-table .content .line .element.metalli-alcalino-terrosi .inner-content {
                        color: rgb(228,127,37);
                    }

                         .periodic-table .content .line .element.metalli-alcalino-terrosi .inner-content.has-detail {
                            border-color: rgb(143,58,0);
                            background: rgb(228,127,37);
                            color: #fff;
                        }

                     .periodic-table .content .line .element.metalli-di-transizione .inner-content {
                        color: rgb(240,196,25);
                    }

                         .periodic-table .content .line .element.metalli-di-transizione .inner-content.has-detail {
                            border-color: rgb(166,129,0);
                            background: rgb(240,196,25);
                            color: #fff;
                        }

                     .periodic-table .content .line .element.post-metalli-di-transizione .inner-content {
                        color: rgb(128,183,79);
                    }

                         .periodic-table .content .line .element.post-metalli-di-transizione .inner-content.has-detail {
                            border-color: rgb(59,128,0);
                            background: rgb(128,183,79);
                            color: #fff;
                        }

                     .periodic-table .content .line .element.semimetalli .inner-content {
                        color: rgb(24,160,134);
                    }

                         .periodic-table .content .line .element.semimetalli .inner-content.has-detail {
                            border-color: rgb(0,110,89);
                            background: rgb(24,160,134);
                            color: #fff;
                        }

                     .periodic-table .content .line .element.altri-non-metalli .inner-content {
                        color: rgb(223,21,149);
                    }

                         .periodic-table .content .line .element.altri-non-metalli .inner-content.has-detail {
                            border-color: rgb(135,13,90);
                            background: rgb(223,21,149);
                            color: #fff;
                        }

                     .periodic-table .content .line .element.gas-nobili .inner-content {
                        color: rgb(146,97,152);
                    }

                         .periodic-table .content .line .element.gas-nobili .inner-content.has-detail {
                            border-color: rgb(90,59,94);
                            background: rgb(146,97,152);
                            color: #fff;
                        }

                     .periodic-table .content .line .element.lantanidi .inner-content {
                        color: rgb(4,184,85 );
                    }

                         .periodic-table .content .line .element.lantanidi .inner-content.has-detail {
                            border-color: rgb(2,129,59);
                            background: rgb(4,184,85 );
                            color: #fff;
                        }

                     .periodic-table .content .line .element.attinidi .inner-content {
                        color: rgb(0,155,163);
                    }

                         .periodic-table .content .line .element.attinidi .inner-content.has-detail {
                            border-color: rgb(0,111,117);
                            background: rgb(0,155,163);
                            color: #fff;
                        }

@media screen and (max-width: 1400px) {
     .periodic-table .content {
        /*margin: 0 7%;*/
    }
}

@media screen and (max-width: 1170px) {
     .periodic-table .content {
        font-size: 0.8rem;
    }

         .periodic-table .content .hashtag {
            font-size: 1.4rem;
        }
}

@media screen and (max-width: 900px) {
     .periodic-table .content {
        font-size: 0.9rem;
        /*margin: 0 4%;*/
    }
}

@media screen and (max-width: 750px) {
     .periodic-table .content {
        font-size: 0.7rem;
        margin: 0;
        /*padding: 4% 10%;*/
    }

         .periodic-table .content .hashtag {
            font-size: 1.1rem;
        }
}

@media screen and (max-width: 650px) {
     .periodic-table .content {
        font-size: 0.7rem;
        -moz-transform: rotate(-0.5deg);
        -webkit-transform: rotate(-0.5deg);
        -o-transform: rotate(-0.5deg);
        -ms-transform: rotate(-0.5deg);
        transform: rotate(-0.5deg);
    }

         .periodic-table .content .line .element,
         .periodic-table .content .line .element .inner-content {
            -webkit-border-radius: 2px;
            border-radius: 2px;
            border-width: 1px;
            border-bottom-width: 2px;
            border-right-width: 2px;
        }

         .periodic-table .content .hashtag {
            font-size: 0.8rem;
        }
}

@media screen and (max-width: 550px) {
     .periodic-table .content {
        font-size: 0.4rem;
    }
}

@media screen and (max-width: 480px) {

     .periodic-table {
        margin: 46% 0;
    }

         .periodic-table .content {
            -moz-transform: scale(1.5) rotate(90deg);
            -webkit-transform: scale(1.5) rotate(90deg);
            -o-transform: scale(1.5) rotate(90deg);
            -ms-transform: scale(1.5) rotate(90deg);
            transform: scale(1.5) rotate(90deg);
        }

     .main-master .periodic-table {
        display: none;
    }
}