@import 'reset.css';
@import 'fonts.css';
html {
  font-size: 0.75vw;
}

body {
  font-family: "Space Mono", monospace;
  line-height: 1.35rem;
  padding: 2rem;
  letter-spacing: 1px;
  background-color: #f3f3f3;
}
body a:hover {
  color: blue;
}
body header {
  position: fixed;
}
body header h1 {
  font-size: 1.25vw;
  text-decoration: underline;
  margin: 0 0 1.5rem 0;
}
body header > ul {
  margin: 0 0 1.5rem 0;
}
body header nav a {
  display: block;
}
body header nav .subprojects {
  margin: 0 0 0 3rem;
}
body main {
  padding: 0 0 0 calc(100% / 6);
}
body main #txt {
  font-family: "baskervville";
  font-size: 2.5vw;
  line-height: 4rem;
  padding-right: 40px;
}
body main #txt h1 {
  font-family: "baskervvilleItalic";
  margin-top: 2rem;
}
body main .project,
body main .subproject {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 2rem 0 2rem 0;
  margin: 0 0 6rem 0;
}
body main .project .slider,
body main .subproject .slider {
  width: calc(100% / 4 * 3);
}
body main .project .legende,
body main .subproject .legende {
  width: calc(100% / 4);
  padding: 0 0 0 2rem;
}
body main .project .legende h2,
body main .subproject .legende h2 {
  text-transform: uppercase;
}
body main .project .legende h2, body main .project .legende ul,
body main .subproject .legende h2,
body main .subproject .legende ul {
  font-size: 1.5rem;
  line-height: 2rem;
}
body main .project .legende ul,
body main .subproject .legende ul {
  margin: 0 0 2rem 2rem;
}
body main .project .legende .year,
body main .subproject .legende .year {
  margin: 0 0 0 2rem;
}
body main .project .legende > a:last-of-type, body main .project .legende p,
body main .subproject .legende > a:last-of-type,
body main .subproject .legende p {
  margin: 0 0 1.5rem 0;
}
body main .project .legende > a,
body main .subproject .legende > a {
  display: block;
}
body main .project .legende.title,
body main .subproject .legende.title {
  margin: 0 0 2rem calc(100% / 4 * 3);
}
body main .project img,
body main .subproject img {
  display: block;
  margin: 0 auto 0 auto;
  image-orientation: from-image;
}
body main .project img:not(.gif),
body main .subproject img:not(.gif) {
  max-height: 85vh;
  max-width: 100%;
}
body main .project img.portrait.gif,
body main .subproject img.portrait.gif {
  height: 85vh;
}
body main .project img.landscape.gif,
body main .subproject img.landscape.gif {
  width: 100%;
}
body main .project img.visible,
body main .subproject img.visible {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 1;
}
body main .project img.hidden,
body main .subproject img.hidden {
  opacity: 0;
  display: none;
}
body main .project .slider,
body main .subproject .slider {
  padding: 0 2rem 0 0;
}
body main .project .multiple img:hover,
body main .subproject .multiple img:hover {
  cursor: e-resize;
}
body main .project .counter .prev:hover,
body main .project .counter .next:hover,
body main .subproject .counter .prev:hover,
body main .subproject .counter .next:hover {
  color: blue;
  cursor: pointer;
}

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