@charset "UTF-8";
@media (any-hover: hover) {
  a:hover {
    color: white;
  }
  body.playing.realseeking:hover {
    cursor: wait;
  }
  #menu .menu-trigger:hover::before {
    content: "×";
  }
  .menu-trigger:hover {
    cursor: pointer;
  }
  .slider .arrow:hover {
    cursor: pointer;
    color: blue;
  }
  h2.playing .audio .play:hover,
.episode.playing .audio .play:hover {
    color: dimgrey;
  }
  .audio .play:hover {
    cursor: pointer;
    color: dimgrey;
  }
  .audio .sign:hover {
    color: blue;
  }
  body.playing:hover {
    cursor: pointer;
  }
  body.playing .audio .sign:hover {
    color: blue;
  }
  body.playing a:hover {
    color: blue;
  }
  body.home a:hover {
    color: blue;
  }
  .audio.loading:hover {
    cursor: wait;
  }
}
@media (min-width: 1350px) {
  .smaller {
    display: none;
  }
}
@media (max-width: 1200px) {
  :root {
    --font-size: 24px;
    --line-height: 28px;
  }
  #menu {
    max-width: 30%;
  }
  main {
    max-width: unset;
  }
}
@media (max-width: 1439px) {
  h1 {
    position: static;
    margin-bottom: 0;
  }
  #menu {
    position: relative;
    right: unset;
    text-align: unset;
    max-width: unset;
    top: unset;
    margin-bottom: var(--line-height);
  }
  #menu #language {
    bottom: unset;
    top: var(--border-distance);
  }
  body.showing-menu #works,
body.showing-menu #about {
    padding-top: calc(var(--line-height) * 4);
  }
  main {
    margin: 0;
  }
}
@media (max-width: 1439px) and (min-width: 750px) {
  .showing-menu h1 {
    position: sticky;
    z-index: 99999;
  }
}
@media (min-width: 1439px) {
  body.showing-menu h1 {
    display: none;
  }
}
@media (min-width: 750px) {
  body.showing-menu nav, body.showing-menu #work, body.showing-menu .arrow {
    display: none;
  }
  body.showing-menu #works, body.showing-menu #about {
    padding-right: 25%;
  }
  #menu #position .extra {
    display: block;
  }
}
@media (max-width: 750px) {
  :root {
    --player-height: 32px;
    --border-disantce: 16px;
  }
  html, body {
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
  body {
    padding: 0;
  }
  body.home {
    transition: none;
  }
  nav, h1, h1::before, #info {
    position: fixed;
  }
  nav, h1, h1::before, #info {
    z-index: 9999;
    margin: 0;
  }
  #menu {
    margin: 0;
  }
  nav, #menu #language {
    padding: calc(var(--border-distance) / 2) var(--border-distance);
  }
  nav {
    left: 0;
    bottom: 0;
    width: 100%;
    background: grey;
    display: flex;
    flex-wrap: wrap;
    padding-right: 5rem;
  }
  nav .directions {
    display: none;
  }
  #info, h1 {
    top: calc(var(--border-distance) / 2);
  }
  body:not(.home):not(.playing) {
    background-color: grey;
  }
  body:not(.home) h1::before {
    content: " ";
    background-color: grey;
    width: 100%;
    height: calc(var(--border-distance) + var(--line-height));
    left: 0;
    top: 0;
    z-index: -1;
  }
  h1 {
    padding-left: var(--border-distance);
  }
  #info {
    padding-right: var(--border-distance);
    right: 0;
  }
  #menu #language {
    top: unset;
    bottom: 0;
    right: 0;
    z-index: 999999;
  }
  #menu .menu-trigger::before {
    display: none;
  }
  body:not(.showing-menu) #menu .menu-trigger:not(:last-of-type) {
    padding-right: 8px;
  }
  .slider {
    transition: none;
  }
  body:not(.home):not(.playing) #about,
body:not(.home):not(.playing) #works {
    background-color: grey;
  }
  body.home.showing-menu #about,
body.home.showing-menu #works {
    background-color: rgba(100, 100, 100, 0.75);
  }
  #about,
#works,
#work {
    padding: var(--line-height) var(--border-distance);
    padding-top: calc(var(--line-height) * 6 + var(--border-distance));
  }
  main {
    padding-bottom: calc(var(--border-distance) * 2.5);
  }
  #work,
#works {
    padding-bottom: 0;
  }
  #work h2,
#works h2 {
    margin-bottom: var(--line-height);
  }
  #work h2 > .name,
#work #works:not(.nested) h3 .name,
#works h2 > .name,
#works #works:not(.nested) h3 .name {
    margin-bottom: var(--line-height);
    display: block;
  }
  #work .title,
#works .title {
    display: block;
  }
  #work .title::after,
#works .title::after {
    content: "";
  }
  #work .year::after,
#works .year::after {
    content: "";
  }
  #work .project > .project:not(.child),
#works .project > .project:not(.child) {
    margin-left: 0;
  }
  #work .project > .project h2::before,
#works .project > .project h2::before {
    margin-left: 0;
  }
  #work .project > .project h2 .name,
#works .project > .project h2 .name {
    margin-left: 1.75rem;
  }
  #work .episodes,
#works .episodes {
    margin-left: 0;
    margin-top: var(--line-height);
  }
  #work .episodes .episode::before,
#works .episodes .episode::before {
    content: "";
  }
  #work .episodes .episode,
#works .episodes .episode {
    margin-bottom: var(--line-height);
  }
  #work .text,
#works .text {
    max-width: unset;
  }
  #work .text:not(.hasPreview) .commands,
#work .text.hasPreview .commands,
#works .text:not(.hasPreview) .commands,
#works .text.hasPreview .commands {
    display: none;
  }
  #work .text.hasPreview .preview,
#works .text.hasPreview .preview {
    display: none;
  }
  #work .text.hasPreview .details .about,
#work .text.hasPreview .details .context,
#works .text.hasPreview .details .about,
#works .text.hasPreview .details .context {
    padding-bottom: var(--border-distance);
  }
  #work .text.hasPreview .full,
#works .text.hasPreview .full {
    display: block;
  }
  #work .details,
#works .details {
    margin-left: calc(var(--border-distance) * -1);
    margin-right: calc(var(--border-distance) * -1);
    max-width: unset;
  }
  #work .details .context,
#work .details .about,
#works .details .context,
#works .details .about {
    display: block;
    max-width: unset;
    padding-left: var(--border-distance);
    padding-right: var(--border-distance);
  }
  #work .details .about,
#works .details .about {
    background: white;
  }
  #work .details .context,
#works .details .context {
    background: dimgray;
  }
  /* SLIDER */
  body.home .slider .image figcaption {
    width: 100%;
    line-height: var(--line-height);
    padding: calc(var(--border-distance) / 2) var(--border-distance);
    padding-right: 5rem;
  }
  body:not(.home) .slider .arrow {
    display: none;
  }
  body:not(.home) .slider .image {
    position: static;
    height: unset;
    width: unset;
    opacity: 1;
  }
  body:not(.home) .slider .image img {
    visibility: unset;
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    display: block;
  }
  body:not(.home) .slider .image figcaption {
    position: static;
    background: white;
  }
  body:not(.home) .slider.mobile {
    display: block;
  }
  body:not(.home) .slider.mobile + .slider.desktop {
    display: none;
  }
  /* PLAYER */
  .audio {
    position: relative;
  }
  .audio .player {
    height: var(--player-height);
    width: calc(100% - 5.5rem);
    margin-left: 5.5rem;
    position: relative;
    background: dimgray;
    margin-top: calc(var(--line-height) / 4);
    margin-bottom: calc(var(--line-height) / 4);
  }
  .audio .play {
    position: absolute;
    font-size: 4.75rem;
    margin-top: -1.25rem;
  }
  .audio .currentTime {
    margin-left: 5.5rem;
  }
  .audio .progress {
    position: absolute;
    height: var(--player-height);
    z-index: 9;
    opacity: 1;
  }
  .audio .progress .follow > * {
    display: none;
  }
  .episode.playing .audio .progress:not(.move),
h2.playing .audio .progress:not(.move) {
    z-index: 999;
    display: block;
  }
  body.playing nav, body.playing h1::before {
    background: black;
  }
  body.playing .episode:not(.playing) .progress {
    opacity: 1;
  }
  /* MENU */
  body[data-openmenu=menu-works] #works.nested .project > .project,
body[data-openmenu=menu-works] #works:not(.nested) .project {
    display: none;
  }
  body[data-openmenu=menu-works] nav {
    display: none;
  }
  body.showing-menu[data-openmenu=menu-about] main::-webkit-scrollbar,
body.showing-menu[data-openmenu=menu-works] #works::-webkit-scrollbar,
body.showing-menu[data-openmenu=menu-about] #about::-webkit-scrollbar {
    display: none;
  }
  body.showing-menu[data-openmenu=menu-about] main,
body.showing-menu[data-openmenu=menu-works] #works,
body.showing-menu[data-openmenu=menu-about] #about {
    padding-top: calc(var(--line-height) * 6 + var(--border-distance));
    padding-bottom: calc(var(--line-height));
  }
  .showing-menu #menu .menu-trigger:not(.on),
.showing-menu #menu #language,
.showing-menu #menu #position {
    display: none;
  }
  .showing-menu .slider {
    display: none;
  }
  .showing-menu #menu .menu-trigger.on::before {
    display: inline-block;
    content: "←";
    padding-right: 8px;
    font-family: "LeifSN-Regular";
  }
}

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