:root {
  --elBoxWidth: 300px;
  --nonMetalsColour: #cc745c;
  --nobleGasesColour: #9ec884;
  --alkaliMetalsColour: #f9a755;
  --alkalineEarthsColour: #28a4b1;
  --metalloidsColour: pink;
  --transitionMetalsColour: #c7a9d0;
  --halogensColour: #ffca04;
  --postTransitionsColour: #5fc3ad;
  --lanthanidesColour: #dab38e;
  --actinidesColour: #20c3f3;

}

body {
  background-color: #004d75;
  color: rgba(255,255,255,0.7);;
}

#ptTitle {
  text-align: center;
  margin-top: 80px;
  position: fixed;
  width: 100%;
}

#ptContainer {
  background: pink;
  width: 100vw;  
}

.element {
  width: var(--elBoxWidth);  
  height: var(--elBoxWidth);
  text-align: center;
  position: fixed;
  cursor: pointer;  
  border: 2px solid rgba(0,0,0,0.7);
  color: rgba(0,0,0,0.7);
  line-height: 0.9;
  border-radius: 4px;
  padding: 2px;
}
.element:hover {
  border: 2px solid rgba(255,255,255,0.7);
}

#infoBox {
  display: flex;
  position:fixed;
  top: 100px;
  left: 80px;    
  padding: 0.5em 1.0em;
  color: rgba(0,0,0,0.7);
  border-radius: 0.7em;  
}

.polyIon {
  text-align: center;
  position: fixed;
  cursor: default;  
  border: 2px solid rgba(0,0,0,0.7);
  line-height: 0.9;
  padding-top: 6px;
  background-color: mediumseagreen;
  color: rgba(0,0,0,0.7);
}

#credits{ 
  height: 90vh;
  width: 100%;
  padding-top: 80vh;
  font-style: italic; text-align: right;
  font-size: 11pt;  
}