*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  font-family: Georgia, serif;
  background:var(--color-page-bg);
  color:var(--text-main);
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
}

button{
  font:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}

:root{
  --site-max: 1600px;
  --header-h: 72px;
  --menu-w: min(340px, 85vw);

  --color-page-bg: #f3eee7;
  --color-header-bg: #f3eee7;
  --color-card-bg: #ffffff;

  --color-border-strong: rgba(20, 16, 14, 0.72);
  --color-border-accent: rgba(201, 183, 160, 0.72);

  --color-tile-bg: rgba(36, 24, 10, 0.14);
  --color-tile-bg-hover: rgba(36, 24, 10, 0.2);
  --color-tile-border: rgba(36, 24, 10, 0.16);

  --radius-card: 18px;
  --radius-panel: 24px;
  --radius-control: 10px;
  --radius-pill: 999px;

  --bg-dark: #f3eee7;
  --panel: #ffffff;
  --panel-border: var(--color-border-accent);

  --gold: #d4ae58;
  --gold-soft: #f0d490;
  --text-main: #24180a;
  --text-dim: #4a3a2a;

  --shadow-soft: none;
  --shadow-card: none;
  --shadow-hover: none;

  --shadow-button: none;
  --shadow-button-hover: none;
  --shadow-button-focus: none;

  --shadow-tarot-card: drop-shadow(5px 4px 0 rgba(20, 16, 14, 0.38)) drop-shadow(3px 7px 12px rgba(20, 16, 14, 0.08));
  --shadow-tarot-card-box: 5px 4px 0 rgba(20, 16, 14, 0.38), 3px 7px 12px rgba(20, 16, 14, 0.08);

  --color-daily-card-bg: var(--color-tile-bg);
  --color-daily-card-bg-hover: var(--color-page-bg);
  --color-daily-card-border: var(--color-tile-border);
  --shadow-daily-card-hover: var(--shadow-tarot-card-box);

  --color-weekly-card-bg: var(--color-tile-bg);
  --color-weekly-card-bg-hover: var(--color-page-bg);
  --color-weekly-card-border: var(--color-tile-border);
  --shadow-weekly-card-hover: var(--shadow-tarot-card-box);

    .responsivePicture{
    display:contents;
  }
}