:root {
  --base03:  #002b36;
  --base02:  #073642;
  --base01:  #586e75;
  --base00:  #657b83;
  --base0:   #839496;
  --base1:   #93a1a1;
  --base2:   #eee8d5;
  --base3:   #fdf6e3;
  --yellow:  #b58900;
  --orange:  #cb4b16;
  --red:     #dc322f;
  --magenta: #d33682;
  --violet:  #6c71c4;
  --blue:    #268bd2;
  --cyan:    #2aa198;
  --green:   #859900;
}


html {
  background-color: var(--base3);
  font-family: sans-serif;
  font-size: 20px;
}

body {
  padding: 1rem;
  margin: 0 auto;
  max-width: 750px;
}

img {
  max-width: 100%;
  max-height: 85vh;
  height: auto;
  display: block;
  margin: 0 auto;
}

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

/* inline code */
code {
  background-color: var(--base2);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-family: monospace;
}

/* code blocks */
.highlight {
  background-color: var(--base2);
  padding: 1em;
  margin: 1em;
  border-radius: 4px;
  overflow-x: auto;
}

/* remove padding and margin from inner elements */
.highlight pre,
.highlight code {
  padding: 0;
  margin: 0;
}

@media (min-width: 600px) {
    .recipe {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 0 4rem;
    }

    .ingredients {
        flex: 0 0 auto;
        width: max-content;
        background: var(--base2);
        padding: 0.5rem;
        border-radius: 4px;
    }

    .instructions {
        flex: 1;
    }
}