/* Import Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* Variables */
:root {
    --border-color-hover: rgb(255, 255, 255);
    --background-color-cell-standby: #0d0d0d;
    --background-color: rgb(0, 0, 0);
    --transition-time-in: 0.09s;
    --transition-time-out: 2s;
    --background-color-hover-s-block: #d1301a;
    --background-color-hover-d-block: #077ff6;
    --background-color-hover-p-block: #dfa60a;
    --background-color-hover-f-block: #10c768;
    --font-color-buttons: rgb(210, 7, 213);
}   

body {
    width: 80%;
    padding-left: 10%;
    font-family: 'Roboto Condensed', sans-serif;
    background-color: var(--background-color);
    color: var(--font-color-buttons);
}

h1 {
    font-size: 2em;
    font-weight: 300;
    padding-left: 20px;
}

table {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    table-layout: fixed;
    border-spacing: 10px;
}

td {
    font-size: medium;
    border: 2px solid transparent;
    text-align: center;
    border-radius: 3px;
    background-color: var(--background-color-cell-standby);
    transform: scale(1, 1);
    transition: background-color var(--transition-time-out) ease-in-out, 
                border-color var(--transition-time-out) ease-in-out, 
                color var(--transition-time-out) ease-in-out, 
                transform var(--transition-time-out) ease-in-out;
    -webkit-transition: background-color var(--transition-time-out) ease-in-out, 
                        border-color var(--transition-time-out) ease-in-out, 
                        color var(--transition-time-out) ease-in-out, 
                        transform var(--transition-time-out) ease-in-out;
    -moz-transition: background-color var(--transition-time-out) ease-in-out, 
                     border-color var(--transition-time-out) ease-in-out, 
                     color var(--transition-time-out) ease-in-out, 
                     transform var(--transition-time-out) ease-in-out;
    -o-transition: background-color var(--transition-time-out) ease-in-out, 
                   border-color var(--transition-time-out) ease-in-out, 
                   color var(--transition-time-out) ease-in-out, 
                   transform var(--transition-time-out) ease-in-out;
}

/* td:empty {
    border : none;
    background-color: transparent;
  } */


td:not(:empty):hover {
    border-color: var(--border-color-hover);
    color: white;
    transform: scale(1.1, 1.1);
    -webkit-transition: background-color var(--transition-time-in) ease-in-out, border-color var(--transition-time-in) ease-in-out, color var(--transition-time-in) ease-in-out, transform var(--transition-time-in) ease-in-out;
    -moz-transition: background-color var(--transition-time-in) ease-in-out, border-color var(--transition-time-in) ease-in-out, color var(--transition-time-in) ease-in-out, transform var(--transition-time-in) ease-in-out;
    -o-transition: background-color var(--transition-time-in) ease-in-out, border-color var(--transition-time-in) ease-in-out, color var(--transition-time-in) ease-in-out, transform var(--transition-time-in) ease-in-out;
    transition: background-color var(--transition-time-in) ease-in-out, border-color var(--transition-time-in) ease-in-out, color var(--transition-time-in) ease-in-out, transform var(--transition-time-in) ease-in-out;
}

/* Styles of atomic number */
.number {
    font-size: 5pt;
    position: absolute;
    top: 5%;
    left: 10%;
    opacity: 0;
}

/* Styles of atomic mass */
.weight {
    font-size: 5pt;
    position: absolute;
    top: 5%;
    right: 7%;
    text-align: right;
}

/* Styles of element name */
.element {
    font-size: 5pt;
    position: absolute;
    bottom: 10%;
    left: 0%;
    right: 0%   ;
    text-align: center;
    opacity: 0;
}

.block {
    display: none;
}

.s-block {
    color: var(--background-color-hover-s-block);
}
.d-block {
    color: var(--background-color-hover-d-block);
}
.p-block {
    color: var(--background-color-hover-p-block);
}
.f-block {
    color: var(--background-color-hover-f-block);
}

.s-block:hover {
    background-color: var(--background-color-hover-s-block);
}
.d-block:hover {
    background-color: var(--background-color-hover-d-block);
}
.p-block:hover {
    background-color: var(--background-color-hover-p-block);
}
.f-block:hover {
    background-color: var(--background-color-hover-f-block);
}

/* Styles of legend */
td:hover .number, td:hover .weight, td:hover .element {
    opacity: 1;
}

.button {
    background-color: var(--background-color-cell-standby);
    color: var(--font-color-buttons);
}

.button .element {
    opacity: 1;
}

.button a{
    /* color: var(--font-color-buttons); */
    color: inherit;
    text-decoration: none;
}

.button:hover a{
    /* color: var(--border-color-hover); */
    color: inherit;
    text-decoration: none;
}