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 .active.dropdown-toggle {
    cursor: pointer;
}
nav .dropdown-menu.dropdown-menu-right {
    padding: 10px;
    margin-top: 1px;
    border-top:0;
    right: 1.3rem;
}

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 {
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    width: var(--cell-dimension);
    height: var(--cell-dimension);
    background: #EEEEEE;
}

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

table#periodictable td.filled {
    background: #FFA500;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;

    overflow: hidden; /* fix */
}
table#periodictable td.filled p {

    font-size: 0.45em;
    margin-bottom: -0.3em;
    margin-top: -0.3em;
}


/*
div.period {
    margin-left: 0;
    margin-right: 0.5vw;

}

div.period:nth-child(odd) {
    margin-left: 0.5vw;
    margin-right: 0;

    margin-top: calc(99.5vw / 18 / 2);
}
div.hex > div.period > span {
    color: #FFFFFF;
    font-weight: bold;
    height: calc(99.5vw / 18);
    line-height: calc(100vw / 18);
    width: calc( (99.5vw - 2 * 1.3rem) / 18);
    text-align: center;
    position: relative;
}

div.hex > div.period > span::after {

#    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink'><polygon class='hexi' points='3,1 4.73205,2 4.73205,4 3,5 1.26795,4 1.26795,2' style='fill:transparent;stroke:orange;stroke-width:2;transform:scale(10);' vector-effect='non-scaling-stroke'></polygon></svg>");

    content: '\2B21';
    color: #FF8800;
    font-size: calc(1.2 * (99.5vw - 2 * 1.3rem) / 18);
    font-weight:100;
}

div.hex > div.period > span.filled::after {
    content: '\2B22';
    font-weight:100;
    left: calc( -(99.5 - 2 * 1.3rem) / 18);
    position: absolute;
    left:0;
    z-index:-1;
}
*/


/*
main .psilicium {
    font-size: 7vw;
    padding-bottom: 10vh;
}

main .slogan {
    font-size: 4vw;
    color: #888888;
    padding-top: 33vh;
    text-align: right;
}

main .slash {
    position:absolute;
    font-size: 130vh;
    line-height: 100vh;
    color: #CCCCCC;
    padding: 0;
    margin: 0;
    overflow-y:hidden;
    width: 100vw;
    text-align: center;
}
*/