/*******************************************************************************
 ******************************************************************************/

:root {
  --footer-height: 70px;
}

/* canvas {
  position: absolute;
  top:  0px;
  left: 0px;
} */

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  max-width: 100%;
  font-size: 22px; /* bump up from latex.css's default (but not using now) */
}

/* Put the version in itty-bitty gray font in the bottom corner of the page */
.versiontag {
  color: gray;
  font-size: 9px;
  position: fixed;
  bottom: 0;
  right: 0;
}

#bigbut { /* Big button */
  /* Next 3 lines make it so clicking the text on the button never 
     selects/highlights the text. Without this you see ugly flickering when you
     click the button multiple times in rapid succession. */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  font-size: min(50em, 40vw);
  color: blue;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: calc(100vh - var(--footer-height));
  overflow: hidden;
  background-color: black;
}

#infobut { float: right; }

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 800px;
  height: var(--footer-height);
  background-color: #f9f9f9;
  text-align: center;
  padding: 0px;
}

/* A so-called Bottom Modal from W3Schools; kinda broken on mobile */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}
.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}
.close { /* the X in the upper right aka close button */
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-header {
  padding: 2px 16px;
  background-color: #ffc107;
  color: black;
}
.modal-body { padding: 2px 16px; }
.modal-footer {
  padding: 2px 16px;
  background-color: #ffc107;
  color: black;
}

/* Modal Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}
@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}