:root {
  /* =========================
           FONT SIZES
        ========================= */
  /* 1rem = 16px */
  --font-size-page-title: 24px;
  --font-size-card-label: 16px;
  --font-size-card-icon: 3.5rem;

  /* =========================
           SPACING
        ========================= */
  --space-page-gap: 4rem;
  --space-title-gap: 1rem;
  --space-card-gap: 0.75rem;
  --space-grid-row-gap: 2rem;
  --space-grid-column-gap: 1rem;

  /* =========================
           SIZES
        ========================= */
  --size-logo: 5.5rem;
  --size-card: 5rem;

  /* =========================
           COLORS
        ========================= */
  --color-surface: white;
  --color-text: #111111;

  /* =========================
  RADIUS / BORDER / SHADOW
  ========================= */
  --radius-card: 0.75rem;
  --border-card: 1px solid rgb(237, 237, 237);
  --shadow-card: 0px 0px 16px 1px rgba(108, 108, 108, 0.11);
  --max-content-width: 1000px;
  --min-grid-item-width: 130px;

  /* =========================
           MOTION
        ========================= */
  --card-hover-scale: 1.1;
  --transition-fast: 0.125s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Stack Sans Text", sans-serif;
}

body {
  color: var(--color-text);
}

.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-shell {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-page-gap);
}

.app-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-title-gap);
}

.app-logo {
  width: var(--size-logo);
  border-radius: 9999px;
}

.app-title {
  font-size: var(--font-size-page-title);
  font-weight: 500;
  text-align: center;
}

.app-grid {
  display: grid;
  width: min(100%, var(--max-content-width));
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--min-grid-item-width), 1fr)
  );
  column-gap: var(--space-grid-column-gap);
  row-gap: var(--space-grid-row-gap);
}

.app-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-card-gap);
}

.app-link-card__button {
  width: var(--size-card);
  height: var(--size-card);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast);
}

.app-link-card__button:hover {
  transform: scale(var(--card-hover-scale));
}

.app-link-card__icon {
  font-size: var(--font-size-card-icon);
}

.app-link-card__label {
  font-size: var(--font-size-card-label);
  text-align: center;
}