@font-face {
  font-family: GeneralSans;
  src: url(https://cdn.kevquirk.com/GeneralSans-Variable.woff2) format("woff2"), url(https://cdn.kevquirk.com/GeneralSans-Variable.woff) format("woff");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: GeneralSans;
  src: url(https://cdn.kevquirk.com/GeneralSans-VariableItalic.woff2) format("woff2"), url(https://cdn.kevquirk.com/GeneralSans-VariableItalic.woff) format("woff");
  font-weight: 200 700;
  font-display: swap;
  font-style: italic;
}
:root {
  --text: #000;
  --dark-text: #000;
  --bg: #fafafa;
  --accent-bg: #efefef;
  --input-bg: white;
  --yellow: #ffdd55;
  --blue: #aaccff;
  --pink: #f495c6;
  --purple: #929cf9;
  --green: #c3ec81;
  --highlight: #ffdd55;
  --sans: "GeneralSans", Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  --mono: Menlo, Consolas, Monaco, "Liberation Mono", Lucida Console, monospace;
  --content-margin: 1.5rem auto;
  --date-margin: 0.5rem auto;
  --bigger-content-margin: 2.5rem auto;
  --standard-border: 3px solid var(--text);
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #eee;
    --bg: #222;
    --accent-bg: #2d2d2d;
    --input-bg: #2d2d2d;
  }
  img {
    opacity: 70%;
  }
}
body {
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-size: 1.35rem;
  line-height: 1.5;
  display: block;
  max-width: 39rem;
  margin: 0 auto;
  padding: 0 1rem;
}
p,
table {
  margin: var(--content-margin);
}
header {
  text-align: center;
  margin-bottom: 3rem;
}
.site-logo {
  vertical-align: sub;
  display: inline-block;
  margin: 1.5rem 0 1rem 0;
  width: 3.5rem;
  height: auto;
  stroke-width: 0;
  stroke: var(--text);
  fill: var(--text);
}
ul.nav-menu {
  padding-inline-start: 0;
  margin: 0;
  line-height: 2;
}
ul.nav-menu li {
  display: inline-block;
  list-style: none;
  margin-left: 0.75rem;
}
ul.nav-menu li:first-child {
  margin-left: 0;
}
ul.nav-menu li a {
  padding: 5px;
  font-size: 1.1rem;
  font-weight: 600;
}
footer {
  margin-top: 5rem;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.9rem;
  border-top: var(--standard-border);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}
h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0;
}
h4,
h5,
h6 {
  margin-bottom: 1rem;
  line-height: 1.2;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.2rem;
  margin-top: 3rem;
}
h3 {
  font-size: 2rem;
  margin-top: 3rem;
}
h4 {
  font-size: 1.44rem;
}
h5 {
  font-size: 1.15rem;
}
h6 {
  font-size: 0.96rem;
}
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  font-size: inherit;
}
.post-list h2 {
  font-size: 2rem;
  margin: 0;
}
.post-list p {
  margin: 0;
}
@media only screen and (max-width: 750px) {
  .post-nav,
  header {
    max-width: 100%;
    padding: 0;
  }
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2.1rem;
  }
  .post-list h2 {
    font-size: 1.8rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1.25rem;
  }
}
a,
a:visited {
  color: var(--text);
  text-decoration-thickness: 0.15rem;
  transition: color 0.1s ease-in-out, 0.1s ease-in-out;
}
.active,
a:hover {
  color: var(--dark-text) !important;
  text-decoration-color: var(--pink);
  background: var(--pink);
  text-decoration: none;
}
blockquote {
  font-size: 1.5rem;
  font-style: italic;
  margin: var(--bigger-content-margin);
  padding: 0.4rem 0.8rem;
  border-left: 6px solid var(--text);
  opacity: 70%;
  display: block;
}
cite {
  font-size: 1rem;
  font-family: var(--sans);
  font-style: normal;
}
.tldr {
  margin: 3rem 0;
}
.medium,
.tldr {
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 300;
}
mark {
  padding: 0.1rem 0.25rem;
  background: var(--highlight);
  color: #000;
}
table {
  border: var(--standard-border);
}
th {
  text-align: left;
  padding: 0.2rem 0.4rem;
  background: var(--purple);
  color: var(--dark-text);
}
td {
  padding: 0.2rem 0.4rem;
}
tr:nth-child(2n) {
  background: var(--accent-bg);
}
hr {
  border-top: 3px solid var(--text);
  margin: 1.75rem auto;
}
code,
pre,
tt,
var {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--text);
  background: var(--accent-bg);
  padding: 2px 5px;
  border: 1px solid var(--text);
}
pre,
pre.highlight {
  background: var(--accent-bg);
  border: 3px solid var(--text);
  margin: var(--bigger-content-margin);
  max-width: 100%;
  padding: 1.5rem;
  max-height: 650px;
  overflow: auto;
  white-space: pre;
}
pre code {
  font-size: 1rem;
  padding: 0;
  background: 0 0;
  border: none;
}
kbd {
  color: var(--text);
  background: var(--accent-bg);
  border: 1px solid var(--text);
  border-bottom: var(--standard-border);
  border-radius: 5px;
  padding: 0.1rem 0.25rem;
}
.notice,
.notice-red,
.tip,
.warning {
  background: var(--accent-bg);
  border: 3px solid var(--text);
  padding: 1rem 1rem 2rem 1rem;
  margin: var(--bigger-content-margin);
}
.notice p,
.notice-red p,
.tip p,
.warning p {
  margin: 0;
}
.notice p:nth-child(n + 2),
.notice-red p:nth-child(n + 2),
.tip p:nth-child(n + 2),
.warning p:nth-child(n + 2) {
  margin-top: 1rem;
}
.notice-red::before,
.notice::before,
.tip::before,
.warning::before {
  color: var(--dark-text);
  border-right: 3px solid var(--text);
  border-bottom: 3px solid var(--text);
  display: block;
  text-align: center;
  position: relative;
  left: -1rem;
  top: -1rem;
  padding: 2px 10px;
  font-weight: 700;
}
.notice a:hover,
.notice-red a:hover,
.tip a:hover,
.warning a:hover {
  background-color: var(--pink);
}
.notice::before {
  content: "NOTE";
  background: var(--blue);
  width: 5rem;
}
.notice-red::before,
.warning::before {
  content: "WARNING";
  background: var(--yellow);
  width: 7.5rem;
}
.tip::before {
  content: "TIP";
  background: var(--green);
  width: 4rem;
}
.project {
  border: var(--standard-border);
  margin: var(--bigger-content-margin);
  background: var(--accent-bg);
  font-size: 1rem;
  padding: 1rem;
  position: relative;
  margin: 0.5rem 0.5rem 0 0;
  width: 42.5%;
  height: 300px;
  float: left;
}
.project-banner {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  padding: 2rem 0;
  margin: 0;
}
.book,
.watch {
  background: var(--green);
  border: 3px solid var(--dark-text);
  color: var(--dark-text);
  margin: var(--bigger-content-margin);
  padding: 1.5rem;
  font-size: 1rem;
}
.book p,
.watch p {
  margin: 0;
}
.book img,
.watch img {
  margin: 0 1.5rem 0.75rem 0;
  border: 3px solid var(--dark-text);
}
.link {
  color: var(--dark-text);
  background: var(--yellow);
  border: 3px solid var(--dark-text);
  margin: var(--bigger-content-margin);
  padding: 1.5rem;
  margin: 2.5rem 0;
}
.link h2 {
  margin-top: 0;
}
@media only screen and (max-width: 750px) {
  .project {
    float: none;
    margin: 0.5rem 0;
    width: 90%;
    height: auto;
  }
  .book img,
  .floatleft {
    float: none;
    display: block;
    margin: 0 auto;
  }
  .book img {
    margin-bottom: 1.5rem;
  }
}
.recent-posts {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.recent-posts li {
  margin-bottom: 1.5rem;
}
.recent-posts li:nth-child(n + 6) {
  display: none;
}
details {
  color: var(--dark-text);
  background: var(--yellow);
  border: var(--standard-border);
  margin-bottom: 1rem;
}
summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.6rem 1rem;
}
details[open] {
  padding: 0.6rem 1rem 0.75rem 1rem;
}
details[open] summary {
  margin-bottom: 0.5rem;
  padding: 0;
}
details[open] > :last-child {
  margin-bottom: 0;
}
sup {
  font: icon;
}
section {
  font-size: 85%;
}
img {
  max-width: 100%;
  margin: 3rem auto;
  height: auto;
  display: block;
}
figcaption,
img + em {
  font-size: 1rem;
  font-style: normal;
  text-align: center;
  display: block;
  margin-top: -3rem;
}
video {
  max-width: 100%;
  height: auto;
  margin: var(--bigger-content-margin);
  display: block;
}
audio {
  width: 100%;
  padding: 0;
  margin: var(--bigger-content-margin);
}
.spacer {
  padding-top: 1.5rem;
}
.icon {
  vertical-align: sub;
  padding-right: 0.25rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.hidden {
  display: none;
}
.post-list {
  margin-bottom: 3rem;
}
.post-list {
  font-size: 1.1rem;
}

.date {
  font-size: 1.0rem;
  
  margin: var(--date-margin);
}

.brutal-shadow {
  box-shadow: 6px 6px 0 0 var(--text);
  transition: all 0.1s ease;
}
.brutal-shadow:hover {
  color: var(--dark-text);
  box-shadow: 0 0 0 0 var(--text);
  background: var(--pink) !important;
  border-color: var(--text) !important;
}
.dark-brutal-shadow {
  box-shadow: 6px 6px 0 0 #000;
  transition: all 0.1s ease;
}
.dark-brutal-shadow:hover {
  color: var(--dark-text);
  box-shadow: 0 0 0 0 #000;
  background: var(--pink) !important;
  border-color: #000 !important;
}
.post-nav {
  display: flex;
  border-top: var(--standard-border);
  border-bottom: var(--standard-border);
  margin: 4rem auto;
}
.post-nav a {
  font-weight: 700;
}
.post-nav p {
  padding: 2rem 0;
}
.post-nav div {
  flex: 1 1 0;
}
.post-nav-next {
  text-align: right;
}
.pagination-links {
  padding: 2rem 0.5rem;
  display: block;
}
.post-footer {
  text-align: center;
  margin: 5rem 0 2rem 0;
}
.post-meta {
  font-size: 1rem;
  margin: var(--bigger-content-margin);
}
ul.post-meta {
  list-style-type: none;
  padding: 0;
}
ul.post-meta::before {
  content: "Posted in:";
  padding-right: 0.5rem;
  font-weight: 700;
}
ul.post-meta li {
  margin-right: 0.5rem;
  display: inline-block;
}
ul.post-meta li:last-child {
  margin-right: 0;
}
#submit,
.button {
  color: var(--text);
  border: var(--standard-border);
  background: var(--bg);
  display: inline-block;
  margin: 1rem 0;
  padding: 10px 12px;
}
#submit:hover,
.button:hover {
  background: var(--bg);
  color: var(--dark-text);
}
a.button {
  color: var(--text);
  text-decoration: none;
}
.reply {
  font-size: 32px;
  font-weight: 700;
  padding: 20px 40px;
  text-align: center;
  display: inline-block;
}
input {
  font-family: var(--sans);
  font-size: 1.25rem !important;
}
input#bd-email,
input#search {
  font-size: 1rem;
  padding: 0.7rem;
  border: 3px solid var(--text);
  background: var(--input-bg);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
input#search-input {
  margin: 2rem 0 1rem 0;
}
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0 !important;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.contribute-box,
.subscribe-form {
  border: 3px solid var(--dark-text);
  margin: 4rem 0;
}
.contribute-box {
  color: var(--dark-text);
  background: var(--yellow);
  padding: 1rem;
}
.contribute-box h2 {
  margin-top: 0;
}
.contribute-box p {
  padding: 1rem;
  margin: 0;
}
.subscribe-form {
  color: var(--dark-text);
  background: var(--blue);
  padding: 1rem;
}
.contribute-box a,
.subscribe-form a {
  color: var(--dark-text);
}
.subscribe-form h2 {
  margin-top: 0;
}
.subscribe-form form {
  max-width: 80%;
  margin: 1.5rem auto;
}
input[type="submit"] {
  background: var(--bg);
  color: var(--text);
  border: var(--standard-border);
  margin: 0.5rem 0;
  padding: 10px 20px;
}
@media (prefers-color-scheme: dark) {
  .subscribe-form input[type="submit"] {
    background: var(--text);
    color: var(--bg);
    border: 3px solid var(--bg);
    margin: 0.5rem 0;
    padding: 10px 20px;
  }
  .subscribe-form input#bd-email {
    border-color: var(--bg);
  }
}
.about-img {
  width: 40%;
}
.phone-chat {
  max-width: 30rem;
  margin: var(--bigger-content-margin);
}
.phone-message,
.phone-reply {
  margin: 0.5rem 0;
  padding: 0.5rem;
  width: 60%;
  border-radius: 12px;
  font-size: 1.1rem;
  clear: both;
}
.phone-message p,
.phone-reply p {
  margin: 0;
}
.phone-message {
  background: #e6e5eb;
}
.phone-message a,
.phone-message p {
  color: #000;
}
.phone-reply {
  background: #0a81ff;
  float: right;
}
.phone-reply p {
  color: #fff;
}
@media only screen and (max-width: 750px) {
  .phone-chat {
    width: 100%;
  }
  .about-img {
    width: 60%;
  }
}
@media (prefers-color-scheme: dark) {
  .phone-message {
    background: #000;
  }
  .phone-message a,
  .phone-message p {
    color: var(--text);
  }
  .phone-reply {
    background: #0861c0;
    float: right;
  }
}
.center {
  text-align: center;
}
.floatleft {
  float: left;
}