/**

Taken heavily from Kev Quirk, who is an absolute
css genius. His site is kevquirk.com and you can
sponsor his amazing simplecss project on github
or please buy him a coffee.

https://github.com/sponsors/kevquirk
https://ko-fi.com/kevquirk

**/
/** Global colour variables **/
  :root {
    --text: #000;
    --dark-text: #000;
    --bg: #fafafa;
    --accent-bg: #efefef;
    --input-bg: white;
    --yellow: #ffdd55;
    --blue: #aaccff;
    --pink: #f495c6;
    --purple: #929cf9;
    --green: #c3ec81;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --mono: Menlo, Consolas, Monaco, "Liberation Mono", Lucida Console, monospace;
    --content-margin: 1.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: #111;
     --input-bg: #2d2d2d;
   }

   body {
    -webkit-font-smoothing: antialiased;
   }
  }

/****** Main body elements ******/
html {
    scroll-behavior: smooth;
    min-height: 100%;
}

body {
    color: var(--text);
    background: var(--bg);
    font-family: var(--sans);
    font-size: 1.35rem;
    line-height: 1.5;
    margin: 0;
}

main {
    display: block;
    max-width: 39rem;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 67vh;
}

main img {
    max-width: 100%;
}

figure {
    margin: 2.5rem auto;
    text-align: center;
}

figcaption {
    font-size: 1rem;
    font-style: normal;
    text-align: center;
    display: block;
}

video {
  max-width: 100%;
  height: auto;
  margin: var(--bigger-content-margin);
  display: block;
}

audio {
  width: 100%;
  padding: 0;
  margin: var(--bigger-content-margin);
}

iframe {
  display: block;
  margin: var(--bigger-content-margin);
}

footer {
    margin-top: 5rem;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9rem;
    background-color: var(--accent-bg);
    border-top: var(--standard-border)
}

/**** Format the header ****/
header {
    margin-bottom: 3rem;
    background: var(--accent-bg);
    padding: 0.5rem 0;
    border-bottom: var(--standard-border);
}

.header-container {
    display: block;
    max-width: 50rem;
    margin: 0 auto;
    padding: 0 1rem;
}

nav {
  display: inline-flex;
  float: right;
}

ul.main-menu {
  padding-inline-start: 0;
  margin: 0;
  line-height: 2;
}

ul.main-menu li {
  display: inline;
  position: relative;
  list-style: none;
  margin-left: 0.75rem;
}

ul.main-menu li:first-child {
  margin-left: 0;
}

ul.main-menu li a {
  padding: 5px;
  font-size: 1.1rem;
  font-weight: 600;
}

.site-logo {
  width: 2.5rem;
  display: inline-flex;
  height: auto;
  stroke-width: 0;
  stroke: var(--text);
  fill: var(--text);
  padding-right: 1.5rem;
  vertical-align: middle;
}

.site-logo-solo {
  display: inline-flex;
  height: auto;
  stroke-width: 0;
  stroke: var(--text);
  fill: var(--text);
  vertical-align: middle;
}

/* Mobile responsiveness */
@media only screen and (max-width: 750px) {
  header {
    text-align: center;
  }

  nav {
    display: block;
    text-align: center;
    line-height: 1.8;
    float: none;
  }

  .site-logo {
    padding-right: 0;
  }

  .post-nav {
    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;
  }
}

/**** Typography ****/
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    text-wrap: balance;
}

h1, h2, h3 {
  line-height: 1.2;
}

h4, h5, h6 {
  margin-bottom: 1rem;
  line-height: 1.2;
}

h1 {
  font-size: 3rem;
  margin: 0;
}

h2 {
  font-size: 2.6rem;
  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;
}

h2.post-title {
    font-size: 2rem;
}

p {
    margin: var(--content-margin);
}

h2.post-title,
p.date {
    margin: 0;
}

p.date {
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.tldr,
.medium {
    margin: 3rem 0;
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 300;
}

/*** Links and buttons ***/
a,
a:visited {
  color: var(--text);
  text-decoration-thickness: .15rem;
}

a:hover,
.current {
  color: var(--dark-text) !important;
  text-decoration-color: var(--pink);
  background: var(--pink);
  text-decoration: none;
}

input[type="submit"] {
  background: var(--bg);
  color: var(--text);
  border: var(--standard-border);
  margin: 0.5rem 0;
  padding: 10px 20px;
}

.button,
#submit {
  color: var(--text);
  border: var(--standard-border);
  background: var(--bg);
  box-shadow: 6px 6px 0 0 var(--text);
  transition: color .1s ease-in-out, .1s ease-in-out;
  margin: 1.5rem 0;
  padding: 10px 12px;
}

a.button {
  color: var(--text);
  text-decoration: none;
  display: inline-block;
}

a.dark-button {
  color: black;
  text-decoration: none;
  display: inline-block;
}

.button:hover,
#submit:hover {
  color: var(--dark-text);
  box-shadow: 0px 0px 0 0 var(--text);
  background: var(--pink);
  border-color: var(--text);
}

.dark-button {
  box-shadow: 6px 6px 0 0 black !important;
  color: black !important;
  border: 3px solid black !important;
  background: #fafafa !important;
  transition: color .1s ease-in-out, .1s ease-in-out;
  margin: 1.5rem 0;
  padding: 10px 12px;
}

.dark-button:hover {
  color: var(--dark-text) !important;
  box-shadow: 0px 0px 0 0 var(--text) !important;
  background: var(--pink) !important;
  border-color: var(--dark-text);
}

/**** Misc elements ****/
table {
  border: var(--standard-border);
  margin: var(--bigger-content-margin);
  width: 100%;
}

th {
  text-align: left;
  padding: .2rem .4rem;
  background: var(--blue);
  color: var(--dark-text);
}

td {
  padding: .2rem .4rem;
}

tr:nth-child(2n) {
  background: var(--accent-bg);
}

.post-footer {
    text-align:center;
    margin: 5rem 0 2rem 0;
}

mark {
  background: var(--yellow);
  color: black;
}

/* Form inputs */
input {
    font-family: var(--sans);
    font-size: 1.25rem !important;
}
  
input#bd-email,
input#search {
    font-size: 1rem;
    padding: .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;
}

/* Subscribe and contribute boxes */
.contribute-box,
.subscribe-form {
  border: 3px solid var(--dark-text);
  margin: 4rem 0;
  text-align: center;
}

.contribute-box {
  color: var(--dark-text);
  background: var(--yellow);
  padding: 1.5rem;
}

.contribute-box h2 {
  margin-top: 0;
}

.contribute-box p {
  padding: 1rem;
  margin: 0;
}

.subscribe-form {
    color: var(--dark-text);
    background: var(--blue);
    padding: 1rem;
  }
  
  .subscribe-form a,
  .contribute-box a {
    color: var(--dark-text);
  }
  
  .subscribe-form h2 {
    margin-top: 0;
  }
  
  .subscribe-form form {
    max-width: 80%;
    margin: 1.5rem auto;
  }
  
  @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);
    }
  }

/* Format the phone on my about page */
.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 p,
.phone-message a {
    color: black;
}
  
.phone-reply {
    background: #0a81ff;
    float: right;
}
  
.phone-reply p {
    color: white;
}
  
@media only screen and (max-width: 750px) {
    .phone-chat {
      width: 100%;
    }
    .about-img {
      width: 60%;
    }
}
  
@media (prefers-color-scheme: dark) {
    .phone-message {
      background: black;
    }
    
    .phone-message p,
    .phone-message a {
      color: var(--text);
    }
    
    .phone-reply {
      background: #0861c0;
      float: right;
    }
  
}

/* Everything else... */
.center {
  text-align: center;
}

.floatleft {
  float: left;
}

figure.floatleft {
  margin: 0;
}

hr {
    border-top: 3px solid var(--text);
    margin: 3.5rem auto;
    max-width: 60%;
}

blockquote {
    font-size: 1.5rem;
    font-style: italic;
    margin: var(--bigger-content-margin);
    padding: .4rem .8rem;
    border-left: 6px solid var(--text);
    opacity: 70%;
    display: block;
}
  
cite {
    font-size: 1rem;
    font-family: var(--sans);
    font-style: normal;
}

pre,
code,
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: none;
  border: none;
}

.ssh {
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 0;
  background: none;
  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;
}

.hidden,
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.icon {
  vertical-align: sub;
  padding-right: .25rem;
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

/** Pagination **/
.post-nav {
    max-width: 100%;
    padding: 0;
  }

.post-nav {
    display: flex;
    border-top: var(--standard-border);
    border-bottom: var(--standard-border);
    margin: 2rem auto;
}
  
  .post-nav a {
    font-weight: bold;
}
  
  .post-nav p {
    padding: 2rem 0;
}
  
  .post-nav div {
    /* flex-grow, flex-shrink, flex-basis */
    flex: 1 1 0;
}
  
  .post-nav-next {
    text-align: right;
}

  .pagination-links {
    padding: 2rem 0.5rem;
    display: block;
}

.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: bold;
}
  
ul.post-meta li {
    margin-right: 0.5rem;
    display: inline-block;
}
  
ul.post-meta li:last-child {
    margin-right: 0;
}

/* Notice boxes */
.notice,
.notice-red,
.warning,
.tip,
.info {
  background: var(--accent-bg);
  border: 3px solid var(--text);
  padding: 1rem 1rem 2rem 1rem;
  margin: var(--bigger-content-margin);
}

.notice p,
.notice-red p,
.warning p,
.tip p,
.info p {
  margin: 0;
}

.notice p:nth-child(n+2),
.notice-red p:nth-child(n+2),
.warning p:nth-child(n+2),
.tip p:nth-child(n+2),
.info p:nth-child(n+2){
  margin-top: 1rem;
}

.notice::before,
.notice-red::before,
.warning::before,
.tip::before,
.info::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: bold;
}

.notice a:hover,
.warning a:hover,
.notice-red a:hover,
.tip a:hover,
.info 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;
}

.info::before {
  content: "FYI";
	background: var(--blue);
	width: 4rem;
}

  
/* Background colours */
.yellow {
    background: var(--yellow);
}
  
.blue {
    background: var(--blue);
}
  
.pink {
    background: var(--pink);
}
  
.pink a.dark-button:hover {
    background: var(--yellow) !important;
}
  
.purple {
    background: var(--purple);
}
  
.green {
    background: var(--green);
}

.spacer {
    padding-top: 1.5rem;
}