/*
 * Reel News - Global Application Styling
 *
 * Developed/modified by: Reel News team
 * Description: Defines global typography, colors, page layout,
 * and the newspaper-themed application background.
 *
 * Team-developed or customized functionality:
 * - Newspaper-themed page background and dark overlay.
 * - Page sizing and overflow behavior for the news feed.
 * - Global typography and responsive styling adjustments.
 *
 * External code/references:
 * - None. All styling is team-developed or customized.
 *
 * External assets:
 * - OldTimerNewspaper.jpg: Background image used by the application.
 */

:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;

  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
  }
}

* {
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  overflow: hidden;

  background-color: #e8dcc0;
  background-image:
    linear-gradient(rgba(36, 34, 27, 0.786), rgba(49, 48, 47, 0.752)),
    url("../images/OldTimerNewspaper.b4a87ab4b6f3.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

h1 {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--text-h);
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;

  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}

p {
  margin: 0;
}