@import url("/css/reset.css");
@import "https://fonts.googleapis.com/css?family=Fira+Mono|Fira+Sans:400,700";
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  font-size: 36px;
  font-family: "Fira Sans", sans-serif;
  line-height: 1.3333333333;
  background-image: radial-gradient(#fff, #ddd);
  width: 100%;
  height: 100%;
  color: hsl(0, 0%, 21%);
}

h2 {
  font-size: 1.3333333333rem;
  font-weight: bold;
  margin-bottom: 1em;
  padding: 0 0.0563135147em 0.31640625em;
  border-bottom: 1px solid gray;
}

h3 {
  margin: 1.3333333333em 0 1em 0;
  font-weight: bold;
}

a:link, a:visited {
  color: hsl(0, 0%, 21%);
}
a:hover {
  color: hsl(0, 0%, 31%);
}
a:active {
  color: hsl(0, 0%, 41%);
}

.strike {
  text-decoration: line-through;
  opacity: 0.75;
}

ul {
  padding-left: 1.7777777778em;
  list-style-type: circle;
  margin-bottom: 0.75rem;
}

strong {
  font-weight: bold;
}

code {
  font-family: "Fira Mono", monospace;
  background-color: hsla(0, 0%, 90%, 0.75);
  border-radius: 0.0563135147em;
  padding: 0 0.1779785156em;
}

pre code {
  background-color: transparent;
  padding: 0;
}

.step {
  width: 31.5692917934rem;
  height: 17.7577266338rem;
  padding: 1rem;
  box-sizing: border-box;
  transition: 200ms opacity ease;
}
.step.future {
  opacity: 0.1;
}
.step.future.umd, .step.future.implementation {
  opacity: 0;
}
.step.present ~ .step.past {
  opacity: 0;
}
.step.primary {
  border: 0.2373046875rem dashed;
}
.step.primary.script-tags {
  border-color: hsl(1, 87%, 65%);
}
.step.primary.commonjs {
  border-color: hsl(49, 100%, 47%);
}
.step.primary.amd {
  border-color: hsl(197, 68%, 45%);
}
.step.primary.umd {
  border-color: hsl(127, 45%, 51%);
}
.step.primary.es6 {
  border-color: hsl(287, 31%, 50%);
}
.step.implementation {
  background-color: hsla(0, 0%, 100%, 0.95);
  border-left: 1em solid;
}
.step.implementation.script-tags {
  border-left-color: hsl(1, 87%, 65%);
}
.step.implementation.commonjs {
  border-left-color: hsl(49, 100%, 47%);
}
.step.implementation.amd {
  border-left-color: hsl(197, 68%, 45%);
}
.step.implementation.umd {
  border-left-color: hsl(127, 45%, 51%);
}
.step.implementation.es6 {
  border-left-color: hsl(287, 31%, 50%);
}
.step .snippet {
  margin-bottom: 0.75rem;
  padding: 0.31640625em;
  font-size: 0.75em;
  border: 1px solid hsl(0, 0%, 21%);
  position: relative;
}
.step .snippet .title {
  font-size: 0.75em;
  height: 1.7777777778em;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.31640625em;
  background-color: hsl(0, 0%, 21%);
  color: white;
}
.step .snippet .title::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -1.7777777778em;
  height: 0;
  width: 0;
  border-top: 0 solid transparent;
  border-right: 1.7777777778em solid hsl(0, 0%, 21%);
  border-bottom: 1.7777777778em solid transparent;
}

#title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#title h1 {
  font-size: 1.7777777778rem;
}

#script-tags {
  border-color: hsl(1, 87%, 65%);
}

#umd .content {
  width: 66%;
  margin-left: 33%;
}

/*# sourceMappingURL=styles.css.map */