.inline_container{
  display: inline-block;
}
.center_container{
  text-align: center;
  padding: 3vh;
}
.justify_container{
  text-align: justify;
  padding: 3vh;
}
.container_big {
  position: relative;
  margin: auto;
  color: black;
  overflow-y: scroll;
  max-width: 80vw;
}

.container {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;

}

.container_nonmetals {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 2px solid lime;
  border-collapse: collapse;
  margin: 0;
  padding: 0px;

}

.container_noble {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid deepskyblue;

}

.container_alkali {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid orange;
  border-collapse: collapse;
  margin: 0px;

}

.container_earth_alkali {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid yellow;

}

.container_transition {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid pink;

}
.container_metalloids {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid seagreen;

}

.container_posttransition {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid darkturquoise;

}

.container_lanthanides {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid violet;

}
.container_actinides {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid chocolate;
}

.container_null {
  position: relative;
  text-align: center;
  color: black;
  height: 8.5vh;
  width: 8.5vh;
  border: 0.3vh solid white;
}
  /* Centered text original 30px*/
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 3vh;
  color: black;
}

.centered-small {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2.5vh;
  color: black;
}
.centered-grey {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 3vh;
  color: grey;
}

.centeredbig {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 36px;
  color: black;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Bottom left text original 20px*/
.bottom-centered {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2vh;
  color: black;
  text-align: center;
}
/*original 20 px*/
.bottom-centered-grey {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2vh;
  color: grey;
  text-align: center;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top left text */
.top-centered {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2vh;
  color: black;
  text-align: center;
}
/* original 20px*/
.top-centered-grey {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2vh;
  color: grey;
  text-align: center;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.pane {
    display: inline-block;
    overflow-y: visible;
    max-height:9vh;
}

h1 {
  text-align: center;
  font-family: sans-serif;
  font-size: 2.5vh;
  }

h2 {
    text-align: center;
    font-family: sans-serif;
    font-size: 4vh;
    }


h3 {
  text-align: right;
}

text1 {
  text-align: justify;
  font-family: sans-serif;
  font-size: 2.5vh; !was24px
}

text1small {
  text-align: justify;
  font-family: sans-serif;
  font-size: 2.5vh; !was20px
}

text1big {
  text-align: justify;
  font-family: sans-serif;
  font-size: 2.5vh; !was30px
}

t2 {
  text-align: center;
  font-family: sans-serif;
  font-size: 24px;
}


#table1 {
  border-collapse: collapse;
  border-spacing: 0px;*/
  padding: 0px;

  }

#table2 {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 100px 10px;
  padding-top: 1px;
  height: 100%;
  vertical-align: middle;
  text-align: justify;
  margin auto auto;
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/

}

#tablediv{
    overflow-y: scroll;
    heigth: 100%
  }
table{ border-collapse: collapse;
border 0px solid white;}
td{
    vertical-align: middle;
    border-collapse: collapse;
    padding: 1px;
    /*border: 1px solid black;*/
}
/*border: 1px solid black*/
/*  td{
    border: 1px solid black;
    height: 30vh;
  }*/


:root{
  --size: 100px;
}

body{background-color: transparent;}