:root {
     --alkali-color: #ecbe59;
  --alkali-earth-color: #dee955;
  --transition-metal-color: #fd8572;
  --post-transition-metal-color: #4cddf3;
  --metalloid-color: #fff;
  --other-nonmetal-color: #52ee61;
  --noble-gasses-color: #759fff;
  --unknown-color: #ccc;
  --lanthrathide_and_anthrathide-color: #c686cc; 
  --All-element-common-box_shadow: 0.15vw -0.15vw 0.18vw 0vw currentColor,
  -0.22vw 0.25vw 0.18vw 0vw currentColor;
  --Low_Blurs-All-element-common-box_shadow: 0.15vw -0.15vw 0.1vw 0vw currentColor,
  -0.22vw 0.25vw 0.1vw 0vw currentColor;
  --very_Low_Blurs-All-element-common-box_shadow:  0.05vw -0.05vw 0.1vw 0vw currentColor,  -0.1vw 0.1vw 0.1vw 0vw currentColor;
  
  --All-element-common-text-shadow: 0.08vw 0.03vw 0.2vw currentColor, 0.04vw 0.03vw 0.2vw currentColor;
  --SidebarLineargradient-color: linear-gradient(90deg, #000000cf, #fffbfb17 );
}
.On_click_Element_Cursor{ cursor: url(https://cur.cursors-4u.net/cursors/cur-8/cur740.ani), url(https://cur.cursors-4u.net/cursors/cur-8/cur740.png), auto !important;}
html{
  scroll-behavior: smooth;
  overflow-x: hidden; 
 } 
::selection {
  background-color: rgb(214, 195, 27);
  color: black;
  text-shadow: none;
} 
* {
  margin: 0;
  padding: 0;
  transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
}

body { 
  /* font-family: 'megrim'; */
  /* font-family: 'neontubes'; */
    /* font-family: 'Nosifer'; */
  /* font-family: 'Lato';*/
   /*font-family: 'Varela Round'; */
    /* font-family: 'Faster One'; */
    font-family: 'Nunito';
    /* font-family: 'Codystar' */
    /* font-family: 'Raleway Dots'; */
 
      cursor: url(https://cur.cursors-4u.net/cursors/cur-8/cur740.ani), url(https://cur.cursors-4u.net/cursors/cur-8/cur740.png), auto;
  background: repeat   , url("bg/space.jpg") rgb(31, 29, 29)  ;  
   filter: contrast(1.28);
   width: 100vw;
   overflow-x: hidden;
  }
  body.add_Drop-shadow_Filters{filter: drop-shadow(-0.78vw 1.0vw 0.8vw black) contrast(1.28); }

body.activeBody_DisableSrolling{overflow: hidden;} 
header {
position: fixed;
   width: 95vw;
  height: 8vw;
  display: flex;
  font-family: 'neontubes';
  justify-content: space-between;
  align-items: center;
  align-content: center;
  transition: all 0.6s linear;
  padding: 1vw 2vw ; 
background: linear-gradient( 90deg,rgba(221, 255, 255, 0.253) ,  rgba(0, 0, 0, 0.596));
border-radius:  0  0 6.8vw 6.8vw ;
border: 0;
border-bottom: 0.16vw #c4d134;
border-style: dashed;
} 
header.activeteSearch{
  justify-content: flex-start;
  height: 4.5vw;
  border-radius:  0  0 5.2vw 5.2vw ;
  border-color: #dd7777f8;
  z-index: 18;
    }
 header.activeteSearch ul     {
   right: -200vw;
   position: absolute;
  }
header .logo {
   font-weight: 700;
  color: white;
  font-size: 1.6vw;
  text-transform: uppercase;
  letter-spacing: 0.104vw; 
} 
header #search{
  width: 22vw;    
  height: 1vw;
  padding: 1vw;
  border-radius: 0.6vw;
  font-size: 0.9vw;
  margin: 0 1vw;
   background: transparent;
} 
header .suggestionsMainCLASS {
width: 88vw;
position: absolute;
height : 86vh;
background: #000;
 left: 8vw;
appearance: auto;
box-sizing: border-box;
background: radial-gradient(#00000033, black);
opacity: 0;
border: 0.06vw solid white;
border-radius: 3vw 0 3vw 0;
overflow-y: scroll;
top: -200vw;
transition: all 1200ms linear , top 0ms linear;
}
header.activeteSearch .suggestionsMainCLASS{
display: block;
opacity: 1; 
top: 7vw;
}
.dataTables_length ,.dataTables_paginate ,#myTable_filter ,#myTable_info ,.dataTables_filter{display: none;} 

.table{
width: 100% !important;
 font-size: 1.2vw;
 border-collapse: collapse;
 font-family: 'megrim';
 background: radial-gradient(rgba(0, 0, 0, 0.596) , transparent);
}
 
.table thead tr th {
font-weight: 780;
font-size: 1.25vw;
color: rgb(255, 255, 255);
letter-spacing: 0.1vw;
opacity: 1;
border: 0.06vw solid white;
 vertical-align: top;
padding: 0.4vw;
width: 15vw;
top: 0; 
position: sticky;
  z-index: 12;
 box-shadow: inset 0 0   #ff08e8;
 transition: 300ms linear all;
 cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer !important;
background: transparent;   
text-shadow:  -0.012vw -0.06vw 0.2vw black, -0.08vw -0.06vw 0.2vw black, 0.016vw 0.09vw 0.2vw black ;
}
table thead tr:nth-child(2) th {
    position: sticky;
    top: 5vh !important;
    background: #000000;
}

.table thead tr th:hover  {
color: #3a3a30;
filter: sepia(1);
text-shadow:  -0.012vw -0.06vw 0.2vw #fff, -0.08vw -0.06vw 0.2vw #fff, 0.016vw 0.09vw 0.2vw #fff ;
}  
.table thead tr th:nth-child(1),  .table thead tr th:nth-child(1) input  ,.table thead tr th:nth-child(3) ,  .table thead tr th:nth-child(3) input  {
width: 6vw !important;
} 
.table thead tr th:nth-child(4) , .table thead tr th:nth-child(4)  input  {
width: 11vw !important;

}
.table thead tr th:nth-child(2) ,  .table thead tr th:nth-child(2) input ,table thead tr th:nth-child(8) input ,.table thead tr th:nth-child(6) ,  .table thead tr th:nth-child(6) input,.table thead tr th:nth-child(7)   ,  .table thead tr th:nth-child(7) input {
width: 8vw !important;
} 

table thead tr th:nth-child(5)   {
width: 25vw !important;
}  
table thead tr th:nth-child(5) input {
width: 16vw !important;
}  
   
.table tbody tr {
transition: all 250ms linear  ;
 cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer ;
}
.table tbody tr td {
 opacity: 1;
 border: 0.06vw solid white;
 padding: 0.4vw;
text-align: center;
font-size: 1.2vw;
box-shadow:   inset 0 0 0.8vw #ff08e8; 
 
}
.table tbody tr td:nth-child(8){
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 200ms linear;
  }
.table tbody tr:hover{
 background: #ffffffb5;  
 color: #000;
 font-weight: bolder; 
} 
.table tbody tr:hover td{
box-shadow:   inset 0 0 1vw  0.2vw #ff08e8; 
}

.table thead th input {
  color: white;
background-color: rgba(0, 0, 0, 0.534);
   border-radius: 0.6vw;
  font-size: 0.9vw;
   margin: auto;
   text-align: center;
   width: 1.8vw;
   height: 1.8vw;
  }
  .table thead th .inputOnscroll{
    font-weight: 780;
font-size: 1.25vw;
color: rgb(255, 255, 255);
letter-spacing: 0.1vw;
position: relative;
   } 
  .btnTable {
  border: 0.12vw solid rgb(255, 255, 255);
  z-index: 1;
   background: transparent;
   cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer;
  transition: all 0.22s ease;
   font-size: 1.2vw;
   position: relative;
  color: #ffffff;
   }
.btnTable:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
   direction: rtl;
  z-index: -1;
  background: rgb(255, 255, 255);
  transition: all 0.3s ease;
}
.btnTable:hover {
  color: rgb(0, 0, 0);
 }
 .onHOverBTntable_TR{
   position: relative;
   background: #ffffffe5 !important;
 }
 
.btnTable:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btnTable:active {
  top: 2px;
}
header #search.activeteSearch{
width: 100%;
height:60%;
color: white;
background-color: #0000;
z-index: 12;
}
header ul {
   display: flex;
  justify-content: center;
  right: 12vw;
 align-items: center;
  } 
header .btncontaniner_header_A .header_A , .orientatinalBTn {
   font-weight: 700;
  color: white;
  font-size: 1.6vw;
  text-transform: uppercase;
  letter-spacing: 0.104vw;
  text-decoration: none;
  margin: 0vw 0.8vw;
  padding: 1vw;
  -webkit-box-reflect: below 0vw linear-gradient( #00000000 , #00000036);
  transition: all 600ms linear , top 600ms 500ms linear;
}
header .btncontaniner_header_A .header_A:hover ,  .orientatinalBTn:hover {
  color: black;
  border-radius: 0.2vw;
  background-color: #fbff00;
  box-shadow: 0vw 0vw 0.52vw #fbff00, 0vw 0vw 1.04vw #fbff00 , 0vw 0vw 1.04vw #fbff00 , 0vw 0vw 2.08vw #fbff00, 0vw 0vw 2.08vw #fbff00, 0vw 0vw 4.16vw #fbff00,0vw 0vw 4.16vw #fbff00,0vw 0vw 8.3vw #fbff00;
}
header .btncontaniner_header_A.activeteSearch{
  position: absolute;
  right: -100vw;
  top: -100vh;
}
#periodictable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: 80vh;
  margin-top: 35vh; 
  align-items: center;
} 
#seleectormetaldiv {
  display: flex; 
  justify-content: center;
  z-index: 4;
  position: sticky;
  left: 7.6vw;
   top: 9vw; 
  padding: 3vh;
  border-radius: 6vh; 
   width: auto;
}
#selectormetals {
  transition-duration: 450ms;
  transition-property: auto;
  background-color: #1f1e1e;
  width: fit-content;
  display: flex;
  border-radius: 6vh;
  padding: 3vh;
 }
 #selectormetals.scrollActiveSelector{
  box-shadow: rgb(215 215 40) 0.156vw 0.104vw 0.208vw 0vw ;
  border-right:  .18vw solid  rgba(215 215 40)  ;
  border-bottom: .18vw solid  rgba(215 215 40) ;
 }
#selectormetals p {
  background: #1f1e1e;
  animation: elementsanimation  3s linear infinite ease-in-out ; 
  margin: 0vh 0.6vw;
  text-transform: capitalize;
  font-size: 0.85vw;
  padding: 0.4vh 0.8vh;
  cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png)  ,pointer;
   text-shadow: var(--All-element-common-text-shadow); 
  width: max-content; 
 }
 #selectormetals p.selector_active{
  transform: scale(1.55) matrix(1,  0.1, -0.1, 1.3, 0, 0);
  z-index: 18;
 }
.elements {
  display: grid;
  grid-gap: 0.8vw;
  transition: all 0.45s ,  margin-top 0s;
  width: 94vw;
  margin-top: 5vw;
  -webkit-transition: all 0.45s ,  margin-top 0s;
  -moz-transition: all 0.45s ,  margin-top 0s;
  -ms-transition: all 0.45s ,  margin-top 0s;
  -o-transition: all 0.45s ,  margin-top 0s;
}
.ACTIVATE_elementsGRID_ID{
margin-top :0.3vw ; 
}
.elementsAll  {
  border-top-left-radius: 0.35vw;
  border-bottom-right-radius: .35vw;
  background: linear-gradient(131deg, #221e1ea6, #000000f0) ;
  color: white;
  height: 5vw;
  width: 4.3vw;
  cursor:url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer;
  border: currentColor 0.04vw solid;
  transition: all 190ms ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7vw;
  word-wrap: break-word;
  animation: 6s linear infinite;
  text-shadow: var(--All-element-common-text-shadow);
  /* box-shadow: var(--Low_Blurs-All-element-common-box_shadow)  ; */
  box-shadow: var(--very_Low_Blurs-All-element-common-box_shadow);
  -webkit-transition: all 190ms ease-out;
  -moz-transition: all 190ms ease-out;
  -ms-transition: all 190ms ease-out;
  -o-transition: all 190ms ease-out;
}  
.elementsAllExtra{
  border-top-left-radius: 0.35vw;
  border-bottom-right-radius: .35vw;
  background: linear-gradient(343deg, #000000a5, #384436a5);   
  color: white;
  box-shadow: darkred var(--All-element-common-box_shadow) !important ; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  height: 5vw;
  width: 4.3vw;
   border:  darkred 0.04vw solid;
  font-size: 2.5vw; 
}
.allonclickdisplaycontent > div {
  width: 16vw;
}
.activated_elements_onclick{
  transform: scale(3.0);
  z-index: 8;
  animation-name: elementsanimation;
} 
.activeted {filter: brightness(0.2) blur(0.18vh);}
.activeteBLured {filter: blur(0.38vw);}

#otherseries {
  display: grid;
  margin: 2vw 0 0 9.6vw ;
  grid-gap: 1.2vw 0vh;
}  
#lanthrathideseries ,#anthrathideseires {
  grid-template-columns: auto auto auto  auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto;
  display: grid;
  grid-gap: 0.85vw;
}

.lanthrathideseries_elements ,  .anthrathideseires_elements { color: var(--lanthrathide_and_anthrathide-color); }   
.alkali-metals-selector ,  .akiline-earth-metals-selector ,  .transition-metal-selector , .post-transition-metal-selector ,   .metalloid-selector , .other-nonmetal-selector ,   .noble-gasses-selector ,   .unknown-selector ,  .lanthrathideseries-selector ,  .anthrathideseires-selector   { box-shadow: var(--All-element-common-box_shadow); }

.alkali-metals-selector  , .alkali-metals{color: var(--alkali-color); } 
.akiline-earth-metals-selector , .akiline-earth-metals {color: var(--alkali-earth-color); } 
.transition-metal-selector , .transition-metal{color: var(--transition-metal-color); } 
.post-transition-metal-selector , .post-transition-metal{color: var(--post-transition-metal-color); } 
.metalloid-selector , .metalloid {color: var(--metalloid-color); } 
.other-nonmetal-selector , .other-nonmetal {color: var(--other-nonmetal-color); } 
.noble-gasses-selector , .noble-gasses{color: var(--noble-gasses-color); } 
.unknown-selector , .unknown {color: var(--unknown-color); } 
.lanthrathideseries-selector , .lanthrathideseries {color: var(--lanthrathide_and_anthrathide-color); } 
.anthrathideseires-selector , .anthrathideseires {color: var(--lanthrathide_and_anthrathide-color); }
 #selectormetals p:hover {
  transform: scale(1.55) matrix(1, -0.1, 0.1, 1.3, 0, 0);
  z-index: 18;
  -webkit-transform: scale(1.55) matrix(1, -0.1, 0.1, 1.3, 0, 0);
  -moz-transform: scale(1.55) matrix(1, -0.1, 0.1, 1.3, 0, 0);
  -ms-transform: scale(1.55) matrix(1, -0.1, 0.1, 1.3, 0, 0);
  -o-transform: scale(1.55) matrix(1, -0.1, 0.1, 1.3, 0, 0);
}
.Elements_short_name {
  font-size: 1.4vw;
  font-family: 'megrim';
}

.Elements_full_name  {
  word-break: break-all;
  text-align: center;
   margin-top: 0.1vw;
  font-size: 0.6vw;
}
.elementsAllExtraName {
  word-break: break-all;
  text-align: center;
   margin-top: 0.1vw;
  font-size:0.72vw;
  font-weight: 660;
}
/* extra elements for  lanthrathide series and  anthrathide seiresname css */
 .elementsAllExtrasymbol{
  font-size: 1.8vw; 
  align-self: center;
  justify-self: center;
  text-align: center; 
 }
.Atomic_number {
  align-self: flex-start;
  font-family: 'megrim';
}
 
/* group 1*/
#elements-1 {grid-column: 1;grid-row: 1; }
#elements-3 {grid-column: 1;grid-row: 2;}
#elements-11 {grid-column: 1;grid-row: 3;}
#elements-19 {grid-column: 1;grid-row: 4;}
#elements-37 {grid-column: 1;grid-row: 5;}
#elements-55 {grid-column: 1;grid-row: 6;}
#elements-87 {grid-column: 1;grid-row: 7;}

/* group 2 */
#elements-4 {grid-column: 2;grid-row: 2;}
#elements-12 {grid-column: 2;grid-row: 3;}
#elements-20 {grid-column: 2; grid-row: 4;}
#elements-38 {grid-column: 2;grid-row: 5;}
#elements-56 {grid-column: 2;grid-row: 6;}
#elements-88 {grid-column: 2;grid-row: 7;}

/* group 3 */
#elements-21 {grid-column: 3;grid-row: 4;}
#elements-39 {grid-column: 3;grid-row: 5;}

/* extra elements for lanthrathideseries and anthrathideseires */
#below_elements_39__1 {grid-column: 3;grid-row: 6;}
#below_elements_39__2 {grid-column: 3;grid-row: 7;}

/* group 4 */
#elements-22 {grid-column: 4;grid-row: 4}
#elements-40 {grid-column: 4;grid-row: 5;}
#elements-72 {grid-column: 4;grid-row: 6;}
#elements-104 {grid-column: 4;grid-row: 7;}

/* group 5 */
#elements-23 {grid-column: 5;grid-row: 4;}
#elements-41 { grid-column: 5;grid-row: 5;}
#elements-73 {grid-column: 5; grid-row: 6;}
#elements-105 {grid-column: 5; grid-row: 7;}

/* group 6 */
#elements-24 {grid-column: 6;grid-row: 4;}
#elements-42 {grid-column: 6;grid-row: 5;}
#elements-74 {grid-column: 6;grid-row: 6;}
#elements-106 {grid-column: 6;grid-row: 7;}

/* group 7 */
#elements-25 {grid-column: 7;grid-row: 4;}
#elements-43 {grid-column: 7;grid-row: 5;}
#elements-75 { grid-column: 7;grid-row: 6;}
#elements-107 {grid-column: 7;grid-row: 7; }

/* group 8 */
#elements-26 { grid-column: 8;grid-row: 4;}
#elements-44 {  grid-column: 8; grid-row: 5; }
#elements-76 { grid-column: 8; grid-row: 6;}
#elements-108 { grid-column: 8;grid-row: 7;}

/* group 9 */
#elements-27 {grid-column: 9;grid-row: 4;}
#elements-45 { grid-column: 9;grid-row: 5; }
#elements-77 { grid-column: 9; grid-row: 6; }
#elements-109 {grid-column: 9;grid-row: 7;}

/* group 10 */
#elements-28 { grid-column: 10;grid-row: 4;}
#elements-46 {  grid-column: 10;grid-row: 5; }
#elements-78 {  grid-column: 10; grid-row: 6;}
#elements-110 {grid-column: 10; grid-row: 7;}

/* group 11 */
#elements-29 {grid-column: 11;grid-row: 4; }
#elements-47 { grid-column: 11; grid-row: 5;}
#elements-79 {  grid-column: 11; grid-row: 6; }
#elements-111 {grid-column: 11; grid-row: 7;  }

/* group 12*/
#elements-30 { grid-column: 12; grid-row: 4;}
#elements-48 { grid-column: 12;grid-row: 5;}
#elements-80 {grid-column: 12; grid-row: 6;}
#elements-112 {grid-column: 12; grid-row: 7;}

/* group 13 */
#elements-5 {  grid-column: 13; grid-row: 2;}
#elements-13 {grid-column: 13;grid-row: 3;}
#elements-31 {grid-column: 13;grid-row: 4;}
#elements-49 {grid-column: 13;grid-row: 5; }
#elements-81 {grid-column: 13; grid-row: 6; }
#elements-113 { grid-column: 13;grid-row: 7; }

/* group 14 */
#elements-6 { grid-column: 14;grid-row: 2; }
#elements-14 {grid-column: 14;  grid-row: 3; }
#elements-32 {grid-column: 14; grid-row: 4;}

#elements-50 {grid-column: 14;grid-row: 5;}
#elements-82 {grid-column: 14;grid-row: 6; }
#elements-114 {grid-column: 14; grid-row: 7;}

/* group 15 */
#elements-7 {grid-column: 15;grid-row: 2;}
#elements-15 {grid-column: 15;grid-row: 3;}
#elements-33 {grid-column: 15;grid-row: 4;}
#elements-51 {grid-column: 15;grid-row: 5;}
#elements-83 {grid-column: 15;grid-row: 6;}
#elements-115 {grid-column: 15;grid-row: 7;}

/* group 16 */
#elements-8 {grid-column: 16;grid-row: 2;}
#elements-16 {grid-column: 16;grid-row: 3;}
#elements-34 {grid-column: 16;grid-row: 4;}
#elements-52 {grid-column: 16;grid-row: 5;}
#elements-84 {grid-column: 16;grid-row: 6;}
#elements-116 {grid-column: 16;grid-row: 7;}

/* group 17 */
#elements-9 {grid-column: 17;grid-row: 2;}
#elements-17 {grid-column: 17;grid-row: 3;}
#elements-35 {grid-column: 17;grid-row: 4; }
#elements-53 {grid-column: 17;grid-row: 5;}
#elements-85 {grid-column: 17;grid-row: 6;}
#elements-117 {grid-column: 17;grid-row: 7;}

/* group 18 */
#elements-2 {grid-column: 18;grid-row: 1;}
#elements-10 {grid-column: 18;grid-row: 2;}
#elements-18 {grid-column: 18;grid-row: 3;}
#elements-36 {grid-column: 18;grid-row: 4;}
#elements-54 {grid-column: 18;grid-row: 5;}
#elements-86 {grid-column: 18;grid-row: 6;}
#elements-118 {grid-column: 18;grid-row: 7;} 

@keyframes elementsanimation {
  0% {
    box-shadow: 0.15vw -0.15vw 0.2vw 0vw currentcolor,
      -0.22vw 0.25vw 0.2vw 0vw currentcolor;
    text-shadow: 0.08vw 0.03vw 0.3vw, 0.04vw 0.03vw 0.3vw;
  }

  16.6666666666667% {
    box-shadow: 0vw -0vw 0.2vw 0vw currentcolor,
      -0vw 0vw 0.2vw 0vw currentcolor;
    text-shadow: none;
  }

  33.3333333333334% {
    box-shadow: 0vw -0vw 0.2vw 0vw currentcolor,
      -0vw 0vw 0.2vw 0vw currentcolor;
    text-shadow: 0.08vw 0.03vw 0.3vw, 0.04vw 0.03vw 0.3vw;
  }

  50.0000000000001% {
    box-shadow: 0vw -0vw 0.2vw 0vw currentcolor,
      -0vw 0vw 0.2vw 0vw currentcolor;
    text-shadow: none;
  }

  66.6666666666668% {
    box-shadow: 0.15vw -0.15vw 0.2vw 0vw currentcolor,
      -0.22vw 0.25vw 0.2vw 0vw currentcolor;
    text-shadow: 0.08vw 0.03vw 0.3vw, 0.04vw 0.03vw 0.3vw;
  }

  83.3333333333335% {
    box-shadow: 0.15vw -0.15vw 0.2vw 0vw currentcolor,
      -0.22vw 0.25vw 0.2vw 0vw currentcolor;
    text-shadow: none;
  }

  100% {
    box-shadow: 0.15vw -0.15vw 0.2vw 0vw currentcolor,
      -0.22vw 0.25vw 0.2vw 0vw currentcolor;
    text-shadow: 0.08vw 0.03vw 0.3vw, 0.04vw 0.03vw 0.3vw;
  }
}

#cutoption {
  position: sticky;
  top: 3vh;
  width: 95.5vw;
  left: 2vw;
  justify-content: center;
  display: flex;
  transition-property: all;
  transition-duration: 1000ms;
  z-index: 14;
  justify-content: space-between;
  filter: invert(1);
}

#cutoption img {
  display: none;
  position: sticky;
  width: 4vw;
  height: 4vw;
  z-index: 12;
  border-radius: 0.45vw;
  padding: 1.2vh;
  cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png ) , pointer;
  background: rgba(255, 255, 255, 0.739); 
  box-shadow: -0.156vw -0.104vw 0vw 0vw #000000, 0.052vw 0.104vw 0vw 0vw #000000, -0.156vw -0.104vw 0.208vw 0.26vw #ffffff, 0.052vw 0.104vw 0.208vw 0.26vw #ffffff, 0.052vw 0.104vw 1.04vw 1.04vw #838080; 
 }

.allonclickdisplaycontent {
   transform: translate(13.8vw, -8vh);
  grid-gap: 0.6vh 0vw;
  word-wrap: break-word;
  text-overflow: ellipsis;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1.2vh;
  text-shadow: none;
  text-shadow: 0.052vw 0.052vw 0vw black, 0.052vw 0vw 0vw black, 0vw 0.052vw 0vw black, -0.052vw 0.052vw 0vw black, 0.104vw 0.104vw 0.052vw black, 0.052vw -0.052vw 0.052vw black, 0vw 0.104vw 0.052vw black, -0.104vw 0.104vw 0.052vw black;  }

.summary {
  width: 100%;
  text-align: center;
  border-bottom: 0.2vh solid rgb(255, 255, 255);
  border-radius: 2.4vh;
  padding-bottom: 0.5vw;
  margin-top: -1vw;
}

.appearance {
  max-width: 13.6vw;
}

.discovered_by {
  max-width: 13.6vw;
} 

.ionization_energies {
  margin-bottom: 5vh;
  max-width: 18vw;
  word-wrap: break-word;
}

 /* extra bacground .elements */ 
 @keyframes roatationanima { 
       to{
            background-position: 3840px;
       }
   }

#background-container{
 position: fixed;
right: 0;
z-index: -4;
height: 280vh;
width: 100vw;
} 

/* ---- particles.js container ---- */
#particles-js{
  display: none;
 width: 100%;
height: 100%;
position: fixed;
z-index: -2;
}

.DISPLAYNone{  
display: none; 
}
#particles-js.toggleNone{
display: block !important;
} 

.toggle{
  position: fixed;
  top: 1.5vw;
  right: 3.5vw;
  width: 4vw;
  height: 4vw;
  background: rgb(255, 255, 255) url("bg/menu.png") center no-repeat;
  background-size: 3vw;
  filter: invert(1);
   border-radius: 0.3vw;
  cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer;
  z-index: 6;
  transition: all 300ms linear ;

}
.toggle.activatedMenuClass ,.toggle.activeteSearch { 
   background: rgb(255, 255, 255) url("bg/close.png") center no-repeat;
   background-size: 3vw;
   z-index: 25;  
}  
.sidebar , .sidebar2{
position: absolute;
font-family: 'megrim';
 background: #470101e6 url("bg/sidebar-2-bg.jpg") ; 
display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: all 900ms linear , opacity 1400ms   linear   ;
  z-index: 24;
  height:  0vh;
  width:  0vw;
   border-radius: 0.4vw;
  right: -200vw;
  border: 0.625vw solid white;
  opacity: 0;
  top: 100vh;
  background-size: cover;
}

.sidebar2{ 
  right:  200vw;
  background: #470101e6 url("bg/sidebar-1-bg.jpg");  
top: 0vh;
background-size: cover;
}
.sidebar.activatedMenuClass{
top: 0vh;
 right:  0vw;
 width: 50vw;
 height: 100vh;
 border: none;
 opacity: 1;
  }
.sidebar2.activatedMenuClass{
 right:  50vw;
 width: 50vw;
 height: 100vh;
 border: none;
 opacity: 1;
}
#earth-img{ 
position: absolute;
  top: 8vh;
  right: 6vw;
  transform: translate(-50% , -50%);
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  background: url("bg/earth.jpg") cover repeat-x;
  box-shadow: inset 0 0 1.04vw #0319f4, 0 0 6.25vw #03a9f4;
  transform: rotate( 334deg);
  animation: roatationanima linear infinite  154s; 
  z-index: 3;
  display: none;
} 
@keyframes rotate {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
 }
}

.planetaMian
{    position: absolute;
display: none;
  transform: rotate( 338deg);
  top: -2vh;
  right: 10vw; 

}
.planetaMian.toggleNone{
display: block;
}
.planet ,  .sunmain{
  width:26vw;
  height:26vw;
  position:absolute;
  border-radius:50%;
  overflow:hidden;
  top: 3.9vw;
  right: 12vw;
  margin:-7.8vw;
  animation: rotatebac 600s infinite linear;  
  box-shadow: inset 0 0 1.04vw #0319f4, 0 0 6.25vw #03a9f4;
  transform: rotate( 334deg);
}
.planet .mask ,  .sunmain .Sunmask{
  width:100%;
  height:100%;
  position: absolute;
  box-shadow:inset -0.52vw -0.52vw 2.08vw #0319f4, inset 0.52vw 0.52vw 1.56vw -0.52vw #03a9f4;
  border-radius:50%;
} 
.planet .background ,  .sunmain .sunbackground{
  animation: translateBackground 160s infinite linear;  
  background:url("bg/earth.jpg") repeat-x  ;
  background-size: cover;
  width:100%;
  height:100%;
  position:absolute;
  border-radius:50%;
}
.planet .clouds{
  background:url(http://artem.anmedio.ru/dev/planet/clouds.png) repeat-x;
  width:100%;
  height:100%;
  position:absolute;
  border-radius:50%;
  animation: translateBackground 120s infinite linear;
  opacity: 0.4;
}
.planet .wrap,  .sunmain .sunwrap{
  width:100%;
  height:100%;
  position:absolute;
  border-radius:50%;
  animation: rotatePlanet 600s infinite linear;  
}
@keyframes translateBackground{
0%{
  background-position-x:0;
}
100%{
  background-position-x:-600px;
}
}
@keyframes rotatePlanet{
0%{
  transform:rotateZ(0deg);
}
100%{
  transform:rotateZ(-360deg);
}}
@keyframes rotatebac{
0%{
  transform:rotateZ(0deg);
}
100%{
  transform:rotateZ(360deg);
}
}
.sunmain{
  display: none;
  width:45vw;
  height:45vw;
  top: 0vw;
  left: -17vw;
  margin:-7.8vw;
  animation: rotatebac 50s infinite linear;  
  box-shadow: inset 0 0 1.04vw #dcf403, 0 0 6.25vw #f4c803;
}
.sunmain.toggleNone{
display: block;
}
.sunmain .Sunmask{ 
  box-shadow:inset -0.52vw -0.52vw 2.08vw #dcf403, inset 0.52vw 0.52vw 1.56vw -0.52vw #f4c803;
} 
.sunmain .sunbackground{
  animation: translateBackground 26.66s infinite linear;  
  background:url("bg/sun.jpg") repeat-x  ;
}

.sunmain .sunwrap{
  animation: rotatePlanet 50s infinite linear;  
}

.onclickbackgorund{ 
  position: absolute;
  display: flex;
  flex-direction: column;
  z-index: 6;
  right: -100vw;
  transition: all linear 1s;
  transition-delay: 50ms;
  transform-style: preserve-3d;
  overflow: hidden;
}
.onclickbackgorund span{
background: linear-gradient(90deg , rgba(144, 78, 230, 0.404), rgba(235, 8, 8, 0.657));
position: relative;
right: -100vw;
transition: all linear 800ms;  
border  : 0.06vw solid rgb(255, 255, 255);
height: 0vw;
width: 0vw;
}
.onclickbackgorund span:nth-child(2){transition-delay : 400ms ;}  
.onclickbackgorund span:nth-child(3){transition-delay: 800ms ;}  
.onclickbackgorund span:nth-child(4){transition-delay:1200ms ;}  
.onclickbackgorund span:nth-child(5){transition-delay:1600ms ;}  
.onclickbackgorund span:nth-child(6){transition-delay:2000ms ;}  
.onclickbackgorund span:nth-child(7){transition-delay:2400ms ;}  
.onclickbackgorund span:nth-child(8){transition-delay:2800ms ;}  
.onclickbackgorund span:nth-child(9){transition-delay:3200ms ;}  
.onclickbackgorund span:nth-child(10){transition-delay:3600ms ;}  
.onclickbackgorund span:nth-child(11){transition-delay: 4000ms ;}  
.onclickbackgorund span:nth-child(12){transition-delay:4400ms ;}  

.onclickbackgorund.activated_span{
right: 0vw; 
width: 100vw;
}     
.onclickbackgorund.activated_span span{
width: 100vw;
height: 22vw;
right: 0vw;
border  : 0.0vw solid rgb(255, 255, 255);
}   
.btncontaniner{
display: flex;
justify-self: unset;
color: #000;
align-items: center;
flex-wrap: wrap;
position: relative;
right: 6vw;
}
.btncontaniner.sidebarcontanier{
flex-direction: column;
  display: flex;
  position: absolute;
  height: 104vh;
  justify-content: center;
  left: 12vw;
}
.btncontaniner.sidebarcontanier.Customization-modes{
  height: 90vh;
  width: 22vw;
  justify-content: flex-start;
  top: 4vh;
  background: #0f0f0f96;
  border-radius: 1.06vw;
  padding: 1vw;
   box-shadow: 0vw 0vw 1.5vw 0vw rgb(0, 0, 0);
  left: -150vw;
}
.btncontaniner.sidebarcontanier.Customization-modes.activatedMenuClass{
  left: 16vw;
  opacity: 0.95;
}

.btncontaniner.sidebarcontanier.Customization-modes a{
  margin: 2vw 0;
}
.BlankForSidebar1, .BlankForSidebar2{ 
position: relative;
   top: -1.5vh;
  width: 50vw;
  height: 104vh;
  background: linear-gradient( 270deg, #000000be, #fffbfb1a);
z-index: -1;
transition: all 700ms linear;
}
.BlankForSidebar1{
background: linear-gradient( 90deg, #000000be, #fffbfb1a);
box-shadow: inset 0.104vw 0vw 1.56vw 0vw #1c1f22, inset -1.04vw 0vw 1.56vw 0.46vw #1c1f22;
}
.BlankForSidebar.activatedBlankForSidebarClass{position: absolute;}

.AllMainCustomize{
display: flex;
flex-direction: column;
color: #ffffff;
}

.MainCustomizeFlex{
display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 19.5vw;
  height: 4.5vw;
  box-shadow: 0vw 0vw 1vw 0.2vw #4ccf47;
  margin: 1.2vw 0;
  padding: 0.6vw 1vw;
  border-radius: 0.8vw;
}
.MainCustomizeFlex p{
font-weight: 780;
  color: #ffffff;
  font-size:2vw;
  text-transform: uppercase;
  letter-spacing: 0.104vw;
  text-shadow: 0vw 0vw 0.52vw #00b3ff, 0vw 0vw 1.04vw #00b3ff,0vw 0vw 2.08vw #00b3ff, 0vw 0vw 3.125vw #00b3ff, 0vw 0vw 4.16vw #00b3ff, 0vw 0vw 6.25vw #00b3ff   ;
  width: 12vw; 
}
.btncontaniner.sidebarcontanier .sidebarbtns , .btncontaniner.sidebarcontanier .directbtnFALSE{
  margin: 0.52vw 2.08vw;
}
.btncontaniner .sidebarbtns ,.btncontaniner .directbtnFALSE {
font-size: 1.18vw;
position: relative;
display: inline-block;
padding: 0.78vw 1.56vw ;
border: 0.104vw solid #0f0;
margin:  0 2.08vw;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.104vw ;
color: white;
transition: 0.5s;
-webkit-box-reflect: below 0vw linear-gradient( #00000000 , #00000036);
}
a{
  cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer !important;
}
.btncontaniner .sidebarbtns:hover{
color: black;
box-shadow: 0vw 0vw 0.52vw #0f0,0vw  0vw 1.04vw #0f0,0vw  0vw 2.08vw #0f0,0vw  0vw 4.16vw #0f0,0vw  0vw 8.3vw #0f0  ;

}
.btncontaniner .sidebarbtns span , .btncontaniner .directbtnFALSE span {
position:relative ;
z-index: 12;
}
.btncontaniner .sidebarbtns:nth-child(2) ,  .btncontaniner .directbtnFALSE:nth-child(2) ,  header .btncontaniner_header_A .header_A:nth-child(2){filter: hue-rotate(80deg);}
.btncontaniner .sidebarbtns:nth-child(3) ,  .btncontaniner .directbtnFALSE:nth-child(3) ,  header .btncontaniner_header_A .header_A:nth-child(3){filter: hue-rotate(180deg);}  
.btncontaniner .sidebarbtns:nth-child(4) ,  .btncontaniner .directbtnFALSE:nth-child(4),   header .btncontaniner_header_A .header_A:nth-child(4){filter: hue-rotate(35deg);}  
.btncontaniner .sidebarbtns:nth-child(5) ,  .btncontaniner .directbtnFALSE:nth-child(5){filter: hue-rotate(80deg);}  
.btncontaniner .sidebarbtns:nth-child(6) ,  .btncontaniner .directbtnFALSE:nth-child(6){filter: hue-rotate(180deg);}  
.btncontaniner .sidebarbtns:nth-child(7) ,  .btncontaniner .directbtnFALSE:nth-child(7){filter: hue-rotate(35deg);}  
.btncontaniner .sidebarbtns:nth-child(8) ,  .btncontaniner .directbtnFALSE:nth-child(8){filter: hue-rotate(60deg);}  
.btncontaniner .sidebarbtns:nth-child(9) ,  .btncontaniner .directbtnFALSE:nth-child(9){filter: hue-rotate(180deg);}  

.btncontaniner .sidebarbtns::before ,.btncontaniner .directbtnFALSE::before{
content: "";
position: absolute;
left: -1.04vw ;
top: 1.406vw;
transform: translateY(-50%);
width: 1.04vw;
height: 0.104vw;
background-color: #0f0;
box-shadow: 0.26vw -0.416vw 0 #0f0,0.26vw  0.416vw 0 #0f0  ;
transition: width 0.5s, left 0.5s , height 0.5s , box-shadow 0.5s;
transition-delay:  1s , 0.5s , 0s , 0s ;
}
.btncontaniner .sidebarbtns:hover::before{
width: 62%;
height: 110%;
left: -0.104vw;
box-shadow: 0.26vw  0vw 0 #0f0,0.26vw  0vw 0 #0f0  ;
transition-delay:  0s , 0s , 0.5s , 1s ;
}

.btncontaniner .sidebarbtns::after ,.btncontaniner .directbtnFALSE::after{ 
content: "";
position: absolute;
right: -1.04vw ;
top: 1.406vw;
transform: translateY(-50%);
width: 1.04vw;
height: 0.104vw;
background-color: #0f0;
box-shadow: -0.26vw -0.416vw 0 #0f0, -0.26vw  0.416vw 0 #0f0  ;
transition: width 0.5s, right 0.5s , height 0.5s , box-shadow 0.5s;
transition-delay:  1s , 0.5s , 0s , 0s ;
}
.btncontaniner .sidebarbtns:hover::after{
width: 62%;
height: 110%;
right: -0.104vw;
box-shadow: -0.26vw  0vw 0 #0f0,-0.26vw  0vw 0 #0f0  ;
transition-delay:  0s , 0s , 0.5s , 1s ;
}
 .boxheading {
  width: 17vw;
  height: 6vw;
  overflow: hidden;
  display: flex;
  padding: 2vw;
  filter: hue-rotate(46deg);
}
#Customization{
position: relative;
  font-weight: 900;
  color: #ffffff;
  font-size: 2vw;
  text-transform: uppercase;
  letter-spacing: 0.104vw;
  text-shadow: 0vw 0vw 0.52vw #00b3ff, 0vw 0vw 1.04vw #00b3ff,0vw 0vw 2.08vw #00b3ff, 0vw 0vw 3.125vw #00b3ff, 0vw 0vw 4.16vw #00b3ff, 0vw 0vw 6.25vw #00b3ff   ;
}
.lightbar{
position: absolute;
top: 1.5vw;
left: 0;
width: 0.52vw ;
height: 6vw;
border-radius: 0.52vw;
color: #b5ff00;    
z-index: 2;
box-shadow: 0vw 0vw 0.52vw currentColor, 0vw 0vw 1.04vw currentColor,0vw 0vw 2.08vw currentColor, 0vw 0vw 3.125vw currentColor, 0vw 0vw 4.16vw currentColor, 0vw 0vw 5.2vw currentColor, 0vw 0vw 6.25vw currentColor, 0vw 0vw 7.29vw currentColor, 0vw 0vw 8.3vw currentColor,0vw 0vw 9.375vw currentColor, 0vw 0vw 10.4vw currentColor, 0vw 0vw 11.45vw currentColor, 0vw 0vw 12.5vw currentColor, 0vw 0vw 13.54vw currentColor, 0vw 0vw 14.58vw currentColor, 0vw 0vw 15.625vw currentColor   ;
background-color: white;
animation: aniamatetext 5s linear infinite;
} 
.toplayer{
 display: none;
 position: absolute;
 top: 2vw;
left: 0;
width: 18vw ;
height: 6vw;
border-radius: 0.52vw;
background-color: #0f0f0f;
color: white;
z-index: 2;
animation: aniamatetoplayer 10s linear infinite;
}

@keyframes aniamatetext {
 0%,5%  {transform: scaleY(0)  translateX(3vw);}
 10%     {transform: scaleY(1)  translateX(3vw);} 
 90%    {transform: scaleY(1)  translateX(20vw);}
 95% , 100%   {transform: scaleY(0)  translateX(20vw);}
}
@keyframes aniamatetoplayer {
2.5%     {transform: translateX(0);}
 5%       {transform: translateX(0);} 
 45%     {transform: translateX(18vw);}
 47.5% , 50%        {transform: translateX(18vw);}
50.001% , 52.5%   {transform: translateX(-18vw);}
 55%     {transform: translateX(-18vw);} 
 95%     {transform: translateX(0vw);}
 97.5% , 100%       {transform: translateX(0vw);}
}
.submainbtncontanier{
flex-direction: column;
  display: flex;
  align-items: center;
  margin-top: -2vw;
  justify-content: center;
  padding: 2vw;
}
#Customization_selector.activatedMenuClass::after , .ModesOPtim.activatedMenuClass::after{
width: 62%;
height: 110%;
right: -0.104vw;
box-shadow: -0.26vw  0vw 0 #0f0, -0.26vw  0vw 0 #0f0  ;
transition-delay:  0s , 0s , 0.5s , 1s ;
}
#Customization_selector.activatedMenuClass::before ,  .ModesOPtim.activatedMenuClass::before{
width: 62%;
height: 110%;
left: -0.104vw;
box-shadow: 0.26vw  0vw 0 #0f0,0.26vw  0vw 0 #0f0  ;
transition-delay:  0s , 0s , 0.5s , 1s ;
}
#Customization_selector.activatedMenuClass , .ModesOPtim.activatedMenuClass {
color: black;
box-shadow: 0vw 0vw 0.52vw #0f0,0vw  0vw 1.04vw #0f0,0vw  0vw 2.08vw #0f0,0vw  0vw 4.16vw #0f0,0vw  0vw 8.3vw #0f0  ;
}
.switch{
position: relative;
  width: 4.427vw;
  height: 4.58vw;
  border: 0.156vw solid #0000;
  background: linear-gradient(#eee ,#ccc , #eee);
  border-radius: 0.52vw;
  display: flex;
  justify-content:  center ;
  align-items: center;
  box-shadow: -0.052vw -0.052vw 0.104vw 0.156vw black;
  flex-direction: column;
}
.switch .ON_OFF_METER::after{ 
  content: "OFF";
  color: #fff;
  letter-spacing: 0.104vw;
  position: absolute;
  font-size: 1.45vw;
  top: 72%;
  left: -82%;
  z-index: 5;
  text-shadow: 0vw 0vw 0.52vw #ff0000, 0vw 0vw 1.04vw #ff0000, 0vw 0vw 2.08vw #ff0000, 0vw 0vw 3.125vw #ff0000, 0vw 0vw 4.16vw #ff0000, 0vw 0vw 6.25vw #ff0000;
 }
.switch .circleONOFF{
  position: absolute;
  width: 0.4vw;
  height: 0.4vw;
  background: currentColor;
  border-radius: 50%;
  border: 0.2vw solid black;
  left: -60%;
  top: 40%;
  color: red;
  box-shadow: 0vw 0vw 1.2vw 0.4vw currentColor; 
}
 .switch .btn{
  position: relative;
  width: 1.3vw;
  height: 2.08vw;
  background: linear-gradient(#777 ,#fff ,#777);
  border-radius: 0.3125vw ;
  border: 0.104vw solid #0000;
  cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer;
  box-shadow: -0.052vw -0.052vw 0.104vw 0.156vw black;
}
.switch .btn::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 85%;
  background: linear-gradient(#fff , #fff);
  border-radius: 0.208vw;
  box-shadow: -0.052vw -0.052vw 0.104vw 0.156vw black;
}
#switch1.on ,   #switch2.on , #switch3.on{box-shadow:  -0.104vw   0.104vw 0.104vw 0.104vw black;  }
#switch1.on  .btn::before ,  #switch2.on  .btn::before ,  #switch3.on  .btn::before{top: 15%;box-shadow: -0.052vw 0.052vw 0.104vw 0.104vw black;}
#switch1.on   .btn ,  #switch2.on  .btn ,  #switch3.on  .btn  { box-shadow: -0.052vw 0.052vw 0.104vw 0.104vw black;}
#switch1.on .ON_OFF_METER::after , #switch2.on .ON_OFF_METER::after , #switch3.on .ON_OFF_METER::after{ content: "ON";text-shadow: 0vw 0vw 0.52vw #ffff00, 0vw 0vw 1.04vw #ffff00, 0vw 0vw 2.08vw #ffff00, 0vw 0vw 3.125vw #ffff00, 0vw 0vw 4.16vw #ffff00, 0vw 0vw 6.25vw #ffff00;}
#switch1.on .circleONOFF ,#switch2.on .circleONOFF ,#switch3.on .circleONOFF { color: yellow; }
.moblieISNotRoated , .orientatinalBTn , .ForMoblieElements{display: none;}

  @media only  screen and ( max-width : 550px )   {
   header {
     flex-direction: column;
     border: none;
     border-radius: 0 ;
     justify-content: flex-start;
     align-items: flex-start;
     height: 50vh;
     margin-left: 4vh;
     background:  transparent;
     font-size: 3vh;
     position: static;
   }
   header.activeteSearch{
    height: 88vh;  
   }
   header .logo{
    margin-top: 1vh;
     font-size: 3vh;
   }
   header .btncontaniner_header_A{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
   }
   header .btncontaniner_header_A .header_A{
     margin-top: 1vh;
      font-size: 3vh;
      -webkit-box-reflect: below 0vw linear-gradient( #00000000 , #00000000);
    }
    header #search{
      color: white;
      height: 4.6vh;
    width: 90vw;
     border-radius: 0.5vh;
     position: absolute;
    top: 32vh;
    left: 2vh;
    margin: 0;
    font-size: 3vh ;
    border: white outset 0.2vh;
     }
     .toggle{
     top: 9vh;
    right: 2vh;
    width: 6.5vh;
    height: 6.5vh;
    border-radius: 0.5vh;
    background-size: 4.5vh;
    border: 0.02vh white outset; 
  }
  .toggle.activatedMenuClass ,.toggle.activeteSearch { 
    background-size: 7vw; 
  }
  #periodictable{
    display: none;
  }
  body.activeteSearch .moblieISNotRoated ,  body.activeteSearch .orientatinalBTn ,body.activeteSearch .ForMoblieElements {
    top: 100vh;
    left: -200vh;
   } 
  header #search.activeteSearch    {
    top: 8vh;
    width: 90%;
    height: 1.22%;
    color: white;
    background-color: #00000080;
     }
  header.activeteSearch .suggestionsMainCLASS   {
    width: 92vw;
     top: 20vh;
     left: 2.2vh;
  }
  .moblieISNotRoated , .orientatinalBTn{
     display: none;
    position: absolute;
    top: 50vh;
    left: 10vw;
      color: white;
    font-size: 3.3vh;
    text-shadow:  var(--All-element-common-text-shadow);
    transition: all 450ms linear , left 450ms 450ms linear;
  }
  .ForMoblieElements{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 96vw;
    margin: auto;
     font-size: 1.2vh;
    color: white;
    background: #2925259a;
    box-shadow: var(--All-element-common-box_shadow);
    margin-bottom: 60vh;
    overflow: scroll;
    }
   .Moblie_divTableHead , .MoblieTableTBody{
     width: inherit;
   }
   .Moblie_divTableTheadTR{
     background: rgb(49, 43, 39)  ;
   }
   .Moblie_elementsAll , .Moblie_divTableTheadTR{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-template-rows: auto auto; 
    align-items: center;
    justify-items: center;
    width: max-content;
    background: radial-gradient(#d1c3c328, #000000b8);
  }
 
  .Moblie_elementsAll .MoblieDivTableParts.inner {
    grid-column: 1/7 ; 
    display: flex !important;
    flex-direction: column;
     overflow: hidden;
     position: relative;
     width:  0;
     height: 0;
     padding: 0;
     border: none;
     justify-self: flex-start;
     } 
     .inner.activatedToggleForDivTable{
      height: auto !important;
      width:  auto !important;
      border: 0.04vh white solid !important;
      padding : 2vh  !important;
      width: -webkit-fill-available !important;
      width: -moz-available !important;
      }
    .inner div {
    margin: 0.6vh 0 ;
    max-width: 88vw;
    word-break: break-word;
    } 
  .Moblie_elementsAll .MoblieDivTableParts  ,.Moblie_divTableTheadTR div{
    display: inline-flex;
    font-size: 1.8vh; 
    border: 0.04vh white solid;
     padding: 0.5vh .825vh;
     justify-content: center;
  }
.Moblie_divTableTheadTR div:nth-child(1), .Moblie_elementsAll .MoblieDivTableParts:nth-child(1){
 width: 3.5vh;
}
.Moblie_divTableTheadTR div:nth-child(2) ,.Moblie_elementsAll .MoblieDivTableParts:nth-child(2){
 width: 6.5vh;
}
.Moblie_divTableTheadTR div:nth-child(3) ,.Moblie_elementsAll .MoblieDivTableParts:nth-child(3){
 width: 8vh;
 }
.Moblie_divTableTheadTR div:nth-child(4) , 
.Moblie_elementsAll .MoblieDivTableParts:nth-child(4){
 width: 16vh;
}
.Moblie_divTableTheadTR div:nth-child(5),.Moblie_elementsAll .MoblieDivTableParts:nth-child(5),
.Moblie_divTableTheadTR div:nth-child(6),.Moblie_elementsAll .MoblieDivTableParts:nth-child(6){
 width: 7vh;
}
 
.Clicked_Moblie_Element_class .Moblie_clickable_Item{
  align-items: center;
  font-size: 2.4vh;
  text-shadow: 0.2vh 0.2vh 0.2vh black, -0.2vh -0.2vh 0.2vh black;
  background: linear-gradient(#a82020, #7b97e4bf) !important;
}
  
 /* logic for selecting element in definite range 
  for us :-- let number  = number of last element
  \wheres " n " is total number in css nth-child pusedo selector
 .Clicked_Moblie_Element_class div:nth-child(-n + number) 
 */
 
  .orientatinalBTn{
  box-shadow: 0vw 0vw 0.52vw #fbff00, 
                      0vw 0vw 1.04vw #fbff00 , 
                      0vw 0vw 1.04vw #fbff00 ; 
                      font-size: 2.4vh;
                      top: 78vh;

                     }
 .orientatinalBTn:hover{
filter: sepia(1) hue-rotate(45) contrast(1.4) brightness(1.2);
font-size: 2.8vh;
 }
  .table {
    width:max-content !important ;
  }
  .table tbody tr td{
    font-size: 1.8vh;
 width: max-content !important;
 box-shadow:    
                   inset 0 0 0.8vh #ff08e8; 

  }
 
  .table thead tr th:nth-child(1),  .table thead tr th:nth-child(1) input  ,.table thead tr th:nth-child(3) ,  .table thead tr th:nth-child(3) input  {
width: 8.4vh !important;
} 

.table thead tr th:nth-child(2) ,  .table thead tr th:nth-child(2) input ,.table thead tr th:nth-child(6) ,  .table thead tr th:nth-child(6) input,.table thead tr th:nth-child(7)   ,  .table thead tr th:nth-child(7) input {
width: 12.8vh !important;
} 

.table thead tr th:nth-child(4) , .table thead tr th:nth-child(4)  input  {
width: 20.6vh !important; 
}

table thead tr th:nth-child(5)   {
width: 32vh !important;
}  
table thead tr th:nth-child(5) input {
width: 31vh !important;
}  
table thead tr th:nth-child(8)  {
 width: 16.8vh !important;
}   
 table thead tr th:nth-child(8)  input {
 width: 12.8vh !important;
}   
.table tbody tr td:nth-child(8){ 
  width: 16.8vw !important;
 width: -webkit-fill-available !important;
 height: inherit !important;
 } 
 .table thead tr th {
  font-size: 2.4vh; 
  height: inherit;
} 
.table thead tr  th input  {
  font-size: 2vh; 
  height: inherit;
} 
table thead tr:nth-child(2) th {
    position: sticky;
    top: 3.8vh !important;
    background: #000000;
}
.elementsAll  {
  border-top-left-radius: 0.35vh;
  border-bottom-right-radius: .35vh;
  height: 20vh;
  width: 16vh;
   border: currentColor 0.04vh solid;
   font-size: 2.8vh; 
   }  
  .Moblie_Elements_short_name {
  font-size: 5.6vh;
}
.Moblie_Elements_full_name  {
  font-size: 2.4vh;  
  word-break: keep-all; 
}
.Moblie_Atomic_number {
  align-self: flex-start;
} 
.Moblie_appearance {
  max-width: max-content;
 }
.Moblie_discovered_by {
  max-width: max-content;
} 
.Moblie_ionization_energies {
   max-width: max-content;
 } 
 .table thead th .inputOnscroll{
   font-size: 2.5vh;
 }


}    
.scroll {
  cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer;
   width: 70px;
  height: 70px;
  position: fixed;
  bottom: 40px;
  right: -80px;
  border-radius: 100%;
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% );
  color: #fff;
  font-size: 44px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0 5px 0px #888;
  transition: 300ms;
}
.scroll i {
  margin-top: 10px;
  text-shadow: 0 0 2px #fff;
}
.scroll:hover i {
  animation-name: rotate;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes rotate {
  from {margin-top: 15px}
  to {margin-top: 5px}
}
.visible {
  right: 30px;
  transition: all 400ms;
  transform: rotate(360deg)
}
.Speakbuttons {
  align-self: center;
    display: flex;
    height: 0vh;
    width: auto;
    order: -1;
    z-index: 0;
    justify-content: flex-end;
  }
  .Speakbuttons button {
  cursor: url(https://cdn.custom-cursor.com/db/5457/32/dark-purple-color-pointer.png) , pointer;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
}
.Speakbuttons button.activebutton{
  filter: invert(1);
  width: 8vh;
  height: 8vh;
 }
.play {
    background-image: url("bg/svg/play.svg");
} 
.pause {
    background-image: url("bg/svgpause.svg");
} 
.stop {
    background-image: url("bg/svgstop.svg");
}