* {
  font-family: "Lucida Console", Monaco, monospace;
}
body {
  transition-duration: 0.2s;
}
body.dark {
  background-color: black;
  color: white;
}
button {
  background-color: white;
  color: black;
  border: 2px solid black;
  border-radius: 15px;
  vertical-align: middle;
  transition-duration: 0.2s;
  margin: 2px;
}
button.dark {
  background-color: black;
  color: white;
  border: 2px solid white;
}
button:not(.noHover):hover {
  background-color: black;
  color: white;
}
button.dark:not(.noHover):hover {
  background-color: white;
  color: black;
}
button.enabled {
  border: 2px solid #00BB00;
}
button.dark.enabled {
  border: 2px solid #00EE00;
}
button.enabled:not(.noHover):hover {
  background-color: #00BB00;
  color: white;
}
button.dark.enabled:not(.noHover):hover {
  background-color: #00EE00;
  color: black;
}
button.disabled {
  background-color: #AAAAAA;
  border: 2px solid #AA0000;
}
button.dark.disabled {
  background-color: #444444;
  border: 2px solid #DD0000;
}
button.disabled:not(.noHover):hover {
  background-color: #AA0000;
  color: #AAAAAA;
}
button.dark.disabled:not(.noHover):hover {
  background-color: #DD0000;
  color: #444444;
}
button.warning {
  color: red;
  border: 2px solid red;
}
button.warning:not(.noHover):hover {
  background-color: red;
  color: white;
}
button.dark.warning:not(.noHover):hover {
  background-color: red;
  color: black;
}
button.big {
  width: 200px;
  height: 50px;
  font-size: 15px;
}
button.veryBig {
  width: 250px;
  height: 75px;
  font-size: 20px;
}
button.achievement {
  width: 75%;
  height: 100px;
  font-size: 20px;
}
button.plexal {
  color: purple;
  border: 2px solid purple;
}
button.dark.plexal {
  color: magenta;
  border: 2px solid magenta;
}
button.plexal:not(.noHover):hover {
  background-color: purple;
  color: white;
}
button.dark.plexal:not(.noHover):hover {
  background-color: magenta;
  color: black;
}
.notification {
  position: fixed;
  width: 70%;
  height: 20%;
  bottom: 0;
  animation-name: notification;
  animation-duration: 4s;
  animation-timing-function: linear;
}
button.notification:not(.noHover):hover {
  background-color: white;
  color: black;
}
button.dark.notification:not(.noHover):hover {
  background-color: black;
  color: white;
}
@keyframes notification {
  0% {left: 100vw; opacity: 0;}
  20% {left: 20vw; opacity: 1;}
  80% {left: 10vw; opacity: 1;}
  100% {left: -100vw; opacity: 0;}
}
#grayout {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}
.modal {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 2px solid black;
}
.modal.dark {
  background-color: black;
  border: 2px solid white;
}
.hidden {
  display: none;
}