.periodic-table-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 10px; // hide any extra borders, etc. at the bottom
  height: 100vh;
  overflow: hidden;
  // opacity: 0.4;
}
.periodic-table {
  display: grid;
  // grid-template-columns: repeat(16, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0;
  border-top: 1px solid $white;

  z-index: 1;
  // &::before {
  //   content: '';
  //   width: 0;
  //   padding-bottom: 100%;
  //   grid-row: 1 / 1;
  //   grid-column: 1 / 1;
  // }
  // &> *:first-child {
  //   grid-row: 1 / 1;
  //   grid-column: 1 / 1;
  // }
}

.periodic-element {
  display: block;
  opacity: 0.4;
  // border: 1px solid $white;
  // border-bottom: 2px solid $white;
  // border-right: 2px solid $white;
  // border: 1px solid $white;
  border: 2px solid $white;
  transform: scale(1.03);
  // @include flex-center;
  // position: relative;
  // height: 0;
  // padding-bottom: 100%;
  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  transition: 3000ms linear all;
  &:hover{
    opacity: 1;
    background: rgba(255,255,255,0.15);
    // z-index: 3;
    transition: 300ms ease-out all;
    box-shadow: 0px 0px 12px 0px rgba(255,255,255,0.2);
  }
}

.periodic-element-stars {
  // position: absolute;
  // top: 5px;
  // left: 5px;
  // font-size: $small-font;
}

.periodic-element-content {
  // position: absolute;
  // top: 0;
  // left: 0;
  // bottom: 0;
  // right: 0;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // flex-direction: column;
}

.periodic-element-symbol {
  @include font-bold;
  // font-size: 1.5vw;
}

.periodic-element-name {
  // font-size: $smaller-font;
  position: absolute;
  width: 100%;
  bottom: 15px;
  text-align: center;
}

.periodic-gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(29, 31, 31, 0) 0%, rgb(33, 36, 36) 80%);
  pointer-events: none;
}
