/* Grid-Layout für PSE */

.container {

    display: grid;

    grid-template-columns: repeat(18, 1fr);

    gap: 0.5% 0.25%;

    margin: 0.25%;
    margin-bottom: 8%;

}

/* Element Boxen */

.box {

    justify-self: center;

    align-self: center;

    width: 100%;

    padding: 16% 0;

    text-align: center;

    position: relative;

    font-size: 12px;

}

/* Ordnungszahl: oben rechts */

.box .ordnung {

    position: absolute;

    top: 0.5%;

    right: 1%;

}

/* Schriftgrösse des Elementkürzels vergrösserern */

.box .short {

    font-size: 16px;

}

/* Farben für Kategorien (Nichtmetall, Alkalimetall...) */

.Nichtmetall {

    background: rgb(255, 0, 0);

}

.Nichtmetall:hover {

    background: rgb(255, 80, 80);

}

.Edelgas {

    background: rgb(255, 0, 255);

}

.Edelgas:hover {

    background: rgb(253, 97, 253);

}

.Alkalimetall {

    background: rgb(160, 82, 45);

}

.Alkalimetall:hover {

    background: rgb(160, 105, 80);

}

.Erdalkalimetall {

    background: wheat;

}

.Erdalkalimetall:hover {

    background: rgb(240, 229, 209);

}

.Halbmetall {

    background: orange;

}

.Halbmetall:hover {

    background: rgb(247, 190, 84);

}

.Halogen {

    background: yellowgreen;

}

.Halogen:hover {

    background: rgb(199, 238, 120);

}

.Metall {

    background: gray;

}

.Metall:hover {

    background: rgb(156, 156, 156);

}

.Übergangsmetall {

    background: rgb(0, 139, 0);

}

.Übergangsmetall:hover {

    background: rgb(56, 153, 56);

}

.Lanthanoid {

    background: lightskyblue;

}

.Lanthanoid:hover {

    background: rgb(167, 223, 255);

}

.Actinoid {

    background: rgb(140, 140, 255);

}

.Actinoid:hover {

    background: rgb(177, 177, 255);

}

/* Lanthanoid und Actinoid Mobile vs. Desktop */

.Lanthanoid_mobile, .Actinoid_mobile {

    display: none;

}

.hidden {

    visibility: hidden;

}

.Lanthanoid_desktop {

    margin-top: 10px;

}



/* Formatierungn von "mehr Informationen" */



/* Leicht grauer Hintergrund */

.whole {

    position: absolute;

    width: 1000%;

    height: 1000%;

    margin: -100%;

    background-color: rgba(116, 116, 116, 0.308);

}

/* .more Boxen */

.more {

    position: absolute;

    width: 36%;

    height: 80%;

    top: 10%;

    left: 32%;

    overflow-y: auto;

}

.whole, .more {

    display: none;

    z-index: 100;

}

/* .more Titel */

.more h2 {

    text-align: center;

    font-size: 32px;

}

.more hr {

    text-align: center;

    width: 80%;

    margin-top: -16px;

    background-color: black;

}

/* .more Tabelle in die Mitte setzen */

.more table {

    margin: auto;

    width: 80%;

}

.more td {

    padding: 4px 10px;

}

.more table tr td a:hover {

    color: #0088ff; /* normale Formatierung (ohne :hover) in darkmode.css/lightmode.css */

}

/* Bild des Atoms (Schalenmodell nach Bohr) */

.more .atom-icon {

    padding: 20px 10%;

    text-align: center;

}

/* Close Icon */

.close i {

    position: absolute;

    top: 0.8%;

    right: 0.8%;

    width: 5%;

    text-align: center;

}

.close:hover {

    color: rgb(179, 179, 179);

}





/* Ausblenden Mobiler Leeren Divs (damit Og bei Mobilen-Layout noch sichtbar ist, wegen dem Footer */

.leer_mobile {

    display: none;

}





/* Media Queries

------------------------------------------------ */



/* für kleinere Displays */

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

    .box {

        font-size: 10px;

        padding: 10px 0;

    }

    .box .short {

        font-size: 14px;

    }

}

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

    .box {

        padding: 8px 0;

    }

}





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

    .box {

        padding: 8px 0;

        font-size: 8px;

    }

    .box .short {

        font-size: 12px;

    }

    .more td {

        font-size: 12px;

        padding: 2%;

    }

}



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

    .box {

        padding: 6px 0;

        font-size: 6px;

    }

    .box .short {

        font-size: 10px;

    }

}



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

    body {

        overflow-y: scroll;

    }

    .Actinoid_desktop, .Lanthanoid_desktop, .la-lu, .ac-lr {

        display: none;

    }

    .Actinoid_mobile, .Lanthanoid_mobile {

        display: block;

    }

    .container {

        grid-template-columns: repeat(4, 1fr);

        gap: 0.25% 1%;

        margin: 0 0.5%;

        margin-bottom: 10px;

    }

    .leer {

        display: none;

    }

    .box {

        font-size: 15px;

        padding: 20% 0;

    }

    .box .short {

        font-size: 20px;

    }

    .leer_mobile {

        display: block;

    }

    .more {

        position: fixed;

        width: 100%;

        height: 100%;

        top: 0;

        left: 0;

    }

    .more td {

        font-size: 16px;

    }

    .close {

        width: 6%;

    }

}



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

    .container {

        grid-template-columns: repeat(3, 1fr);

    }

}



/* Für grössere Displays */

@media screen and (min-width: 2000px) {

    .box {

        font-size: 14px;

        padding: 12% 0;

    }

    .box .short {

        font-size: 18px;

    }

}

@media screen and (min-width: 2500px) {

    .box {

        font-size: 18px;

        padding: 4% 0;

    }

    .box .short {

        font-size: 24px;

    }

}

@media screen and (min-width: 3500px) {

    .box {

        font-size: 24px;

    }

    .box .short {

        font-size: 30px;

    }

}