/* Elements */

li {font-size: 1.5rem;}

table {
  border: 1px solid;
  border-collapse: collapse;
  background-color: rgb(240, 240, 240);
}
th {border: 1px solid;}
td {border: 1px solid; padding-left: 0.5em; padding-right: 0.5em;}
tr {border: 1px solid;}

/* Data */

.dataBack {
  background-color: rgb(192, 192, 192);
  border: 0.125rem solid rgb(0, 0, 0);
  height: 1rem;
  position: relative;
}

#dataBar {
  background-color: rgb(128, 128, 128);
  height: 1rem;
  width: 100%;
  position: relative;
}

.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(208, 208, 208);
}

.dataCont {
  overflow: auto;
  max-width: 100%;
  max-height: 10rem;
  word-break: break-all;
}

#warn {
  display: none;
  position: absolute;
  
  left: calc(0% - 1rem);
  top: -1rem;
  
  font-size: 2rem;
  transition: rotate 1s;
}

#boom {
  display: none;
  opacity: 0;
  position: absolute;
  
  left: calc(100% - 2rem);
  top: -2rem;
  
  font-size: 4rem;
  transition: rotate 5s, opacity 1s;
}

#how {
  display: none;
  position: absolute;
  
  left: calc(0% - 1rem);
  top: -1rem;
  
  font-size: 2rem;
}

#fourtytwo {
  display: none;
  position: absolute;
  
  left: calc(0% - 1rem);
  top: -1rem;
  
  font-size: 2rem;
}

#bomb {
  display: none;
  position: absolute;
  
  left: calc(100% - 1rem);
  top: -1rem;
  
  font-size: 2rem;
  rotate: 30deg;
}

/* Link Info */

.siteInfo {
  max-height: 0;
  overflow: hidden;
  transition: max-height 2s;
}

.siteInfo:hover {
  max-height: 20rem;
}

.siteLink#root:hover ~ .siteInfo#root {
  max-height: 20rem;
}
.siteLink#raspi:hover ~ .siteInfo#raspi {
  max-height: 20rem;
}

.siteLink#github:hover ~ .siteInfo#github {
  max-height: 20rem;
}

/* Warning */

#warnContainer, .warn, .warn > div {
  position: static;
  display: block;
  transition: none;
  animation: none;
}

.warn button {
  display: none;
}

.warn > div {
  max-width: none !important;
  max-height: none !important;
  width: 100%;
  white-space: normal;
  overflow: hidden;
}