:root {
  --lch-black: 0 0 0;
  --lch-blue: 0.3974 0.275368 264.052;
  --lch-blue-light: 0.8048 0.069 221.42;
  --lch-brown: 0.7233 0.1035 60.68;
  --lch-brown-light: 0.7125 0.1286 55.3;
  --lch-grey: 0.9491 0 0;
  --lch-orange: 0.6953 0.1301 56.76;
  --lch-pink: 0.9019 0.0565 349.77;
  --lch-red: 0.7739 0.1413 44.7;
  --lch-turqoise: 0.8906 0.0755 152.33;
  --lch-yellow: 0.9317 0.12 96.91;

  --color-black: oklch(var(--lch-black));
  --color-blue: oklch(var(--lch-blue));
  --color-blue-light: oklch(var(--lch-blue-light));
  --color-brown: oklch(var(--lch-brown));
  --color-brown-light: oklch(var(--lch-brown-light));
  --color-grey: oklch(var(--lch-grey));
  --color-orange: oklch(var(--lch-orange));
  --color-pink: oklch(var(--lch-pink));
  --color-red: oklch(var(--lch-red));
  --color-turqoise: oklch(var(--lch-turqoise));
  --color-yellow: oklch(var(--lch-yellow));
  --color-bg: var(--color-yellow);
}

html {
  font-size: 100%;
}

body {
  color: var(--color-black);

  font-size: 16px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

  background: var(--color-bg);

  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

header,
main {
  width: 90vw;
  max-width: 320px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  text-align: center;
  margin: 4rem 0;
}

header h4 {
  color: var(--color-blue);
  font-weight: 500;
}

a {
  color: var(--color-blue);
}

.poem-wrapper {
  background: var(--color-grey);
  border: 1px solid black;
  padding: .8rem;
  margin-bottom: 2rem;
  width: 90%;
}

.poem {
  font-style: italic;
  line-height: 2rem;
  margin-top: 0;
}

.data {
  display: flex;
  justify-content: space-between;
}

footer {
  font-size: 15px;
  margin: 3rem 0 1rem;
}