#table{
  border: 2px solid black;
  background-color: rgb(49, 49, 49);
  position: absolute;
  top: 0;
  left: 0;
}

:root {
  --reactive_nonmetal: #0e0bd6;
}

:root {
  --alkalai_metal: #8f2222;
}

:root {
  --metalloid: #1e8ed8;
}

:root {
  --post_transition_metal: #21be1c;
}

:root {
  --transition_metal: #ddda1c;
}

:root {
  --alkaline_earth_metal: #ca7819;
}

:root {
  --unknown_properties: #8f8b88;
}

:root {
  --nobel_gasses: #a828cf;
}

:root {
  --lanthanides: #f5c645;
}

:root {
  --actinides: #5a7fe4;
}

/*BROWER*/

body {
  display: flex;
  flex-direction: row;
}

#boil{
  justify-content: flex-start;
  position: absolute;
  top: 44%;
  left: 2%;
  font-weight: bolder;
}

#chart{
  border-style: solid;
  border-color: black;
}

#electrons{
  justify-content: flex-start;
  position: absolute;
  top: 66%;
  left: 2%;
  font-weight: bolder;
}

#sheet {
  display: flex;
  justify-content: flex-start;
  position: absolute;
  bottom: 0;
  left: 0px;
  margin-left: 20px;
}

#mass {
  justify-content: flex-start;
  position: absolute;
  top: 33%;
  left: 2%;
  font-weight: bolder;
}

#melt {
  justify-content: flex-start;
  position: absolute;
  top: 55%;
  left: 2%;
  font-weight: bolder;
}

#name {
  justify-content: flex-start;
  position: absolute;
  left: 2%;
  font-weight: bolder;
}

#number {
  justify-content: flex-start;
  position: absolute;
  top: 11%;
  left: 2%;
  font-weight: bolder;
}

#protons {
  justify-content: flex-start;
  position: absolute;
  top: 77%;
  left: 2%;
  font-weight: bolder;
}

#stuff {
  display: flex;
  align-items: flex-end;
  flex-direction: row;
  padding-bottom: 50;
}

#symbol {
  justify-content: flex-start;
  position: absolute;
  top: 22%;
  left: 2%;
  font-weight: bolder;
}

/*Will*/

#rep {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}

#rep_canvas {
  bottom: 0;
  right: 0;
  background-color: black;
}

#info {
  position: absolute;
  bottom: 0;
  right: 0;
  color: white;
  font-weight: bolder;
}

/*#MassNumValue {
  position: absolute;
  bottom: 640;
}

#AtomicNumValue {
  position: absolute;
  bottom: 640;
}*/