:root {
  --pacific-blue: #0eb1d2;
  --sonic-silver: #757780;
  --sunglow: #ffd046;
  --bdazzled-blue: #3D5A80;
  --ghost-white: #FFFAFF;
  --rich-black: #051014;
}

html, body {
  color: var(--ghost-white);
  background: var(--rich-black);

  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

/* Login Button */

.btn-lightning {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 16rem;

  font-weight: bold;
  font-size: 0.9em;

  color: var(--rich-black);
  border-color: var(--sunglow);
  background-color: var(--sunglow);
}

.btn-lightning:not(.no-animation) {
  transition: transform .2s;
}

.btn-lightning:hover {
  color: var(--rich-black);
  border-color: var(--sunglow);
  background-color: var(--sunglow);
}

.btn-lightning:hover:not(.no-animation){
  transform: scale(1.05);
}

.btn-lightning:hover:not(.no-animation) svg {
  -webkit-animation: flash .7s ease-in forwards;
  -moz-animation: flash .7s ease-in forwards;
  -o-animation: flash .7s ease-in forwards;
  animation: flash .7s ease-in forwards;
}

@-webkit-keyframes flash {
  50% {
    color: var(--ghost-white);
  }
}
@-moz-keyframes flash {
  50% {
    color: var(--ghost-white);
  }
}
@-o-keyframes flash {
  50% {
    color: var(--ghost-white);
  }
}

@keyframes flash {
  50% {
    color: var(--ghost-white);
  }
}

.btn-lightning:active,
.btn-lightning:link,
.btn-lightning:visited {
  color: var(--rich-black);
  border-color: var(--sunglow);
  background-color: var(--sunglow);
}

.btn-secondary {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 16rem;

  font-weight: bold;
  font-size: 0.9em;

  color: var(--rich-black);
  border-color: var(--bdazzled-blue);
  background-color: var(--bdazzled-blue);
}

.btn-secondary:active,
.btn-secondary:link,
.btn-secondary:visited {
  color: var(--rich-black);
  border-color: var(--bdazzled-blue);
  background-color: var(--bdazzled-blue);
}

/* Login Page */

.qr-instructions {
  color:  var(--sonic-silver);
}

/* Authenticated Page */

.authenticated-userid {
  color: var(--pacific-blue);
  word-break: break-all;
  text-align: center;
}

.authenticated-robot {
  width: 6rem;
}

/* Links */

a:link,
a:visited,
a:hover,
a:active {
  color: var(--sunglow);
}

/* Footer */

.footer {
  font-size: 0.8rem;
  color:  var(--sonic-silver);
}

.footer .social-icon {
  width: 1.25rem;
}