body {
  font-family: Bree Serif;
}
.light {
  transition: 0.5s;
  background-color: white;
  color: black;
}
.dark .grid-container {
  color: black;
}
.dark {
  transition: 0.5s;
  background-color: black;
  color: white;
}
.dark .grid-container .grid-item:hover {
  border: 2px solid white;
}
.main-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  height: fit-content;
  width: fit-content;
  padding: 10px;

}

.grid-container {
  font-family: Bree Serif;
  font-size: 20px;
  display: grid;
  grid-template-columns: repeat(18, 70px);
  grid-template-rows: repeat(9, 70px);
  gap: 0.4em;
}
@media (max-width: 1000px) {
    .main-container{
        display: none;
    }
  .grid-container {
    font-family: Bree Serif;
    font-size: 10px;
    display: grid;
    grid-template-columns: repeat(18, 4vw);
    grid-template-rows: repeat(9, 4vw);
    gap: 0.2em;
  }
}
.grid-container > .grid-item {
  transition: 0.5s;
  border: 2px solid transparent;
  text-align: center;
  padding-top: 20px;
}
@media (max-width: 1000px) {
  .grid-container > .grid-item {
    transition: 0.5s;
    border: 2px solid transparent;
    text-align: center;
    padding-top: 10px;
  }
}
.item2 {
  grid-column-start: -2;
}
.item5,
.item13 {
  grid-column-start: -7;
}
.item72,
.item104 {
  grid-column-start: 4;
}
.item57,
.item89 {
  grid-column-start: 4;
}
.item1,
.item6,
.item7,
.item8,
.item9,
.item15,
.item16,
.item17,
.item34,
.item35,
.item53,
.item85,
.item117 {
  background-color: rgb(255, 242, 124);
}
.item3,
.item11,
.item19,
.item37,
.item55,
.item87 {
  background-color: rgb(255, 167, 140);
}
.item4,
.item4,
.item12,
.item20,
.item38,
.item56,
.item88 {
  background-color: rgb(152, 222, 231);
}
.item2,
.item10,
.item18,
.item36,
.item54,
.item86,
.item118 {
  background-color: rgb(255, 204, 129);
}
.item21,
.item22,
.item23,
.item24,
.item25,
.item26,
.item27,
.item28,
.item29,
.item30,
.item39,
.item40,
.item41,
.item42,
.item43,
.item44,
.item45,
.item46,
.item47,
.item48,
.item72,
.item73,
.item74,
.item75,
.item76,
.item77,
.item78,
.item79,
.item80,
.item104,
.item105,
.item106,
.item107,
.item108,
.item109,
.item110,
.item111,
.item112 {
  background-color: rgb(98, 213, 233);
}
.item13,
.item31,
.item49,
.item50,
.item81,
.item82,
.item83,
.item113,
.item114,
.item115,
.item116 {
  background: rgb(145, 255, 102);
}
.item5,
.item14,
.item32,
.item33,
.item51,
.item52,
.item84 {
  background-color: rgb(189, 247, 171);
}
.item57,
.item58,
.item59,
.item60,
.item61,
.item62,
.item63,
.item64,
.item65,
.item66,
.item67,
.item68,
.item69,
.item70,
.item71 {
  background: rgb(160, 201, 255);
}
.item89,
.item90,
.item91,
.item92,
.item93,
.item94,
.item95,
.item96,
.item97,
.item98,
.item99,
.item100,
.item101,
.item102,
.item103 {
  background: rgb(160, 255, 219);
}
.grid-item:hover {
  background-color: black;
  border: 2px solid black;
  color: white;
}
.info {
  width: 700px;
  height: 180px;
  left: 230px;
  position: absolute;
  text-align: center;
  padding-top: 20px;
}
.info #name {
  font-size: 40px;
}
.info #atomicNum {
  font-size: 30px;
}
.info #atomicWeight {
  font-size: 30px;
  margin-bottom: 0px;
}
#modeButton {
  float: right;
}