@charset "UTF-8";
@media screen and (max-width: 900px) {
  html {
    font-size: 16px;
  }
  h3 {
    margin-bottom: 20px;
  }
  p:not(:last-of-type) {
    margin-bottom: 20px;
  }
  p {
    max-width: 35rem;
  }
  img {
    max-width: 100%;
  }
  iframe {
    width: 100vw;
    height: 56.25vw;
    margin-bottom: 1rem;
  }
  body {
    padding: 100px 1rem 20px 1rem;
    font-size: 1rem;
    line-height: 20px;
  }
  body nav {
    margin-bottom: 20px;
  }
  body nav a {
    display: block;
  }
  body nav a.current {
    color: #000;
  }
  body > header > div {
    position: fixed;
    top: 0;
    padding: 0.5rem 1rem 0.5rem 1rem;
    left: 0;
    background: gainsboro;
    width: 100vw;
    z-index: 2;
    display: flex;
    justify-content: space-between;
  }
  body > header #arrow {
    font-size: 1.2rem;
    display: inline-block;
    width: 1.2rem;
  }
  body > header #arrow .dashingdash {
    display: block;
    position: absolute;
    margin-right: 1rem;
    right: 0;
  }
  body > header #arrow .dashingdash::after {
    content: "—";
  }
  body > header #arrow .dashingdash:nth-child(1) {
    top: 0.1rem;
  }
  body > header #arrow .dashingdash:nth-child(2) {
    top: 0.421rem;
    margin-right: 1rem;
  }
  body > header #arrow .dashingdash:nth-child(3) {
    top: 0.75rem;
  }
  body > header #languages {
    text-transform: uppercase;
    font-size: 0.9rem;
  }
  body > header h1, body > header #languages {
    display: inline-block;
  }
  body > header #languages a, body > header #languages span {
    display: inline-block;
  }
  body > header #languages > *:nth-child(1), body > header #languages *:nth-child(2) {
    margin-right: 20px;
  }
  body > header #arrow:hover {
    color: blue;
    cursor: pointer;
  }
  body > header nav {
    display: none;
  }
  body > header.nav h2 {
    opacity: 0;
  }
  body > header.nav nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: gainsboro;
    display: block;
    padding: 2.8rem 1rem;
    padding-top: 100px;
    z-index: 1;
    overflow: scroll;
  }
  body > header.nav nav > a.subpage {
    margin-left: 20px;
  }
  body > header.nav nav > a.subpage::before {
    content: "*";
    display: inline-block;
    width: 0.75rem;
  }
  body > header.nav #arrow .dashingdash:nth-child(2) {
    display: none;
  }
  body > header.nav #arrow .dashingdash:nth-child(1),
body > header.nav #arrow .dashingdash:nth-child(3) {
    top: 0.5rem;
  }
  body > header.nav #arrow .dashingdash:nth-child(1) {
    transform: rotate(45deg);
    right: -0.1rem;
  }
  body > header.nav #arrow .dashingdash:nth-child(3) {
    transform: rotate(-45deg);
  }
  body[data-current=home] header h2 {
    opacity: 0;
  }
  main.home table {
    max-width: 35rem;
  }
  main.home h3 {
    margin-top: 60px;
  }
  main.home .contact,
main.home .text {
    margin-bottom: 20px;
  }
  main.home table, main.home tr {
    display: block;
  }
  main.home td:not(:last-of-type, :first-of-type) {
    display: inline;
  }
  main.home td {
    display: block;
  }
  main.home td:nth-child(2)::after {
    content: ", ";
  }
  main.home tr {
    margin-bottom: 20px;
  }
  main.home tr:not(.upcoming) td {
    color: grey;
  }
  main.projects .project,
main.blog .project {
    color: #000;
  }
  main.projects > a:not(:last-of-type) figure,
main.blog > a:not(:last-of-type) figure {
    margin-bottom: 30px;
  }
  main.projects figure img.centrale,
main.blog figure img.centrale {
    display: block;
  }
  main.projects figure .images,
main.blog figure .images {
    margin-bottom: 10px;
  }
  main.projects figure .images .otherimages,
main.blog figure .images .otherimages {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    margin-top: -60px;
  }
  main.projects figure .images .otherimages img,
main.blog figure .images .otherimages img {
    display: inline-block;
  }
  body[data-current=blog],
body[data-current=projects],
body[data-current=library] {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 55px;
    margin-bottom: 0;
  }
  body[data-current=blog] figcaption,
body[data-current=projects] figcaption,
body[data-current=library] figcaption {
    margin-left: 1rem;
  }
  main.blog {
    padding: 0;
  }
  main.blog figure {
    margin-bottom: 20px;
  }
  main.blog figure picture {
    width: 100%;
  }
  main.blog figure picture img {
    width: 100%;
  }
  main.blog figure .images {
    position: relative;
  }
  main.blog figure .images .otherimages {
    display: flex;
    width: 100%;
    margin-top: 0;
    position: absolute;
  }
  main.blog figure .images .otherimages img {
    height: 100px;
  }
  main.blog figure .images .two {
    bottom: 0;
    justify-content: right;
  }
  main.in_progress,
main.project {
    position: relative;
  }
  main.in_progress .back,
main.project .back {
    position: absolute;
    left: 1rem;
    bottom: -40px;
  }
  main.in_progress .caption,
main.project .caption {
    margin-bottom: 20px;
  }
  main.in_progress img,
main.project img {
    width: 100%;
  }
  main.in_progress .caption,
main.in_progress .info,
main.project .caption,
main.project .info {
    padding: 0 1rem;
  }
  main.in_progress figure:not(:last-of-type) img,
main.project figure:not(:last-of-type) img {
    display: block;
    margin-bottom: 20px;
    width: 100%;
  }
  main.in_progress figure:last-of-type img,
main.project figure:last-of-type img {
    margin-bottom: 10px;
  }
  main.in_progress .text:not(:last-of-type),
main.in_progress .links:not(:last-of-type),
main.project .text:not(:last-of-type),
main.project .links:not(:last-of-type) {
    margin-bottom: 20px;
  }
  main.library.searching h3 {
    display: none;
  }
  main.library.searching #close::after {
    content: "reset";
  }
  main.library.searching.none::before {
    content: "No results";
    padding-left: 1rem;
  }
  main.library #search {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    width: 12rem;
    padding: 2px 3px;
  }
  main.library #close {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
  }
  main.library #close::after {
    content: "search";
    color: blue;
  }
  main.library .resource.hidden {
    display: none;
  }
  main.library h3,
main.library .wrap .resource {
    padding: 0 20px;
  }
  main.library .month {
    margin-bottom: 20px;
  }
  main.library .wrap .resource {
    padding: 1px 5px 1px 20px;
  }
  main.library .wrap:nth-child(odd) .resource {
    background: gainsboro;
  }
  main.library .wrap:nth-child(even) .resource {
    background: whitesmoke;
  }
  main.about h3 {
    margin-top: 20px;
  }
  main.about .part {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 600px) {
  main.blog figure .images .otherimages img {
    height: 80px;
  }
}