/* Elements */

li {font-size: 1.125rem;}

/* Tables */

.tbl, .tbl td, .tbl th {
  border: 1px solid rgb(0, 0, 0);
}

.tbl {
  border-collapse: collapse;
  min-width: 30rem;
}

.tblCont {
  overflow-x: scroll;
  width: 100%;
}

/* Game */

.window {
  position: absolute;
  
  background-color: rgb(128, 128, 128);
  
  width: 100vw;
  height: 50vw;
  top: 3rem;
  left: 0;
  
  overflow: hidden;
}

#toolbar {
  background-color: rgb(224, 224, 224);
  
  display: flex;
  flex-direction: row;
  
  position: fixed;
  left: 0;
  top: 0;
  
  height: 3rem;
  width: 100vw;
  
  overflow-x: auto;
  overflow-y: hidden;
  
  z-index: 2;
}

#toolbar > a {
  cursor: alias;
}

#home.bttn > img {
  position: relative;
  height: 2rem;
  width: 2rem;
  top: 0.5rem;
  left: 0.5rem;
}

.menu {
  display: none;
  position: absolute;
  background-color: rgb(224, 224, 224);
  box-shadow: 0.25rem 0.25rem 0.5rem;
  
  width: 32rem;
  height: 24rem;
  left: calc(50% - 16rem);
  top: calc(50% - 12rem);
  
  padding: 1rem;
  
  overflow-y: scroll;
  z-index: 1;
}

.menuTtl {
  top: 0;
  left: 0;
  height: 2.5rem;
  
  max-width: calc(100% - 3rem);
  
  margin: 0;
  
  text-align: left;
}

.menuX {
  position: absolute;
  
  right: 0;
  top: 0;
}

.bttn {
  background-color: rgba(0,0,0,0);
  
  height: 3rem;
  width: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  max-width: 3rem;
  min-height: 3rem;
  
  border: 0;
  padding: 0;
  
  cursor: pointer;
}

.bttn:hover {
  background-color: rgb(192, 192 , 192);
}

.bttn > img {
  height: 3rem;
  width: 3rem;
}

canvas#map {
  position: absolute;
  background-color: rgb(144, 144, 144);
  
  width: 48vw;
  height: 36vw;
  left: 5vw; /* (areaWidth / 2) - (width / 2); areaWidth = 60 */
  top: 7vw; /* (areaHeight / 2) - (height / 2); areaHeight = 50 */
  
  border: 4px solid;
  border-right-color: rgb(160, 160, 160);
  border-bottom-color: rgb(160, 160, 160);
  border-left-color: rgb(96, 96, 96);
  border-top-color: rgb(96, 96, 96);
}

canvas#info {
  position: absolute;
  background-color: rgb(144, 144, 144);
  
  width: 24vw;
  height: 32vw;
  left: 68vw; /* (areaWidth / 2) - (width / 2) + 60; areaWidth = 40 */
  top: 9vw; /* (areaHeight / 2) - (height / 2); areaHeight = 50 */
  
  border: 4px solid;
  border-right-color: rgb(160, 160, 160);
  border-bottom-color: rgb(160, 160, 160);
  border-left-color: rgb(96, 96, 96);
  border-top-color: rgb(96, 96, 96);
}

/* Periodic Table */

.selTbl td {
  position: relative;
  border: 1px solid rgb(0, 0, 0);
  
  text-align: center;
  line-height: 3rem;
  font-size: 1.25rem;
  
  min-width: 3rem;
  min-height: 3rem;
  width: 3rem;
  height: 3rem;
}

.selTbl #a, .selTbl #l {
  font-size: 1rem;
  line-height: 1.25rem;
}

.selTbl .b {
  border: 0;
}

.selTbl .elem {
  cursor: pointer;
}

.selTbl .elem:hover {
  background-color: rgba(128, 128, 128, 0.25);
}

.selTbl .elem > .zNote {
  position: absolute;
  top: 0;
  right: 0;
  
  font-size: 0.8rem;
  line-height: 0.8rem;
}

.selTbl .elem > .wNote {
  position: absolute;
  bottom: 0;
  right: 0;
  
  font-size: 0.8rem;
  line-height: 0.8rem;
}

/* Decay Chain */

.DCCont {
  aspect-ratio: 2 / 1;
  width: 100%;
  overflow: scroll;
  
  background-color: rgba(128, 128, 128, 0.5);
}

.DCTbl {
  text-align: center;
  background-color: rgb(240, 240, 240);
  table-layout: fixed;
}

.DCIso {
  border: 4px solid rgba(240, 240, 240, 0);
  min-width: 3rem;
  min-height: 3rem;
  width: 3rem;
  height: 3rem;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  padding: 0;
}

.info td {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Other */

.dataBttn {
  background-color: rgb(240, 240, 240);
  width: 3rem;
  height: 3rem;
  
  line-height: 3rem;
  text-align: center;
  font-size: 1.5rem;
  
  border-radius: 0.5rem;
  border-width: 0;
  
  cursor: pointer;
}

.dataBttn:active {
  background-color: rgb(224, 224, 224);
}

/* Media */

@media (max-width: 800px) {
  .menu {
    width: 16rem;
    height: 12rem;
    left: calc(50% - 8rem);
    top: calc(50% - 6rem);
  }
}