@import "./fonts.css";

:root {
  --bg-color-main: #f3f3f3;
  --text-color-primary: #1a1a1a;
  --text-color-secondary: #2a2a2a;
  --border-color: #d3d3d3;

  --body-font: "Cormorant Garamond";
  --display-font: "FleurDeLeah";

  --font-md: 1.25rem;
  --font-lg: 1.5rem;

  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;

  --content-max-width: 70ch;
}

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

body {
  background-color: var(--bg-color-main);
  color: var(--text-color-primary);
  font-family: var(--body-font), Georgia, serif;
  font-size: var(--font-md);
  line-height: 1.6;
}

figure {
  position: relative;
  --corner-edge: -1.5rem;
  --corner-w: 180px;
  --corner-h: 240px;
  --corner-inset: var(--corner-edge) auto auto var(--corner-edge);
  --corner-scale: 1 1;
}

.border::before {
  content: "";
  position: absolute;
  inset: var(--corner-inset);
  width: var(--corner-w);
  height: var(--corner-h);
  scale: var(--corner-scale);
  background: url("/assets/border300.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

@container page (min-width: 720px) {
  figure {
    --corner-edge: -2rem;
    --corner-w: 300px;
    --corner-h: 400px;
  }

  figure::before {
    background-image: url("/assets/border600.png");
  }
}

main {
  container-type: inline-size;
  container-name: page;
}

article {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-sm);
}

article > p {
  margin-block: var(--spacing-sm);
}

.greeting {
  font-family: var(--display-font), cursive;
  font-size: clamp(2.5rem, 2rem + 3vw, 3.5rem);
  line-height: 1.1;
}

article > footer {
  margin-top: var(--spacing-lg);
  text-align: right;
  font-style: italic;
}

figure {
  margin-block: var(--spacing-lg);
}

figure img {
  width: 100%;
  height: auto;
  display: block;
}

blockquote {
  margin: var(--spacing-lg) 0;
  padding-left: var(--spacing-md);
  border-left: 2px solid var(--border-color);
  font-style: italic;
  color: var(--text-color-secondary);
}

blockquote p {
  margin: 0;
}

@container page (min-width: 720px) {
  article {
    padding: var(--spacing-lg) var(--spacing-md);
    font-size: var(--font-lg);
  }
}

@container page (min-width: 1100px) {
  article {
    max-width: 80ch;
  }
}