html, body {
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  margin: 0;
  overflow: auto;
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
  font-size: 40pt;
  color: #FFFFFF;
}

* {
  box-sizing: border-box;
}

.blackBackground {
  background-color: #000000;
}

#container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

#messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  --message-padding: 5px 15px;
  --text-buffer: 10px;
  --spinner-size: 22px;
}

.alignLeft {
  align-items: flex-start !important;
}

.message {
  background-color: #000000;
  padding: var(--message-padding);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.messageAuthor {
  flex-shrink: 0;
  margin-left: var(--text-buffer);
  font-style: italic;
}

.messageText {
  margin-left: var(--text-buffer);
  font-weight: bold;
  line-height: 1.1em;
}

.messageTime {
  flex-shrink: 0;
  font-size: 10pt !important;
  margin-right: var(--text-buffer);
  color: #AAAAAA;
}

.customEmoji {
  height: 1em;
  vertical-align: text-top;
}

/*
Overload occurs when more than a certain number of messages appear - we want to reduce the font size and
padding for each message to make more space.
*/
.messageOverloadLow {
  font-size: 34pt;
  --message-padding: 3px 12px !important;
  --spinner-size: 18px !important;
  --text-buffer: 8px !important;
}

.messageOverloadHigh {
  font-size: 26pt;
  --message-padding: 2px 8px !important;
  --spinner-size: 14px !important;
  --text-buffer: 5px !important;
}

/*
Styling for a basic progress spinner beside each message.
Note that animation duration should match MESSAGE_SHOW_MS in main.js.
*/

.spinnerContainer {
  display: inline-block;
  flex: 0 0 var(--spinner-size);
  width: var(--spinner-size);
  height: var(--spinner-size);
  position: relative;
  background: #000000;
  --spinner-radius: calc(var(--spinner-size)/2);
}

.spinnerContainer > .pie {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #FFFFFF;
  border: 1px solid #000000;
}

.spinnerContainer > .spinner {
  border-radius: 0 var(--spinner-radius) var(--spinner-radius) 0;
  border-left: 0;
  margin-left: 50%;
  z-index: 200;
  transform-origin: left;
  animation: rota 20s linear;
}

.spinnerContainer > .filler {
  border-radius: var(--spinner-radius) 0 0 var(--spinner-radius);
  border-right: 0;
  z-index: 100;
  animation: fill 20s steps(1, end);
  left: 0;
  opacity: 0;
}

.spinnerContainer > .mask {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: 300;
  opacity: 0;
  background: inherit;
  animation: mask 20s steps(1, end);
}

@keyframes rota {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fill {
  0%        { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes mask {
  0%        { opacity: 0; }
  50%, 100% { opacity: 1; }
}

.animatedEmoji {
  padding: 0;
  margin: 0;
  position: fixed;
  z-index: -1;
  font-size: 30px;
}