@charset "UTF-8";
/*
$primary-100: $gray-100;
$primary-200: $gray-200;
$primary-300: $gray-300;
$primary-400: $gray-400;
$primary-500: $gray-500;
$primary-600: $gray-600;
$primary-700: $gray-700;
$primary-800: $gray-800;
$primary-900: $gray-900;

$alert-100: $gray-100;
$alert-200: $gray-200;
$alert-300: $gray-300;
$alert-400: $gray-400;
$alert-500: $gray-500;
$alert-600: $gray-600;
$alert-700: $gray-700;
$alert-800: $gray-800;
$alert-900: $gray-900;

$accent-100: $gray-100;
$accent-200: $gray-200;
$accent-300: $gray-300;
$accent-400: $gray-400;
$accent-500: $gray-500;
$accent-600: $gray-600;
$accent-700: $gray-700;
$accent-800: $gray-800;
$accent-900: $gray-900;

$success-100: $gray-100;
$success-200: $gray-200;
$success-300: $gray-300;
$success-400: $gray-400;
$success-500: $gray-500;
$success-600: $gray-600;
$success-700: $gray-700;
$success-800: $gray-800;
$success-900: $gray-900;
*/
/**
 * On the scaling of the headers. I’m a nerd, so here we go.
 *
 * I tried to determine a good scale a priori. It was clear to me that the
 * observed difference between a 48px and 64px font is much smaller than the
 * perceived difference between a 8px and 16px font size.
 *
 * Thus, the perception is *not* linear in the font size.
 *
 * I set the edge points to 200% and 100% (the h6 would get a bold font face)
 * to compensate.
 *
 * The first attempt to get a visually appealing header size scale was thus to
 * generate a logarithmic scale:
 *
 *     numpy.logspace(np.log10(200), 2, 6, base=10)
 *
 * This leads to the following sizes:
 *
 *     $_h-sizes: [200%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 100%];
 *
 * This scale has too large differences between the larger font sizes, and too
 * small differences between the smaller font sizes. Thus, I tried to invert
 * this:
 *
 *     200 - numpy.logspace(2, np.log10(200), 6, base=10) + 100
 *
 * This leads to the following sizes:
 *
 *     $_h-sizes: [200.0%, 185.13016450029647%, 168.0492089227105%, 148.42834334896025%, 125.88988734077518%, 100%];
 *
 * While this was better, it still didn’t look quite right yet. The next
 * attempt was to go about a square function instead of log. The idea behind
 * this is that the font size is essentially one edge of a rectangle, where the
 * second edge depends on the first. A square function should thus generate a
 * nicely appealing sequence:
 *
 * Again, we want the large differences to be on the large scales, too:
 *
 *     xs = numpy.linspace(5, 0, 6); 4*xs*xs + 100
 *
 * This leads to the following sizes:
 *
 *     $_h-sizes: [200.0%, 164.0%, 136.0%, 116.0%, 104.0%, 100.0%];
 *
 * While the first three headings looked nice with that, the others did not.
 * Further research has shown me that others use an exponential scale (instead
 * of a log scale), but with a rather small base (<1.6).
 *
 * Instead of taking one of the well-known factors (like golden ratio or major
 * second), I opted for choosing a factor which gives me a clean 200%-100%
 * range:
 *
 *     numpy.power(math.pow(2, 1/5), numpy.linspace(5, 0, 6)) * 100
 *
 * The result (rounded to 8 digits) is:
 *
 *     $_h-sizes: [200.0%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 100.0%];
 *
 * And... This is the first logspace range. Derp. So why did I discard it in
 * the first place? Now that I look at it, it looks amazing. Brains are weird.
 */
/**
 * And for mobile devices, we want an even less aggressive scale. Let’s try
 * 150%-100%.
 */
div.powered-by {
  text-align: right;
  line-height: 1.5; }
  div.powered-by > img {
    height: 1.5em;
    vertical-align: -0.2em;
    margin-left: 0.2em; }

div.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1024;
  width: 100%;
  height: 100%; }
  div.modal > div {
    padding: 1.5rem;
    margin-left: auto;
    max-width: 40rem;
    margin-right: auto; }
    div.modal > div > header {
      display: flex;
      flex-direction: row; }
      div.modal > div > header > span {
        display: inline-block;
        flex: 1 1 auto; }
      div.modal > div > header > a.button {
        flex: 0 0 auto; }

div.install-buttons {
  display: flex;
  flex-direction: column;
  align-items: center; }
  div.install-buttons ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    margin: 1.5rem 0;
    padding: 0; }
  div.install-buttons li {
    margin: 0;
    padding: 0; }

img.apple {
  height: 2rem;
  margin: 0.5rem; }

img.play {
  height: 3rem; }

img.fdroid {
  height: 3rem; }

.qr {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: row;
  justify-content: center; }
  .qr > img {
    padding: 1rem;
    background: white; }

.float-right {
  float: right; }

#tutorial-scan {
  width: 6rem;
  margin: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

div.form.layout-expanded .lwrap {
  display: flex;
  flex-direction: row; }
  div.form.layout-expanded .lwrap input.localpart-magic {
    display: inline-block;
    width: auto;
    flex: 1 0 auto; }
  div.form.layout-expanded .lwrap span {
    display: inline-block;
    flex: 0 0 auto;
    background: #f6f5f4;
    border: none;
    border-bottom: 0.125rem solid #4182c7;
    margin-bottom: -0.125rem;
    padding: 0 0.25rem; }

.fullwidth {
  width: 100%; }

#invite {
  background: url("../img/invite-bg.jpg");
  background-attachment: fixed;
  background-size: cover; }

/* dark mode */
@media (prefers-color-scheme: dark) {
  div.form.layout-expanded .lwrap span {
    background: #3d3833; } }