body {
    font-family: "Arial";
    background: #FFF;
    margin: 0;
    padding: 0;
}

nav#navtop {
    padding-top: 0.3rem !important;
}

nav a {
    margin-left: 0.3em;
    margin-right: 0.3em;
    color: #CCCCCC;
}

nav a:not(a.active) {
color: #CCCC;
}
nav a:not(a.active):hover {
color: #FF8800;
}



nav .active.dropdown-toggle {
    cursor: pointer;
}
nav .dropdown-menu.dropdown-menu-right {
    padding: 10px;
    margin-top: 1px;
    border-top:0;
    right: 0.3rem;
    left: unset;
}

ul.nav {
    margin-bottom:-9px;
    width: 100%;
}

footer {
    color: #CCCCCC;
    font-size: 14px;
    margin-bottom:0;
}

footer nav {
    /* class? */
    justify-content:center !important;
}

a:hover {
    color: #FF8800;
}

nav .logo {
    font-size: 24px;
    color: #FF8800 !important;
    padding-bottom: 0px;
    padding-top: 0px;
}

.psilicium {
    color: #888888;
}
.psilicium .i {
    color: #FF8800;
}
.psilicium .i:before {
    content: "ı";
    position: absolute; 
    color: #888888;
}

main {
/*    height: calc(100vh - 1rem - 1px - 1.5 * 24px);*/
}

.tab-pane {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: calc(1rem + 1px + 1.5 * 24px);
    min-height: calc(100vh - 1rem - 1px - 1.5 * 24px);

}

section#home {
    overflow-x: hidden;
    overflow-y:auto; /*custom scroller*/
    width: calc(var(--cell-dimension) * 18 + var(--cell-spacing) * 20) !important;
    margin-bottom: 30px;
}

table#periodictable {
    --cell-spacing: 4px;
    --cell-dimension: calc( (95vw - 2 * 1.3rem - 19.5 * var(--cell-spacing)) / 18.5);

    border-spacing: var(--cell-spacing);
    border-collapse: separate;

    margin:auto;
    margin-bottom: calc(var(--cell-dimension) * (-2 - 2/3) + var(--cell-spacing) * 10 + 30px);
    position:relative;
    left: calc(var(--cell-dimension)*-0.25);
}

table#periodictable tr:not(:first-child):nth-child(odd) > td {
    position: relative;
}
table#periodictable tr:nth-child(3) > td {
    top: calc(var(--cell-dimension) / -2);
}
table#periodictable tr:nth-child(5) > td {
    top: calc(var(--cell-dimension) / -1);
}
table#periodictable tr:nth-child(7) > td {
    top: calc(var(--cell-dimension) / (-2/3));
}
table#periodictable tr:nth-child(9) > td {
    top: calc(var(--cell-dimension) / (-2/4));
}

table#periodictable tr:nth-child(even) > td {
    position:relative;
    left: calc(var(--cell-dimension) / 2 + var(--cell-spacing) / 2);
}
table#periodictable tr:nth-child(2) > td {
    top: calc(var(--cell-dimension) / -4);
}
table#periodictable tr:nth-child(4) > td {
    top: calc(var(--cell-dimension) / (-4/3));
}
table#periodictable tr:nth-child(6) > td {
    top: calc(var(--cell-dimension) / (-4/5));
}
table#periodictable tr:nth-child(8) > td {
    top: calc(var(--cell-dimension) / (-4/7));
}
table#periodictable tr:nth-child(10) > td {
    top: calc(var(--cell-dimension) / (-4/9));
}

table#periodictable td {
    width: var(--cell-dimension);
    height: var(--cell-dimension);
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1"><defs><filter id="round"><feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" /><feComposite in="SourceGraphic" in2="goo" operator="atop" /></filter></defs><polygon filter="url(%23round)" points="0 25, 0 75, 50 100, 100 75, 100 25, 50 0" fill="%23FFA500"></polygon></svg>');
    background-size: 100%;
}

table#periodictable td[colspan],
table#periodictable td.lathanoids,
table#periodictable td.actanoids {
    visibility: hidden;
}

table#periodictable td:not(.filled) {
    filter: grayscale(1) brightness(1.4);
}

table#periodictable td.filled {
    cursor: pointer;
    overflow: hidden; /* fix */
    text-align: center;
    color: #FFFFFF;
}
table#periodictable td.filled p {
    font-size: 0.45em;
    margin-bottom: -0.3em;
    margin-top: -0.3em;
}