@media (prefers-color-scheme: dark) {
  :root {
    --color: #eee;
    --background: #181818;
    /* --accent-color: #ffdf62; */
    --accent-color: #4b80fd;
    --accent-hover-color: #FFC106;
    --media-border-color: #333;
    --avatar-border-color: #6291ff;
    --highlight-border-color: #555;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color: #111;
    --background: #f0f0f0;
    --accent-color: #005AFF;
    --accent-hover-color: #eb1818;
    --media-border-color: #ccc;
    --avatar-border-color: #000;
    --highlight-border-color: #888;
  }
}

::-moz-selection { background: #213cff; color: #fff; text-shadow: none; }
::selection { background: #213cff; color: #fff; text-shadow: none; }

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/OpenSans-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: normal;
  src: url('fonts/OpenSans-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: bold;
  src: url('fonts/OpenSans-Bold.woff') format('woff');
}

* {
	box-sizing: border-box;
}

html, body {
  color: var(--color);
  background: var(--background);;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

main {
  max-width: 680px;
  margin: 0 auto;
}
main > section {
  margin-bottom: 6em;
}

body {
  padding: 0 0 10em;
}
a {
  color: var(--accent-color);
}
a:hover {
  color: var(--accent-hover-color);
}

h1 {
  font-weight: normal;
  font-size: 1em;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header a {
  color: var(--color);
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.avatar {
  width: 22px;
  border: 1px solid var(--avatar-border-color);
  border-radius: 0.2em;
  vertical-align: middle;
  margin-right: 0.5em;
}
.links {
  font-size: 0.8em;
}
.current img {
  vertical-align: middle;
  height: 22px;
  margin-right: 0.1em;
}
.highlight {
  border: 1px solid var(--highlight-border-color);
  padding: 0.75em 1em 0 1em;
  margin: 1em 0;
  font-size: 0.9em;
}

h2 {
  font-weight: normal;
  text-align: center;
}
h3 {
  margin-bottom: 0;
  font-weight: normal;
}
h4 {
  margin: 0;
  font-size: 0.9em;
  font-weight: normal;
  font-style: italic;
}

.projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: 46%;
  margin-bottom: 2em;
}
.item img {
  max-width: 128px;
  border: 1px solid var(--media-border-color);
  border-radius: 0.2em;
}
.item img:hover {
  opacity: 0.9;
}
.item figure {
  margin: 0;
  text-align: center;
}
.item h3, .item h4 {
  text-align: center;
}
.item h3 {
  font-size: 1em;
  margin-top: 0;
}
.item-desc {
  font-size: 0.9em;
}

#writing p {
  margin-top: 0;
  font-size: 0.9em;
}
#past li {
  margin-bottom: 0.25em;
}
.previously {
  padding-left: 1em;
  text-indent: -1em;
}

#shots {
  columns: 2;
}
#shots li {
  margin-bottom: 0.5em;
}
#shots img {
  max-width: 100%;
  border: 1px solid var(--media-border-color);
}
#shots img:hover {
  opacity: 0.9;
}
.more-link {
  text-align: center;
  display: block;
}

.project-single {
  font-size: 1.2em;
  text-align: left;
  max-width: 960px;
  margin: 8em auto 12em auto;
  font-family: "Helvetica", "Arial", "sans-serif";
}
.project-single li {
  list-style-type: disc;
}
.project-single h1 {
  font-size: 6em;
  font-weight: normal;
  text-align: left;
  color: var(--color);
}
.project-single h2 {
  font-size: 1.7em;
  margin-top: 2em;
}
.project-single p {
  line-height: 1.4;
}
.project-single figure,
.project-single img {
  margin: 3em auto;
  display: block;
}
.project-single figure img,
.project-single figure video {
  margin: 0 auto;
  display: block;
  max-height: 500px;
  max-width: 100%;
}
.project-single img {
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
  max-width: 100%;
}
.project-single figcaption {
  font-style: italic;
  text-align: center;
  padding: 1em 3em;
  color: rgba(0, 0, 0, 0.5);
}
.project-single .resources {
  margin-bottom: 6em;
}

a.go-home {
  position: absolute;
  top: 2em;
  text-decoration: none;
  color: var(--color);
  font-size: 0.8em;
}

@media (min-width: 720px) {
  .double {
    display: flex;
    justify-content: space-between;
  }
  .double > section {
    width: 48%;
  }
  .double h2 {
    text-align: left;
  }
}