@charset "UTF-8";
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Regular.ttf");
  font-weight: normal;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Italic.ttf");
  font-style: italic;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-BoldItalic.ttf");
  font-weight: bold;
  font-style: italic;
}
:root {
  --primary-highlight: black;
  --secondary-highlight: #999;
  --common: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-highlight: white;
    --secondary-highlight: #868686;
    --common: rgb(16, 20, 34);
  }
}
#color-mode:checked ~ * {
  --primary-highlight: white;
  --secondary-highlight: #868686;
  --common: rgb(16, 20, 34);
}

@media (prefers-color-scheme: dark) {
  #color-mode:checked ~ * {
    --primary-highlight: black;
    --secondary-highlight: #999;
    --common: white;
  }
}
input#color-mode, .color-slider-wrapper {
  position: absolute;
  top: 94px;
  left: 30px;
}

input#color-mode {
  appearance: none;
}

.color-slider-wrapper {
  margin: 0;
  line-height: 1.4em;
  cursor: pointer;
  padding: 2px 4px;
  border: 1px solid var(--primary-highlight);
  color: var(--primary-highlight);
  display: inline-block;
  width: 56px;
  height: 30px;
}
.color-slider-wrapper:hover, .color-slider-wrapper:focus {
  border: 2px solid var(--primary-highlight);
  margin: -1px;
}

.color-slider-wrapper:after {
  color: var(--primary-highlight);
}

@media (min-width: 1160px) {
  input#color-mode, .color-slider-wrapper {
    left: calc((100% - 1160px) / 2 + 30px);
  }
}
.color-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--common);
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}

.color-slider:before {
  z-index: 10;
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: var(--primary-highlight);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.color-slider:after {
  position: absolute;
  color: red;
  height: 26px;
  width: 26px;
  left: 34px;
  bottom: 4px;
  -webkit-transition: 0.4s cubic-bezier(0, 0.4, 0.6, 1);
  transition: 0.4s cubic-bezier(0, 0.4, 0.6, 1);
}

input:checked + .color-slider-wrapper .color-slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

input:checked + .color-slider-wrapper .color-slider:after {
  -webkit-transform: translateX(-30px);
  -ms-transform: translateX(-30px);
  transform: translateX(-30px);
}

.color-slider:after {
  content: url("data:image/svg+xml,%3Csvg fill='%23999' xmlns='http://www.w3.org/2000/svg' viewBox='-64 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3E%3C/svg%3E%0A");
}

input:checked + label .color-slider:after {
  content: url("data:image/svg+xml,%3Csvg fill='%23868686' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .color-slider:after {
    content: url("data:image/svg+xml,%3Csvg fill='%23868686' xmlns='http://www.w3.org/2000/svg' viewBox='-64 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3E%3C/svg%3E%0A");
  }
  input:checked + label .color-slider:after {
    content: url("data:image/svg+xml,%3Csvg fill='%23999' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M375.7 19.7c-1.5-8-6.9-14.7-14.4-17.8s-16.1-2.2-22.8 2.4L256 61.1 173.5 4.2c-6.7-4.6-15.3-5.5-22.8-2.4s-12.9 9.8-14.4 17.8l-18.1 98.5L19.7 136.3c-8 1.5-14.7 6.9-17.8 14.4s-2.2 16.1 2.4 22.8L61.1 256 4.2 338.5c-4.6 6.7-5.5 15.3-2.4 22.8s9.8 13 17.8 14.4l98.5 18.1 18.1 98.5c1.5 8 6.9 14.7 14.4 17.8s16.1 2.2 22.8-2.4L256 450.9l82.5 56.9c6.7 4.6 15.3 5.5 22.8 2.4s12.9-9.8 14.4-17.8l18.1-98.5 98.5-18.1c8-1.5 14.7-6.9 17.8-14.4s2.2-16.1-2.4-22.8L450.9 256l56.9-82.5c4.6-6.7 5.5-15.3 2.4-22.8s-9.8-12.9-17.8-14.4l-98.5-18.1L375.7 19.7zM269.6 110l65.6-45.2 14.4 78.3c1.8 9.8 9.5 17.5 19.3 19.3l78.3 14.4L402 242.4c-5.7 8.2-5.7 19 0 27.2l45.2 65.6-78.3 14.4c-9.8 1.8-17.5 9.5-19.3 19.3l-14.4 78.3L269.6 402c-8.2-5.7-19-5.7-27.2 0l-65.6 45.2-14.4-78.3c-1.8-9.8-9.5-17.5-19.3-19.3L64.8 335.2 110 269.6c5.7-8.2 5.7-19 0-27.2L64.8 176.8l78.3-14.4c9.8-1.8 17.5-9.5 19.3-19.3l14.4-78.3L242.4 110c8.2 5.7 19 5.7 27.2 0zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zM192 256a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z'/%3E%3C/svg%3E");
  }
}
html, body {
  padding: 0;
  margin: 0;
  line-height: 1.8em;
  scroll-behavior: smooth;
}

* {
  transition: background-color, color 0.2s cubic-bezier(0, 0.4, 0.6, 1);
}

.color-scheme-wrapper {
  min-height: 100vh;
  color: var(--primary-highlight);
}

.emulated-background {
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: -10;
  background-color: var(--common);
}

body, input, textarea {
  font-family: "Atkinson Hyperlegible", sans-serif;
  color: var(--common);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 1.8em;
  margin: 0;
  padding: 0;
  line-height: 1.3em;
}

h2 {
  font-size: 1.4em;
}

time {
  color: var(--secondary-highlight);
}

header {
  text-align: center;
  padding: 80px 0 60px 0;
}

img {
  max-width: 100%;
}

ol li + li {
  margin: 20px 0 0 0;
}

footer {
  color: var(--secondary-highlight);
  text-align: center;
  padding: 20px 0;
  font-size: 0.8em;
}

hr {
  border: 0;
  border-top: 1px solid #eee;
}

a {
  text-decoration: none;
  color: #007eff;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .main-content {
    display: flex;
  }
}
.main-content {
  padding: 0 30px 50px 30px;
}

@media (min-width: 900px) {
  .content {
    flex: 1;
  }
}

.post h1 a {
  color: var(--primary-highlight);
  text-decoration: none;
}
.post h1 a:hover {
  text-decoration: underline;
}
.post time {
  padding: 0 0 20px 0;
  display: block;
}
.post .recipe-overview {
  padding: 0;
  margin: 0;
}
.post .recipe-overview svg {
  position: relative;
  top: 6px;
  fill: var(--primary-highlight);
}
.post .recipe-overview span {
  margin: 0 18px 0 3px;
}
.post .recipe-overview li {
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 900px) {
  .post .recipe-overview li {
    display: inline-block;
  }
}
.post .recipe-overview input[type=number] {
  max-width: 50px;
  background-color: var(--primary-highlight);
  color: var(--common);
  border: none;
  padding: 4px;
  box-sizing: border-box;
}
.post .recipe-overview input[type=number]:hover, .post .recipe-overview input[type=number]:active, .post .recipe-overview input[type=number]:focus {
  background-color: initial;
  color: var(--primary-highlight);
  border: 1px solid var(--primary-highlight);
}
.post .recipe-overview label {
  display: initial;
  cursor: pointer;
}
@media (min-width: 900px) {
  .post .recipe-contents {
    display: flex;
  }
}
.post .recipe-contents p {
  margin-bottom: 0;
}
.post .recipe-contents tr {
  vertical-align: top;
}
.post .recipe-contents tr td:first-of-type:before {
  content: "»";
  color: #ff4e4e;
  padding-right: 0.5em;
}
.post .recipe-contents tr em {
  color: var(--secondary-highlight);
  white-space: pre;
  font-style: normal;
}
.post .recipe-contents ul {
  padding: 0;
}
.post .recipe-contents ul li {
  list-style-type: none;
}
.post .recipe-contents ul li:before {
  content: "»";
  color: #ff4e4e;
  padding-right: 0.5em;
}
.post .recipe-contents ol {
  padding: 0;
}
.post .recipe-contents ol li {
  counter-increment: step-counter;
  list-style-type: none;
  position: relative;
  margin-left: 34px;
}
.post .recipe-contents ol li:before {
  content: counter(step-counter);
  margin-right: 0px;
  background-color: #ff4e4e;
  color: var(--common);
  /* padding: 1px 7px; */
  font-size: 0.7em;
  position: absolute;
  left: -34px;
  top: -2px;
  width: 25px;
  text-align: center;
}
.post .recipe-contents .ingredients {
  width: 250px;
  padding: 0 43px 0 0;
}
@media (min-width: 900px) {
  .post .recipe-contents .directions {
    flex: 1;
  }
}

.post + .post {
  margin: 65px 0 50px 0;
}

.sharing {
  margin: 50px 0 0 0;
  text-align: center;
  font-size: 0;
}
.sharing a {
  text-decoration: none;
  text-align: center;
  position: relative;
  width: 56px;
  display: inline-block;
  height: 44px;
  line-height: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sharing a:hover:before {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.25);
  content: "";
}
.sharing a svg {
  fill: #fff;
}
.sharing a.email {
  background-color: #ff9d09;
}
.sharing a.facebook {
  background-color: #3b5998;
}
.sharing a.twitter {
  background-color: #55acee;
}
.sharing a.google-plus {
  background-color: #db4437;
}
.sharing a.youtube {
  background-color: #cd201f;
}
.sharing a.instagram {
  background-color: #f167f5;
}
.sharing a.linkedin {
  background-color: #0077b5;
}
.sharing a.pinterest {
  background-color: #C92228;
}
.sharing a.pinterest-icon:hover svg {
  fill: #bd081c;
}

.pagination {
  text-align: center;
  margin: 50px 0 0 0;
}

.take-me {
  float: right;
}
.take-me .button {
  padding-top: 10px;
  padding-bottom: 10px;
}

.cta {
  text-align: center;
  padding: 50px 0 0 0;
}

.button, input[type=submit] {
  background: var(--common);
  cursor: pointer;
  border: 1px solid #666;
  color: var(--primary-highlight);
  text-decoration: none;
  padding: 5px 10px;
  display: inline-flex;
  align-items: flex-end;
  margin: 0;
  font-size: 0.8em;
}
.button:hover, .button:active, .button:focus, input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
  background: var(--primary-highlight);
  color: var(--common);
}

.button {
  border-color: var(--primary-highlight);
}
.button a {
  color: var(--primary-highlight);
}
.button a:hover {
  color: var(--common);
}

input[type=submit] {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

input[type=text], input[type=email], textarea {
  display: block;
  width: 100%;
  font-size: 1.1em;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--secondary-highlight);
  background-color: var(--primary-highlight);
  color: var(--common);
  resize: none;
}
input[type=text]:hover, input[type=text]:active, input[type=text]:focus, input[type=email]:hover, input[type=email]:active, input[type=email]:focus, textarea:hover, textarea:active, textarea:focus {
  background-color: initial;
  color: var(--primary-highlight);
  outline: 2px solid var(--secondary-highlight);
}

textarea {
  height: 150px;
}

label {
  margin: 20px 0 5px 0;
  display: block;
}

::-webkit-input-placeholder { /* Chrome */
  color: var(--secondary-highlight);
}

:-ms-input-placeholder { /* IE 10+ */
  color: var(--secondary-highlight);
}

::-moz-placeholder { /* Firefox 19+ */
  color: var(--secondary-highlight);
  opacity: 1;
}

:-moz-placeholder { /* Firefox 4 - 18 */
  color: var(--secondary-highlight);
  opacity: 1;
}

legend {
  display: none;
}

.contain {
  border: 0;
  background: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.contain .split {
  flex: 0 0 380px;
}

select {
  width: 100%;
  padding: 20px;
  height: 43px;
  background: var(--common);
  border-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  outline: 1px solid var(--primary-highlight);
}
select:focus {
  outline: 2px solid var(--secondary-highlight);
}

nav {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 999;
}
nav::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: var(--common);
  opacity: 0.75;
  z-index: -1;
}
nav a {
  display: inline-block;
  text-decoration: none;
  padding: 14px 8px;
  color: var(--primary-highlight);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9em;
}
nav a.active {
  font-weight: bold;
}
nav a:hover, nav a:focus {
  background-color: var(--primary-highlight);
  color: var(--common);
}

.sidebar {
  width: 250px;
  padding: 70px 0 0 0;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .sidebar {
    margin: 0;
    padding: 0 0 0 70px;
  }
}
.sidebar .author {
  text-align: center;
}
.sidebar .author p {
  padding: 0;
  margin: 0;
}
.sidebar .author img {
  width: 200px;
  border-radius: 200px;
  margin: 0 0 10px 0;
}
.sidebar .social-icons {
  display: flex;
  justify-content: center;
  margin: 10px 0 0 0;
}
.sidebar .social-icons a {
  padding: 3px;
  text-decoration: none;
}
.sidebar .social-icons a:hover svg {
  fill: var(--primary-highlight);
}
.sidebar .social-icons svg {
  width: 25px;
  height: 25px;
  fill: var(--secondary-highlight);
}

@media (min-width: 900px) {
  .sidebar.push {
    padding-top: 72px;
  }
}

.recipes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  container-type: inline-size;
}
.recipes .recipe {
  flex: 1 0 300px;
  height: calc(100px + 10cqw);
  display: inline-block;
  background-position: center;
  background-size: cover;
}
.recipes .recipe a {
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  text-decoration: none;
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  font-size: 1.2em;
  font-weight: 700;
  box-sizing: border-box;
  border: 2px solid transparent;
}
.recipes .recipe a span {
  display: inline-block;
  backdrop-filter: blur(4px);
  text-shadow: 0px 0px 10px black;
  padding: 0 5px;
  margin-top: 5px;
}
.recipes .recipe a:hover {
  background: none;
  border: 2px solid var(--primary-highlight);
}

/*# sourceMappingURL=screen.css.map */