/* Landing (/): app icon, name, one action. */

html body {
  background: var(--ds-bg);
  animation: none;
  opacity: 1;
  padding: 24px 16px;
}

/* The logo becomes the app icon above the name (it still reloads on tap) */
.refresh-image {
  position: static;
  width: 112px;
  height: 112px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 0 0 0.5px var(--ds-separator), 0 8px 24px rgba(94, 28, 168, 0.12);
}
.refresh-image:hover { transform: none; }

#mainContent { padding-top: 20px; max-width: 420px; }
#mainContent h1 {
  color: var(--ds-label) !important;
  text-shadow: none !important;
  font: 700 34px/1.2 var(--ds-font-display) !important;
  letter-spacing: -0.01em;
}
.button-container { margin-top: 32px !important; }
.big-button {
  min-height: 50px;
  padding: 14px 20px;
  border-radius: var(--ds-radius);
  background: var(--ds-accent-fill);
  color: var(--ds-on-accent);
  font-size: 17px;
  font-weight: 600;
  box-shadow: none;
}
.big-button:hover { background: var(--ds-accent-fill); transform: none; filter: brightness(1.08); }
.big-button:active { filter: brightness(0.92); }

#mainContent > p {
  margin-top: 32px !important;
  color: var(--ds-secondary) !important;
  text-shadow: none !important;
  font-size: 13px;
  font-weight: 400;
}