@font-face{
    font-family: Murkat;
    src: url("./fonts/Mukta-Regular.ttf")
}

body{font-family: Murkat;background: #040F0F;}
.header{text-align: center;font-size: 20px;color:white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: fit-content;
    margin: 0 auto;}

.header h1{padding-left: 30px;}

.bodyTable{
    text-align: center;
    display: block;
    border-radius: 20px;}
    
.bodyTable .elements div{

    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 9px;
    padding: 5px;
    transition: 0.25s;
    cursor: default;}

.bodyTable .elements div:hover{transition: 0.5s;transform: scale(0.9,0.9);}

.elements{
    color:white;
border-radius: 20px;
padding:50px;
width: fit-content;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(18,60px);
grid-template-rows: repeat(7,minmax(0.5fr,1fr));
background-color: #85BDBF;
box-shadow: 5px 4px 34px -1px rgba(0,0,0,0.24);}

#H{background-color: #F58021;grid-area: 1/1;}
#He{background-color: #006A36;grid-area: 1/18;}
#Li{background-color: #002A4E;grid-area: 2/1;}
#Be{background-color: #FDBA12;grid-area: 2/2;}
#B{background-color: #ED1944;grid-area: 2/13;}
#C{background-color: #F58021;grid-area: 2/14;}
#N{background-color: #F58021;grid-area: 2/15;}
#O{background-color: #F58021;grid-area: 2/16;}
#F{background-color: #A2B427;grid-area: 2/17;}
#Ne{background-color: #006A36;grid-area:2/18;}

#Na{background-color: #002A4E;grid-area: 3/1;}
#Mg{background-color: #FDBA12;grid-area: 3/2;}
#Al{background-color: #781E77;grid-area: 3/13;}
#Si{background-color: #ED1944;grid-area: 3/14;}
#P{background-color: #F58021;grid-area: 3/15;}
#S{background-color: #F58021;grid-area: 3/16;}
#Cl{background-color: #A2B427;grid-area: 3/17;}
#Ar{background-color: #006A36;grid-area: 3/18;}

#K{background-color: #002A4E;grid-area:  4/1;}
#Ca{background-color: #FDBA12;grid-area: 4/2 ;}
#Sc{background-color: #0088CE;grid-area: 4/3 ;}
#Ti{background-color: #0088CE;grid-area: 4/4 ;}
#V{background-color:  #0088CE;grid-area: 4/5 ;}
#Cr{background-color: #0088CE;grid-area: 4/6 ;}
#Mn{background-color: #0088CE;grid-area: 4/7 ;}
#Fe{background-color: #0088CE;grid-area: 4/8 ;}
#Co{background-color: #0088CE;grid-area: 4/9 ;}
#Ni{background-color: #0088CE;grid-area: 4/10 ;}
#Cu{background-color: #0088CE;grid-area: 4/11 ;}
#Zn{background-color: #0088CE;grid-area: 4/12 ;}
#Ga{background-color: #781E77;grid-area: 4/13 ;}
#Ge{background-color: #ED1944;grid-area: 4/14 ;}
#As{background-color: #ED1944;grid-area: 4/15 ;}
#Se{background-color: #F58021;grid-area: 4/16 ;}
#Br{background-color: #A2B427;grid-area: 4/17 ;}
#Kr{background-color: #006A36;grid-area: 4/18 ;}

#Rb{background-color: #002A4E;grid-area:  5/1;}
#Sr{background-color: #FDBA12;grid-area: 5/2 ;}
#Y{background-color: #0088CE;grid-area: 5/3 ;}  
#Zr{background-color: #0088CE;grid-area: 5/4 ;}
#Nb{background-color:  #0088CE;grid-area: 5/5 ;}
#Mo{background-color: #0088CE;grid-area: 5/6 ;}
#Tc{background-color: #0088CE;grid-area: 5/7 ;}
#Ru{background-color: #0088CE;grid-area: 5/8 ;}
#Rh{background-color: #0088CE;grid-area: 5/9 ;}
#Pd{background-color: #0088CE;grid-area: 5/10 ;}
#Ag {background-color: #0088CE;grid-area: 5/11 ;}
#Cd{background-color: #0088CE;grid-area: 5/12 ;}
#In{background-color: #781E77;grid-area: 5/13 ;}
#Sn{background-color: #781E77;grid-area: 5/14 ;}
#Sb{background-color: #ED1944;grid-area: 5/15 ;}
#Te{background-color: #ED1944;grid-area: 5/16 ;}
#I{background-color: #A2B427;grid-area: 5/17 ;}
#Xe{background-color: #006A36;grid-area: 5/18 ;}

#Cs{background-color: #002A4E;grid-area: 6/1;}
#Ba{background-color: #FDBA12;grid-area: 6/2 ;}
#Lu{background-color: #0088CE;grid-area: 6/3 ;}  
#Hf{background-color: #0088CE;grid-area: 6/4 ;}
#Ta{background-color: #0088CE;grid-area: 6/5 ;}
#W{background-color: #0088CE;grid-area:  6/6 ;}
#Re{background-color: #0088CE;grid-area: 6/7 ;}
#Os{background-color: #0088CE;grid-area: 6/8 ;}
#Ir{background-color: #0088CE;grid-area: 6/9 ;}
#Pt{background-color: #0088CE;grid-area: 6/10 ;}
#Au{background-color: #0088CE;grid-area: 6/11 ;}
#Hg{background-color: #0088CE;grid-area: 6/12 ;}
#Tl{background-color: #781E77;grid-area: 6/13 ;}
#Pb{background-color: #781E77;grid-area: 6/14 ;}
#Bi{background-color: #781E77;grid-area: 6/15 ;}
#Po{background-color: #ED1944;grid-area: 6/16 ;}
#At{background-color: #A2B427;grid-area: 6/17 ;}
#Rn{background-color: #006A36;grid-area: 6/18 ;}

#Fr{background-color: #002A4E;grid-area: 7/1;}
#Ra{background-color: #FDBA12;grid-area: 7/2 ;}
#Lr{background-color: #0088CE;grid-area: 7/3 ;}  
#Rf{background-color: #0088CE;grid-area: 7/4 ;}
#Db{background-color: #0088CE;grid-area: 7/5 ;}
#Sg{background-color: #0088CE;grid-area: 7/6 ;}
#Bh{background-color: #0088CE;grid-area: 7/7 ;}
#Hs{background-color: #0088CE;grid-area: 7/8 ;}
#Mt{background-color: #0088CE;grid-area: 7/9 ;}
#Ds{background-color: #0088CE;grid-area: 7/10 ;}
#Rg{background-color: #0088CE;grid-area: 7/11 ;}
#Cn{background-color: #0088CE;grid-area: 7/12 ;}
#Nh{background-color: #781E77;grid-area: 7/13 ;}
#Fl{background-color: #781E77;grid-area: 7/14 ;}
#Mc{background-color: #781E77;grid-area: 7/15 ;}
#Lv{background-color: #781E77;grid-area: 7/16 ;}
#Ts{background-color: #A2B427;grid-area: 7/17 ;}
#Og{background-color: #006A36;grid-area: 7/18 ;}



/*
Noble gas -> #006A36    | Post transition metal -> #0088CE
Halogens -> #A2B427     | Alkaline earth metal -> #FDBA12
Nonmetals -> #F58021    | Akali metals -> #002A4E
Metalloids -> #ED1944    
Other metals -> #781E77 
*/

#noble-gas{grid-area: 1/8; font-size: 10px;color:black}
#halogens {grid-area: 1/9; font-size: 10px;color:black}
#nonmetal {grid-area: 1/10; font-size: 10px;color:black}
#metalloid {grid-area: 1/11; font-size: 10px;color:black}
#other-metals {grid-area: 2/8; font-size: 10px;color:black}
#post-transition-metal {grid-area: 2/9; font-size: 10px;color:black}
#alkaline-earth-metal {grid-area: 2/10; font-size: 10px;color:black}
#alkali-metal {grid-area: 2/11; font-size: 10px;color:black}

#stateMatter{grid-area: 1/13;font-size: 10px;color:black}
#stateElement{grid-area: 1/14;width: 40px;}

#noble-gas section{background-color: #006A36; width: 50px;height: 10px;}
#halogens section{background-color: #A2B427; width: 50px;height: 10px;}
#nonmetal section{background-color: #F58021; width: 50px;height: 10px;}
#metalloid section{background-color: #ED1944; width: 50px;height: 10px;}
#other-metals section{background-color: #781E77; width: 50px;height: 10px;}
#post-transition-metal section{background-color: #0088CE; width: 50px;height: 10px;}
#alkaline-earth-metal section{background-color: #FDBA12; width: 50px;height: 10px;}
#alkali-metal section{background-color: #002A4E; width: 50px;height: 10px;}

#elementoSelecc h1{margin: 0 auto;}
#elementoSelecc{
    margin: 0 auto;
    width: 125px;
    height: 125px;
    text-align: center;
    font-size: 13px;
    padding: 5px;
    background-color: #F58021;
    grid-area: 1 / 2 / 8 / 9 }
#numsAtom{
    display: flex;
    flex-direction: row;
    justify-content: space-around;}
    
.summaryElements{
    background-color: #C2FCF7;;
    margin:0 auto;
    border-radius: 20px;
    padding: 20px;
    width: 650px;
    height: 150px;
    box-shadow: 5px 4px 34px -1px rgba(0,0,0,0.24);
    margin-top: 5%;
    margin-bottom: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;}


.changeLang a{
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
    font-weight: bold;
    background: #555556;
    font-size: 18px;
}

.changeLang a .active{
    background: #ED1944;
}