@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap');


body {
    background-color:cornsilk;
    font-family: Tektur;
}

td{
    text-align:center;
}
.cell {
    perspective: 3000px; 
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0px solid #ccc;
}

.flip {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

.cell:hover .flip {
    transform: rotateY(180deg);
}

.front-noblegas, .front-nonmetal, .front-alkalimetal,
.front-alkaline-earthmetal, .front-lanthanoids,
.front-actinoids, .front-transmetals,
.front-posttransmetals, .front-metalloids,
.front-reactnonmetals, .front-unknown, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: start;
    justify-content: flex-start;
    color: white;
    border-radius: 4px;
    flex-direction: column;
    
}

.front-nonmetal {
    background-color: rgb(140, 237, 140);
}

.front-noblegas {
    background-color: rgb(229, 189, 229);
}

.front-alkalimetal{
    background-color:rgb(234, 206, 93);
}

.front-alkaline-earthmetal {
    background-color: rgb(241, 241, 101);
}

.front-lanthanoids{
    background-color:rgb(232, 209, 156);
}

.front-actinoids {
    background-color: rgb(245, 204, 218);
}

.front-transmetals {
    background-color: rgb(250, 197, 183);
}

.front-posttransmetals {
    background-color: rgb(172, 223, 236);
}

.front-metalloids {
    background-color: rgb(158, 229, 212);
}

.front-reactnonmetals {
    background-color: rgb(140, 237, 140);
}

.front-unknown {
    background-color: rgba(10,150,200, 0.12);
}

.back {
    background-color: black; 
    transform: rotateY(180deg);
}

.atom-number {
    font-size:12px;
    color:black;
}

.sight-solid, .sight-liquid, .sight-gas, .sight-unknown{
    font-size:38px;
}
.sight-solid{
    color:black;
}
.sight-liquid{
    color:darkblue;
}
.sight-gas{
    color:rgb(153,0,0);
}
.sight-unknown{
    color:dimgray;
}

.name {
    /*font-size: initial;*/
    font-size: clamp(0.7rem, 0.8vw, 0.9rem);
}