@font-face {
  font-family: "Jedira";
  src: url("assets/fonts/jedira-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jedira";
  src: url("assets/fonts/jedira-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-pink:  #ffe6e6;
  --color-red:   #990000;
  --color-cream: #fffddc;
  --color-black: #000000;

  --font-script:  "dunhill-script", "Allura", cursive;
  --font-display: "Electrolize", sans-serif;
  --font-sans:    "Chivo", sans-serif;
  --font-body:    "Fauna One", serif;
  --font-quote:   "Jedira", "Cormorant Garamond", serif;
  --font-sig:     "Kapakana", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: #ffffff; }

body {
  display: flex;
  justify-content: center;
  min-width: 1440px;
}

.page {
  position: relative;
  width: 1440px;
  height: 1980px;
  background: #ffffff;
  overflow: hidden;
}

.section {
  position: absolute;
  left: 0;
  width: 1440px;
  height: 660px;
}
.section--alice     { top: 0;     background: var(--color-pink); }
.section--amendment { top: 664px; background: var(--color-red); }
.section--rubin     { top: 1320px; background: var(--color-pink); }


.alice-title {
  position: absolute;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 120px;
  line-height: normal;
  color: var(--color-red);
  white-space: nowrap;
}
.alice-title--top    { left: 49px;  top: 5px; }
.alice-title--bottom { left: 678px; top: 488px; }

.alice-body {
  position: absolute;
  left: 97px;
  top: 184px;
  width: 1246px;
  height: 301px;
  font-family: var(--font-body);
  font-size: 28px;
  line-height: normal;
  color: var(--color-black);
}
.alice-body p { white-space: pre-wrap; margin: 0; }
.alice-body__accent {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 32px;
}


.amendment-label {
  position: absolute;
  left: 0;
  top: 16px;
  width: 404px;
  height: 627px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amendment-label__rotate {
  transform: rotate(-90deg);
  flex: none;
}
.amendment-label__rotate p {
  font-family: var(--font-display);
  font-size: 170px;
  line-height: normal;
  color: var(--color-cream);
  white-space: nowrap;
}

.amendment-number {
  position: absolute;
  left: 362px;
  top: 260px;
  font-family: var(--font-display);
  font-size: 400px;
  line-height: normal;
  color: var(--color-cream);
  white-space: nowrap;
}

.amendment-text {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 40px;
  line-height: normal;
  color: var(--color-pink);
}
.amendment-text--one {
  left: 441px;
  top: 174px;
  width: 961px;
  height: 140px;
}
.amendment-text--two {
  left: 780.01px;
  top: 346px;
  width: 572.612px;
  height: 140px;
}


.pill {
  position: absolute;
  width: 198px;
  height: 88px;
  border-radius: 44px;
}
.pill--solid   { background: var(--color-pink); }
.pill--outline { border: 11px solid var(--color-pink); }

.pill--top-1 { left: 214px;  top: 31px; }
.pill--top-2 { left: 412px;  top: 31px; }
.pill--top-3 { left: 610px;  top: 31px; }
.pill--top-4 { left: 808px;  top: 31px; }
.pill--top-5 { left: 1006px; top: 35px; }
.pill--top-6 { left: 1204px; top: 31px; }

.pill--bot-1 { left: 798px;  top: 533px; width: 201px; }
.pill--bot-2 { left: 999px;  top: 537px; width: 202px; }
.pill--bot-3 { left: 1201px; top: 533px; width: 201px; }


.rubin-card {
  position: absolute;
  left: 38px;
  top: 57px;
  width: 1364px;
  height: 546px;
  background: var(--color-cream);
  border-radius: 64px;
}
.rubin-quote {
  position: absolute;
  left: 77px;
  top: 41px;
  width: 1285px;
  font-family: var(--font-quote);
  font-size: 85px;
  line-height: normal;
  color: var(--color-red);
}
.rubin-attribution {
  position: absolute;
  left: 914px;
  top: 491px;
  font-family: var(--font-sig);
  font-weight: 400;
  font-size: 128px;
  line-height: normal;
  color: var(--color-red);
  white-space: nowrap;
}


.section--amendment > * { position: absolute; }
.section--rubin > *     { position: absolute; }