/*-----------DEBUG-----------*/

/* div {
  border: solid 1px #ff0404;
} */

/*-----------FONTS-----------*/

@font-face {
  font-family: "h1";
  src: url("../../fonts/Obviously-Extended_Bold.woff");
}

@font-face {
  font-family: "yitta";
  src: url("../../fonts/Obviously-Extended_Semibold.woff");
}

@font-face {
  font-family: "navigation";
  src: url("../../fonts/Obviously-Wide_Medium.woff");
}

@font-face {
  font-family: "regular";
  src: url("../../fonts/Obviously-Wide.woff");
}

@font-face {
  font-family: "header";
  src: url("../../fonts/Obviously-Extended_Semibold.woff");
}

@font-face {
  font-family: "header2";
  src: url("../../fonts/Obviously-Wide_Semibold.woff");
}


@font-face {
  font-family: "light";
  src: url("../../fonts/Obviously-Wide_Light.woff");
}

/*-----------GENERAL-----------*/
html {
	box-sizing: border-box;
	font-weight: 400;
	padding: 0;
	margin: 0;
}

*,:before,:after {
	box-sizing: inherit;
	font-weight: inherit;
}

body {
	font-family: "regular";
	color: #000;
  float: left;
  max-width: 40em;
}

p {
	font-size: 1em;
	line-height: 1.8em;
	margin-bottom: 0;
	margin-top: 0;
	padding: .3em .5em .3em 0em;;
  color: #000;
}

/* .br {
  display: block;
  padding: 0;
  margin-bottom: -1em;
} */

#body-content p strong, strong {
  font-family: "header";
  font-weight: normal;
}

p a {
  color: #00e5bb;
}

p a:hover, p a:visited:hover {
  color: #fff;
  background-color: #00ffd0;
  text-decoration: none;
}

p a:visited {
  color: #00e5bb;
}

h1, h2 {
  font-family: "header", sans-serif;
  margin: 0em;
}

h4 {
  font-family: "header", sans-serif;
  margin: 0em;
}

h3 {
  font-family: "header2", sans-serif;
  margin: 0em;
}

h1 {
	font-size: 2em;
	margin: 0;
	padding: .3em .3em  .4em  .1em;
}

h2 {
  font-size: 1.5em;
}

h3 {
	font-size: 1.3rem;
	margin: 0 0 .2em 0;
	padding: 0;
}

.timestamp {
	font-size: 1.2rem;
	margin: 0 0 .5em 0;
	padding: 0;
}

a {
	display: inline;
	text-decoration: none;
	color: #00ffd0;
}

a:hover {
	text-decoration: underline;
}

a.external:after {
	content: ">";
  padding-left: .2em;
	color: #777;
}

.neutral-link {
	text-decoration: none;
	font-weight: 400;
}

.neutral-link:hover {
	font-weight: 400;
}

::-moz-selection {
	color: #000;
	background: #eee;
}

::selection {
	color: #000;
	background: #eee;
}

::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-thumb {
	background-color: #bbb;
}

/*-----------MEDIA-----------*/
.media {
	width: 100%;
}

.single {
  margin-bottom: 1em;
}

.sc_player {
	background-color: #000;
    margin-bottom: .2em;
    padding: .3em .5em .2em .2em;
}

.sc_player iframe {
    padding: 0em .4em;
}

audio {
  margin: .5em 0em 0em 0em;
}

img.small {
  max-width: 70%;
}


/*-----------HEADER-----------*/
#header {
	position: relative;
	max-width: 900px;
  padding-left: 1em;
}

.header-image {
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.header-title-container {
	position: absolute;
	left: 20px;
	bottom: 20px;
	font-size: 13px;
	font-family: 'Source Code Pro';
}

h1.site-name {
  font-family: "yitta";
  text-transform: uppercase;
  font-size: 2.5em;
  padding-top: 0em;
}

.site-name {
  letter-spacing: -1px;
}

.site-name a:link {
  color: #000;
  text-decoration: none;
}

.site-name a:visited {
  color: #000;
  text-decoration: none;
}

.site-name a:hover {
  color: #fff;
  background: #000;
  text-decoration: none;
}

/*-----------BODY & TEXT-----------*/
#body {
	position: relative;
	width: 100%;
	z-index: 1;
  margin-bottom: 6em;
}

@supports (font-variant-numeric: diagonal-fractions) {
  .#body-content {
      font-feature-settings: frac;
      font-variant-numeric: diagonal-fractions;
  }
}

#body-content {
	max-width: 900px;
	margin: auto;
  padding-left: 2.3em;
  /* -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac"; */
}

#title {
	max-width: 900px;
  padding: 0 0 0 2.3em;
  margin: 0 0 0em 0;
}

#title h1 {
	padding: 0;
	font-family: "h1";
}

#content {
	padding-top: 40px;
}

.divider {
	width: 100%;
	height: 1px;
	margin-bottom: 40px;
}

.text-image {
	margin: 0px;
}

.text-image-annotated {
	width: calc(100% - 80px);
	border-radius: 2px;
	margin: 0 40px 5px 40px;
}

.annotation {
	display: block;
	padding: 0 40px 40px 40px;
}

.audio-annotation {
  display: block;
  font-size: .75em;
  font-style: italic;
  margin: 0em 0em 1.5em 0em;
  padding: 0;
}

.note {
	width: 50em;
	padding: 0;
	margin: .5em 0em 1em 0em;
	font-family: "Source Code Pro";
	font-size: 14px;
}

.note a {
  /* font-weight: 700; */
  color: #00dab2;
}

.quote {
	width: calc(100% - 80px);
	margin: 0 40px 40px 40px;
	padding: 0 40px 0 40px;
	font-family: "Source Code Pro";
	font-style: italic;
	font-size: 20px;
	line-height: 36px;
}

.path {
	text-transform: lowercase;
}

/*-----------LISTS-----------*/
ul.post-list {
  font-size: 1.1em;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.post-list a:visited {
  color: #9c9c9c;
}

ul.post-list a:hover {
  color: #fff;
}

.condensed-list,
.spacious-list {
	width: 100%;
	padding: 0 0px 0px 0px;
	margin: 0 0 1em 0;
	list-style-type: none;
	line-height: 24px;
}

.condensed-list {
  font-size: 1.5rem;
	font-weight: 400;
	color: rgb(64, 64, 64);
	font-family: 'navigation', sans-serif, "Sans Serif", Icons /*!System*/;
	font-style: normal;
	line-height: 1.7rem;
}

.condensed-list li,
.spacious-list li {
	display: list-item;
}

.spacious-list {
  margin: .5em 0em 0em 0em;
}

.spacious-list li {
  font-family: 'navigation', sans-serif, "Sans Serif", Icons /*!System*/;
  font-size: 1.5em;
	padding-bottom: .5em;
}

.horizontal-list {
  width: 100%;
  display: flex;
  padding: 0;
}

.horizontal-list li{
    float: left;
    margin-right: 2em;
}

.horizontal-list :first-child{
    list-style-type: none;
}

.condensed-list li a:link {
	font-weight: 400;
  color: #ffc024;
}

.condensed-list li a:visited {
  color: #00ffd0;
}

.condensed-list li a:hover, a:hover  {
  color: #fff;
  background-color: #00ffd0;
  text-decoration: none;
}

.back-link {
  margin: 0em 0em 1em 2.3em;
  line-height: 1.7em;
}

.back-link:visited {
  color: #000;
}

/*-----------FOOTER-----------*/
#footer {
  background-color: rgba(255, 255, 255, 0.88);
	width: 100%;
	max-width: 900px;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 1em 0 2em 2.3em;
	margin: 0em 0em;
  z-index: 1;
}

#footer p {
  float: left;
  font-family: "Source Code Pro";
  font-size: .8em;
  color: #000;
  padding: 0;
  margin: 0;
  width: 40em;
  line-height: 1.3em;
}

#footer p span {
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: .1em;
}

.copyright {
  float: left;
}

a.icon:hover {
  background-color: transparent;
}

#footer img {
  float: left;
  height: 42px;
  padding: 0;
  margin: .25em .30em 0em 0em;
}

/*-----------MEDIA-----------*/
@media (max-width: 960px) {
	.header-content {
		padding: 40px;
	}
}

@media (max-width: 820px) {
	.condensed-list {
		columns: 3;
		-webkit-columns: 3;
		-moz-columns: 3;
	}
}

@media (max-width: 540px) {
	.condensed-list {
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
	}

	.spacious-list {
		columns: 1;
		-webkit-columns: 1;
		-moz-columns: 1;
	}
}