/*

- add years to projects?/everything?

*/



/* Core Stuff */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    margin: 0;
    padding: 0;
}
/* type */
body {
  font-size: 1em;
  line-height: 1.25em;
  font-family: serif;
  margin: 0;
  padding: 0;
}
a {
  color: black;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  -moz-transition:    color 0.2s;
  -ms-transition:     color 0.2s;
  -o-transition:      color 0.2s;
  transition:         color 0.2s;
}
a:hover{
  color: yellow;
}
/* styling naviation */
.navigation-container {
  border-bottom: 1px solid black;
  padding-bottom: 0.3em;
  margin-bottom: 1px;
}
.navigation li {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.55em;
}
.navigation.name {
  font-style: italic;
}
.navigation.title {
  margin-top: 0.55em;
  /* font-style: italic; */
}
.navigation.works {
  margin: 0.55em 0 0 0;;
}
.navigation li.selected a{
  color: DarkGrey;
  /* color: black; */
}
.navigation.works li.selected:before {
  color: DarkGrey;
}
.navigation sup {
  font-family: sans-serif;
  color: DarkGrey;
}
.navigation.inquiries {
  margin-top: 0.55em;
}
.navigation.inquiries li {
  padding-left: 0;
}
/* navigation toggle */
.navigation.content {
  display: none;
}
.navigation.title::after{
  content: " +";
}
.navigation.title.navigation-toggle::after{
  content: " –";
}
/* styling content */
figure {
  margin: 0;
}
.wrapper {
  padding: 0.55em;
}
.content-wrapper {
  /* text-align: center; */
  padding-top: 0.55em;
}
.content-wrapper li {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.55em;
}
.content-wrapper p:last-child {
  margin-bottom: 0;
}
.content-item.container {
  margin-bottom: 0.5em;
}
.content-wrapper img{
  display: block;
  width: 100%;
  height: auto;
}
.text-paragraphs {
  /* max-width: 50em; */
}


/* desktop */
@media (min-width: 800px) {
  .wrapper {
    display: flex;
    flex-direction:row;
  }
  .navigation-wrapper {
    width: 40%;
    max-width: 15em;
  }
  .navigation-container {
    position: fixed;
    width: 40%;
    max-width: 15em;
    max-height: 100vh;
    padding-bottom: 1em;
    border-bottom: none;
    overflow-y: scroll;
    -ms-overflow-style: none;  // IE 10+
    scrollbar-width: none;  // Firefox
  }
  .navigation-container::-webkit-scrollbar {
      display: none;  // Safari and Chrome
  }
  .navigation.works li:before{
    left: 0em;
  }
  .content-wrapper {
    flex: 1;
    text-align: left;
    padding: 0 0 0 4em;
    max-width: 60em;
  }

}