/* TODO: add defaults.css to project */


:root {
  /* Rosé Pine Dawn */
  --rp-base: hsl(32deg, 57%, 95%);
  --rp-surface: hsl(35deg, 100%, 98%);
  --rp-overlay: hsl(33deg, 43%, 91%);
  --rp-muted: hsl(257deg, 9%, 61%);
  --rp-subtle: hsl(248deg, 12%, 52%);
  --rp-text: hsl(248deg, 19%, 40%);
  --rp-love: hsl(343deg, 35%, 55%);
  --rp-gold: hsl(35deg, 81%, 56%);
  --rp-rose: hsl(3deg, 53%, 67%);
  --rp-pine: hsl(197deg, 53%, 34%);
  --rp-foam: hsl(189deg, 30%, 48%);
  --rp-iris: hsl(268deg, 21%, 57%);
  --rp-highlight-low: hsl(25deg, 35%, 93%);
  --rp-highlight-med: hsl(10deg, 9%, 86%);
  --rp-highlight-high: hsl(315deg, 4%, 80%);

  /* consts */
  --const-lilac: #907aa9
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Rosé Pine */
    --rp-base: hsl(249deg, 22%, 12%);
    --rp-surface: hsl(247deg, 23%, 15%);
    --rp-overlay: hsl(248deg, 25%, 18%);
    --rp-muted: hsl(249deg, 12%, 47%);
    --rp-subtle: hsl(248deg, 15%, 61%);
    --rp-text: hsl(245deg, 50%, 91%);
    --rp-love: hsl(343deg, 76%, 68%);
    --rp-gold: hsl(35deg, 88%, 72%);
    --rp-rose: hsl(2deg, 55%, 83%);
    --rp-pine: hsl(197deg, 49%, 38%);
    --rp-foam: hsl(189deg, 43%, 73%);
    --rp-iris: hsl(267deg, 57%, 78%);
    --rp-highlight-low: hsl(244deg, 18%, 15%);
    --rp-highlight-med: hsl(249deg, 15%, 28%);
    --rp-highlight-high: hsl(248deg, 13%, 36%);

    /* Rosé Pine Moon */
    /* --rp-base: hsl(246deg, 24%, 17%); */
    /* --rp-surface: hsl(248deg, 24%, 20%); */
    /* --rp-overlay: hsl(248deg, 21%, 26%); */
    /* --rp-muted: hsl(249deg, 12%, 47%); */
    /* --rp-subtle: hsl(248deg, 15%, 61%); */
    /* --rp-text: hsl(245deg, 50%, 91%); */
    /* --rp-love: hsl(343deg, 76%, 68%); */
    /* --rp-gold: hsl(35deg, 88%, 72%); */
    /* --rp-rose: hsl(2deg, 66%, 75%); */
    /* --rp-pine: hsl(197deg, 48%, 47%); */
    /* --rp-foam: hsl(189deg, 43%, 73%); */
    /* --rp-iris: hsl(267deg, 57%, 78%); */
    /* --rp-highlight-low: hsl(245deg, 22%, 20%); */
    /* --rp-highlight-med: hsl(247deg, 16%, 30%); */
    /* --rp-highlight-high: hsl(249deg, 15%, 38%); */
  }
}

body {
  background-color: var(--rp-base);
  color: var(--rp-text);
  font-family: sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  width: 100vw;

  /* FLEX */
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;

  /* Margins, padding etc */
  padding: 1rem;
  margin: 0;
}

header {
  align-self: flex-start;
  width: 100%;
}

main {
  max-width: 100%;

  @media screen and (min-width:600px) {
    max-width: 800px;
  }

}

strong {
  color: var(--rp-rose);
}

em {
  color: var(--rp-rose);
}


header {
  border-bottom: 1px solid #222;
  margin-bottom: 1rem;
  /* background-color: var(--rp-muted); */
}

footer {
  border-top: 1px solid #222;
  margin-top: 1rem;
}

a {
  color: var(--rp-foam);
  text-decoration: underline dotted;
}

a:visited {
  color: var(--rp-subtle);
}

h1 {
  color: var(--rp-gold);
  background-color: var(--const-lilac);
  /* background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); */
  border-radius: 1rem 1rem 0 0;
  padding: 1rem;
  text-shadow: 1px 1px 2px black;
}

h2 {
  color: var(--rp-gold);
}

code {
  background: var(--rp-surface);
  color: var(--rp-gold);
  padding: 0.3em;
  border-radius: 1em;
  font-size: 1.2em;

  span {
    background: var(--rp-surface);
  }
}



.highlight {
  padding-left: 2rem;
  background-color: var(--rp-surface);
  border-radius: 1rem;
}