/* Adapted from Simple CSS (MIT License): https://simplecss.org/ */
/* Set the global variables for everything. Change these to use your own fonts/colours. */
:root {

	/* Set sans-serif & mono fonts */
	--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
	--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

	/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
	--base-fontsize: 1.15rem;

	/* Major third scale progression - see https://type-scale.com/ */
	--header-scale: 1.25;

	/* Line height is set to the "Golden ratio" for optimal legibility */
	--line-height: 1.618;

	/* Default theme is dark, based on Dracula colors */
	--bg: #282a36;
	--accent-bg: #282a36;
	--text: #f8f8f2;
	--text-light: #6272a4;
	--border: #44475a;
	--accent: #bd93f9;
	--accent-light: #bd93f9;
	--code: #ff79c6;
	--preformatted: #CCC;
	--marked: #f1fa8c;
  }

  /* Dark theme */
  img, video {
	  opacity: .6;
  }

  * {
	/* Set the font globally */
	font-family: var(--sans-font);
  }

  html {
	font-size: 16px;
  }

  /* Make the body a nice central block */
  body {
	color: var(--text);
	background: var(--bg);
	font-size: var(--base-fontsize);
	line-height: var(--line-height);
	margin: 0;
  }

  /* Make the main element a nice central block */
  main {
	margin: 1rem auto 0;
	max-width: 45rem;
	padding: 0 .5rem;
  }

  /* Make the header bg full width, but the content inline with body */
  header {
	  background: var(--accent-bg);
	  border-bottom: 1px solid var(--border);
	padding: 1.5rem 15rem;
	margin-bottom: 3rem;
  }

  /* Reduces header padding on smaller screens */
  @media only screen and (max-width: 1200px) {
	header {
	  padding: 1rem;
	}

	nav {
	  text-align: center;
	}
  }

  /* Remove margins for header text */
  header h1,
  header p {
	margin: 0;
  }

  /* Fix header line height when title wraps */
  header h2 {
	text-align: center;
	line-height: 1.1;
  }

  /* Format navigation */
  nav {
	font-size: 1rem;
	line-height: 2;
	padding: 1rem 0;
  }

  nav a {
	margin: 1rem 1rem 0 0;
	border: 1px solid var(--border);
	border-radius: 5px;
	color: var(--text) !important;
	display: inline-block;
	padding: .1rem 1rem;
	text-decoration: none;
	transition: .4s;
  }

  nav a:hover {
	color: var(--accent) !important;
	border-color: var(--accent);
  }

  nav a.current:hover {
	text-decoration: none;
  }

  footer {
	margin-top: 4rem;
	padding: 2rem 1rem 1.5rem 1rem;
	color: var(--text-light);
	font-size: .9rem;
	text-align: center;
	border-top: 1px solid var(--border);
  }

  /* Format headers */
  h1 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
  }

  h2 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
  }

  h3 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
  }

  h4 {
	font-size: calc(var(--base-fontsize) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
  }

  h5 {
	font-size: var(--base-fontsize);
	margin-top: calc(var(--line-height) * 1.5rem);
  }

  h6 {
	font-size: calc(var(--base-fontsize) / var(--header-scale));
	margin-top: calc(var(--line-height) * 1.5rem);
  }

  /* Format links & buttons */
  a,
  a:visited {
	color: var(--accent);
  }

  a:hover {
	text-decoration: none;
  }

  a button,
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
	border: none;
	border-radius: 5px;
	background: var(--accent);
	font-size: 1rem;
	color: var(--bg);
	padding: .7rem .9rem;
	margin: .5rem 0;
	transition: .4s;
  }

  a button[disabled],
  button[disabled],
  input[type="submit"][disabled],
  input[type="reset"][disabled],
  input[type="button"][disabled] {
	  cursor: default;
	  opacity: .5;
	  cursor: not-allowed;
  }

  /* Set the cursor to '?' while hovering over an abbreviation */
  abbr {
	  cursor: help;
  }

  button:focus,
  button:enabled:hover,
  input[type="submit"]:focus,
  input[type="submit"]:enabled:hover,
  input[type="reset"]:focus,
  input[type="reset"]:enabled:hover,
  input[type="button"]:focus,
  input[type="button"]:enabled:hover {
	  opacity: .8;
  }

  /* Format the expanding box */
  details {
	  padding: .6rem 1rem;
	  background: var(--accent-bg);
	  border: 1px solid var(--border);
	  border-radius: 5px;
	margin-bottom: 1rem;
  }

  summary {
	  cursor: pointer;
	  font-weight: bold;
  }

  details[open] {
	  padding-bottom: .75rem;
  }

  details[open] summary {
	  margin-bottom: .5rem;
  }

  details[open]>*:last-child {
	  margin-bottom: 0;
  }

  /* Format tables */
  table {
	  border-collapse: collapse;
	  width: 100%
  }

  td,
  th {
	  border: 1px solid var(--border);
	  text-align: left;
	  padding: .5rem;
  }

  th {
	  background: var(--accent-bg);
	font-weight: bold;
  }

  tr:nth-child(even) {
	  /* Set every other cell slightly darker. Improves readability. */
	  background: var(--accent-bg);
  }

  table caption {
	  font-weight: bold;
	  margin-bottom: .5rem;
  }

  /* Lists */
  ol,
  ul {
	  padding-left: 3rem;
  }

  /* Format forms */
  textarea,
  select,
  input {
	font-size: inherit;
	font-family: inherit;
	  padding: .5rem;
	  margin-bottom: .5rem;
	color: var(--text);
	  background: var(--bg);
	  border: 1px solid var(--border);
	  border-radius: 5px;
	  box-shadow: none;
	  box-sizing: border-box;
	width: 60%;
  }

  /* Make the textarea wider than other inputs */
  textarea {
	width: 80%
  }

  /* Makes input fields wider on smaller screens */
  @media only screen and (max-width: 720px) {
	textarea,
	select,
	input {
	  width: 100%;
	}
  }

  /* Ensures the checkbox and radio inputs do not have a set width like other input fields */
  input[type="checkbox"], input[type="radio"]{
	width: auto;
  }

  /* do not show border around file selector button */
  input[type="file"] {
	border: 0;
  }

  /* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */
  fieldset {
	border: 0;
	padding: 0;
	margin: 0;
  }

  /* Misc body elements */

  hr {
	  color: var(--border);
	border-top: 1px;
	  margin: 1rem auto;
  }

  mark {
	  padding: 2px 5px;
	  border-radius: 4px;
	  background: var(--marked);
  }

  main img, main video {
	max-width: 100%;
	border-radius: 5px;
  }

  figure {
	margin: 0;
  }

  figcaption {
	font-size: .9rem;
	color: var(--text-light);
	text-align: center;
	margin-bottom: 1rem;
  }

  blockquote {
	margin: 2rem 0 2rem 2rem;
	padding: .4rem .8rem;
	  border-left: .35rem solid var(--accent);
	  opacity: .8;
	  font-style: italic;
  }

  cite {
	font-size: 0.9rem;
	color: var(--text-light);
	font-style: normal;
  }

  /* Use mono font for code like elements */
  code,
  pre,
  kbd,
  samp {
	  font-size: 1.075rem;
	  font-family: var(--mono-font);
	  color: var(--code);
  }

  kbd {
	  color: var(--preformatted);
	  border: 1px solid var(--preformatted);
	  border-bottom: 3px solid var(--preformatted);
	  border-radius: 5px;
	  padding: .1rem;
  }

  pre {
	  padding: 1rem 1.4rem;
	  max-width: 100%;
	  overflow: auto;
	  color: var(--preformatted);
	  background: var(--accent-bg);
	  border: 1px solid var(--border);
	  border-radius: 5px;
  }

  /* Fix embedded code within pre */
  pre code {
	  color: var(--preformatted);
	  background: none;
	  margin: 0;
	  padding: 0;
  }

  /* CSS for Openring */
  .webring {
    margin-top: 2rem;
	}

    .wr-articles {
      display: flex;

      @media(max-width: 640px) {
        flex-direction: column;
      }
    }

    .wr-article {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      background: #323542;
      padding: 0.5rem;

      margin: 0 0.5rem;

      @media(max-width: 640px) {
        margin: 0.5rem 0;
      }
    }

    .wr-article:first-child {
      margin-left: 0;
    }

    .wr-article:last-child {
      margin-right: 0;
    }

    .wr-summary {
      font-size: 0.8rem;
      flex: 1 1 0;
      color: rgb(235, 235, 235);
    }

    .wr-attribution {
      float: right;
      font-size: 0.8rem;
      color: rgb(192, 191, 191);
      line-height: 3;
    }

    .wr-date {
      color: rgb(192, 191, 191);
    }

    .wr-source {
      color: rgb(192, 191, 191);
	}