@charset "UTF-8";
/* http://www.colourlovers.com/palette/92095/Giant_Goldfish */
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.woff2");
  font-style: normal;
  font-weight: normal; }

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.woff2");
  font-style: normal;
  font-weight: bold; }

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Italic.woff2");
  font-style: italic;
  font-weight: normal; }

@font-face {
  font-family: "Noto Color Emoji";
  src: url("../fonts/NotoColorEmoji-Regular.ttf"); }

html {
  color-scheme: light dark;
  color: light-dark(black, white);
  background-color: light-dark(white, black);
  background-image: url("../images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center; }
  @media (prefers-color-scheme: dark) {
    html {
      background-image: url("../images/bg-dark.jpg"); } }
body {
  background-color: light-dark(#fffa, #444d);
  margin: auto;
  padding: 1em;
  border-radius: 1em;
  max-width: 40em;
  font-family: "Lato", "Noto Color Emoji", sans-serif;
  font-size: 13pt; }

input {
  font-family: inherit;
  font-size: inherit;
  border: thin solid #ccc; }

input:read-only {
  color: #444;
  background-color: #eee; }

header {
  background-color: light-dark(#e0e4cc, #442); }

header {
  border-radius: 0.25em;
  padding: 0.1em 0.5em;
  margin-top: 0;
  box-shadow: 0.2em 0.2em 1em #8885; }

header * {
  margin: 0.2em; }

.tagline {
  font-style: italic;
  margin-left: 1.5em; }

.draft,
.draft a:any-link {
  background-color: black;
  color: orange; }

.draft:after {
  content: " (draft)";
  font-style: italic; }

.subtitle {
  font-size: 60%; }

h1, h2, h3, h4, h5, h6 {
  color: light-dark(#e64, #c94); }

a {
  color: light-dark(#24f, #9be);
  text-decoration: none; }

a:visited {
  color: light-dark(#46c, #abc); }

a:hover {
  color: light-dark(#f83, #a52); }

img.face {
  margin: 1em;
  width: 10em; }

pre {
  overflow-x: auto; }

blockquote {
  padding: 0.1em 1em;
  border-radius: 0.4em;
  background-color: light-dark(inherit, #442); }

footer {
  clear: both;
  border-top: solid black 1px; }

nav ul,
ul.compact {
  display: flex;
  padding: 0;
  margin-top: 0;
  margin-bottom: 1em;
  flex-wrap: wrap; }

nav ul li,
ul.compact li {
  display: inline;
  margin: 0.5em 0.5em;
  text-align: center; }

nav ul li {
  flex-grow: 1; }

nav ul .fill {
  flex-grow: 20; }

.left {
  float: left; }

.right {
  float: right; }

/* Formatting */
p, li, dd {
  text-align: left; }

li {
  margin-bottom: 0.5em; }

body > p {
  text-indent: 1.5em; }

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, ol + p, ul + p, pre + p, blockquote + p, img + p {
  text-indent: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: bold; }

dl.list {
  margin-left: 1em; }

dl.list dt {
  display: list-item;
  margin-top: 0.5em; }

dl.list dd {
  margin-inline-start: 1em; }

pre {
  margin: 1em 2em;
  padding: 1em;
  border: solid black 1px;
  background-color: light-dark(inherit, #442); }

figure {
  padding: 0.25em;
  margin: 0.5em;
  font-size: smaller;
  border: solid black 1px; }

figure.thumbnail {
  max-width: 40%; }

#timestamp {
  font-size: small;
  text-indent: inherit; }

button.big {
  padding: 0;
  border: 0;
  margin: 1em;
  font-size: 2em;
  background: inherit; }

legend {
  background-color: #e0e4cc; }

table {
  margin: 1em 0;
  border-collapse: collapse; }

thead, tfoot {
  color: #e64;
  background-color: rgba(224, 228, 204, 0.8); }

tbody tr:nth-of-type(even) {
  background-color: rgba(238, 102, 68, 0.05); }

td, th {
  padding: 0.2em 0.5em; }

caption {
  caption-side: bottom;
  font-size: small; }

.justify-center {
  text-align: center; }

.justify-right, input[type="number"] {
  text-align: right; }

.justify-left {
  text-align: left; }

.branch::after {
  content: "✢"; }

.rating .stars {
  color: light-dark(#880, #ff0); }

.rating.mean .stars {
  font-size: larger;
  color: light-dark(#066, #cc0); }

@media (max-width: 768px) {
  img, video {
    max-width: 100%; } }

@media (min-width: 768px) {
  img, video {
    max-width: 60%; }
  figure img {
    max-width: 100%; } }

.flex {
  display: flex;
  justify-content: space-around; }

.flex.wrap {
  flex-wrap: wrap; }

details {
  border: solid light-dark(#ca8, #667) 5px;
  padding: 0.5em; }

details summary {
  cursor: pointer; }

.recipes .list, .images .list {
  margin: 0.5em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end; }
  .recipes .list .card, .images .list .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0.5em; }
    @media (min-width: 768px) {
      .recipes .list .card, .images .list .card {
        max-width: calc(33% - 1em); } }
    .recipes .list .card .title, .images .list .card .title {
      margin: 0.25em;
      width: 100%;
      overflow: hidden; }
      @media (min-width: 768px) {
        .recipes .list .card .title, .images .list .card .title {
          height: 2em; } }
    .recipes .list .card img, .images .list .card img {
      max-width: 100%; }

.recipes .story, .images .story {
  margin: 0.5em 1em;
  max-height: 20em;
  overflow: auto; }

.recipes .story img, .images .story img {
  float: right;
  margin: auto auto 1em 1em; }

.recipes .ingredients, .images .ingredients {
  clear: both; }

.recipes .ingredients ul, .images .ingredients ul {
  list-style: none; }

.recipes .ingredients ul label, .images .ingredients ul label {
  display: flex;
  align-items: flex-start; }