:root {
    --safe-color1: #332288;
    --safe-color2: #117733;
    --safe-color3: #882255;
    --safe-color4: #DDCC77;
    --safe-color5: #88CCEE;

    --gray-10: #d8d8d8;
    --gray-20: #ccc;
    --gray-30: #a8a8a8;
    --gray-40: #999;
    --gray-50: #787878;
    --gray-60: #666;
    --gray-70: #484848;
    --gray-80: #333;
    --gray-85: #222;
    --gray-90: #181818;

    --failure-color: #852200;
    --success-color: #227A00;

    background-color: var(--gray-90);
    color: var(--gray-10);

    font-family: karlaregular, Arial, sans-serif;
    font-size: 20px;

    margin: 0;
    padding: 0;
}
button {
    background-color: var(--gray-70);
    border: none;
    border-radius: 8px;
    color: white;
    padding: 15px 32px;
    margin: 4px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
button:hover {
  background-color: var(--gray-60);
}
button.secondary {
    color: var(--gray-30);
    box-sizing: border-box;
    background-color: var(--gray-90);
    border-style: solid;
    border-color: var(--gray-30);;
    border-width: 2px;
}
button.secondary:hover {
    background-color: var(--gray-80);
    border-color: var(--gray-20);
    color: var(--gray-20);
}
button[disabled],
button.disabled {
    color: var(--gray-70);
    background-color: var(--gray-80);
}
button.secondary.disabled,
button.secondary[disabled] {
    color: var(--gray-80);
    background-color: var(--gray-90);
    border: none;
}
.separator {
    text-align: center;
    padding: 16px 16px;
    color: var(--gray-40);
}
.separator::after,
.separator::before {
    content: '';
    display: inline-block;
    width: 100px;
    height: 1px;
    background-color: var(--gray-80);
    vertical-align: middle;
    margin: 0 10px;
}
@keyframes spinner {
  to {transform:  translate(-50%, -50%) rotate(360deg);}
}
.loading {
    position: relative;
}
.loading:after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  display: block;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 2px solid var(--gray-60);
  border-top-color: var(--gray-20);
  animation: spinner .6s linear infinite;
  transform: translate(-50%, -50%) rotate(0);
}