/* customisation added to bamboo.css for Lines in a Landscape */
:root {
  --b-font-main: system-ui, sans-serif;
  --b-font-mono: ui-monospace, "Courier New", monospace;
  --b-border-radius: 5px;
  --b-txt: #17362d;
  --b-bg-1: #f4fafa;
  --b-bg-2: #abd1c6;
  --b-link: #476b61;
  --b-line: #abd1c6;
}

@media(prefers-color-scheme: dark) {
  :root {
    --b-txt: #f4ecef;
    --b-bg-1: #004643;
    --b-bg-2: #abd1c6;
    --b-link: #f9bc60;
    --b-line: #abd1c6;   
  }
}

body {
  max-width: 100%;
}

main,
footer {
  max-width: 80ch;
  margin: 0 auto;
  padding: 0;
}

a, a:hover {
  text-decoration: underline;
}

a:hover {
  background-color: var(--b-bg-2);
}

/* Styling for images and iframes within the main element */
main img,
main iframe {
  margin: 0 auto;
  display: block;
}

main figure {
  background-color: var(--b-bg-2);
  padding: 0.5rem;
}

main figcaption {
  font-size: 90%;
  text-align: center;
}

/* header styling */
body>header {
  text-align: center;
  padding: 0.5rem 0 0 0;
  border-bottom: 3px double var(--b-line);
}

body>header h1 {
  margin: 0;
  font-size: 1.2rem;
  font-style: italic;
}

body>header ul {
  margin: 0 auto 0 auto;
  list-style-type: none;
  padding: 0;
}

body>header li {
  display: inline-block;
  padding: 0.5rem 0.25rem;
}

body>header a, body>header a:hover {
  margin: 0.25em;
  text-decoration-thickness: 3px;
  text-underline-position: under;
}

body>header a.current {
  font-weight: bold;
}

/* footer styling */
footer {
  padding: 1rem 0;
  border-top: 3px double var(--b-line);
}

footer p {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

footer p img {
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-right: 0.5em;
  margin-left: 0.5em;
}

/* increase font size on large screens */
@media (min-width: 800px) {
  body {
    font-size: 1.2rem;
  }

  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }
}

/* styles for specific classes */
/* page date display */
p.date {
  font-style: italic;
  padding: 0;
}

/* card display for posts */
div.card {
  margin-bottom: 5px;
  padding: 0 0.5rem 0 0.5rem;
  border: 1px solid var(--b-line);
  border-radius: var(--b-border-radius);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border: 0;
}

div.card p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

div.card p.date {
  font-size: 1rem;
}

div.card img {
  max-width: 300px;
}