/* ruin.dev stylesheet. in need of generalization, me thinks */

:root {
  --red: rgb(255, 82, 82);
  --orange:rgb(255, 202, 120);
  --yellow:rgb(255, 245, 114);
  --green:rgb(190, 251, 125);
  --blue: rgb(15, 165, 255);
  --light: #999;
  --main: var(--red);
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  line-height: 1.5;
  font-family: Helvetica, Arial, sans-serif;
  /*font-family: Fira Sans;*/
  color: #a8a095;
  font-weight: 300;
  font-size: 16px;
  /*background-color: #222222;*/
  /*background-color: #292a2d;*/
  background-color: #222222;
}

ul {
  padding-left: 15px;
  list-style-type: circle;
}

header ul {
  padding-left: 0;
  font-size: 0.9rem;
  list-style: none;
}
[left] {
  text-align: left;
}
[right] {
  text-align: right;
}

#summary {
  padding: 0 3rem;
}
todo {
  display: inline;
  color: red;
}
todo::before {
  content: 'TODO: ';
}
a {
  /*color: #e8e6e3;*/
  color: #999;
}
.hide-content {
  display:none;
}

.frames {
  display: flex;
}
.frames > .frame {
  flex: 1;
  padding: 0 3rem;
}

header h1 {
  padding-right: 0.5rem;
}
h1 .subtitle {
  font-size: 1.1rem;
  font-weight: 300;
  display: inline;
}

header.frames > .frame {
  padding: 0;
}

header.frames {
  padding: 0 3rem;
}

header [right] {
  flex: 0 1 auto;
}
header ul.contact {
  margin: 0;
}

h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 300;
}

h2 {
  font-size: 1.2rem;
  font-weight: 300;
  border-bottom: 2px solid var(--main);
}

h3 {
  font-weight: 400;
  font-size: 1.4rem;
}

section + h2 {
  margin-top: 3rem;
}

section p, section ul {
  clear: both;
}

.employment {
  position: relative;
}
.employment .employer {
  color: var(--main);
}
.employment .employer::before {
  content: '@';
}
.employment time {
  font-size: 0.9rem;
  color: var(--light);
  margin-top: 0.3rem;
  float: right;
}

section.employment.legacy {
  display: none;
}

body[show-legacy] section.employment.legacy,
section.employment.legacy[show-legacy] {
  display: block;
}
.projects section {
  position: relative;
}
.projects .employer {
  color: var(--main);
}

.projects section:not(:first-of-type) h3 {
  margin-top: 3rem;
}

.projects h3 a {
  color: var(--main);
}
.projects h3 {
  margin-bottom: 0;
}

.projects .role {
  font-size: 1rem;
  color: #a8a095;
  font-weight: 300;
display: block;
}
.projects .role::before { content: "["; }
.projects .role::after { content: "]"; }
.projects .technical-details {
  display: none;
}
.projects .project-stats {
  font-size: 1rem;
  font-weight: 400;
  float: right;
  margin-top: 0.4rem;
}
.projects .project-stats,
.projects .project-stats a {
  color: var(--main);
}

.speaking .event a{
  color: var(--main);
}
.speaking .event::before {
  content: '@';
  color: var(--main);
}

.skills span {
  text-transform: lowercase;
  padding: 0 0.2rem;
}

.skills span.category {
  color: var(--main);
  font-weight: 400;
}
.skills span.category::after{
  content: ':';
}
@media (max-width:800px) {
  header .subtitle {
    display: block;
  }
  .frames:not(header) {
    display: block;
  }
  .projects h2:first-of-type {
    margin-top: 3rem;
  }
}

@media (max-width:600px) {
  .frames {
    display: block;
  }
  header [right] {
    text-align: left;
  }
}

.phone {
  display: none;
}

body[live] .phone {
  display: list-item;
}