:root{
  --color-bg:#000000;
  --color-text:#ffffff;
  --color-loading:rgba(255,255,255,0.03);
  --site-padding:calc(0.5vw + 15px);
  --nav-padding-top:15px;
  --media-padding:calc(0.25vw + 10px);
  --sidebar-width:calc(12vw + 130px);
  --font-size:calc(0.08vw + 14px);
  --font-size-title: calc(var(--font-size) * 1.7 + 1vw);
  --bezier:cubic-bezier(0.75, 0, 0.25, 1);
  --border-radius:3px;
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --vh: calc(100vh + (var(--safe-area-inset-top) + var(--safe-area-inset-bottom)));
  --image-padding: calc(15vw - 30px);
}

*, *::before, *::after {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  outline: none;
  list-style: none;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  vertical-align: top;
  cursor: default;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  border-radius: 0;
  transition: inherit;
  position: relative;
}

html,
body{
  width:100vw;
  overflow-x: hidden;
}

body{
  font-family:'AA Olymp',Georgia,serif;
  font-weight:normal;
  font-style:normal;
  font-feature-settings: 'liga','dlig';
  font-size:var(--font-size);
  line-height:1.15;
  background:var(--color-bg);
  color:var(--color-text);
}

a,
.about-show,
.about-hide,
.credits-toggle,
.project-link{
  cursor: pointer;
  transition: opacity 0.5s var(--bezier);
}

@media(min-width:800px){

a:hover,
.about-show:hover,
.about-hide:hover,
.credits-toggle:hover,
.project-link:hover{
  opacity:0.7;
  transition: opacity 0.3s var(--bezier);
}

}


.title,
.nav,
.nav-links{
  position:fixed;
  padding:calc(var(--site-padding) * 0.9) var(--site-padding);
  z-index:10;
}

.title{
  left:0;
  top:0;
}

.nav{
  left:0;
  top:100px;
  bottom:100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  line-height:1.3;
  transition: transform 0.5s var(--bezier), opacity 0.5s var(--bezier);
}

.nav-links{
  right:0;
  top:0;
  z-index:20;
}

.title,
.nav-links{
  transition: transform 0.3s var(--bezier);
}

.nav-hidden .title,
.nav-hidden .nav-links{
  transform: translateY(calc(var(--site-padding) * -1.5 - var(--font-size)));
}

h2{
  display:none;
}

.nav li{
  transition: transform 0.3s var(--bezier);
}

.nav li.active{
  font-style:italic;
  transform:translateX(var(--site-padding));
}

.nav-links{
  z-index:11;
}

.nav-links .links>*:not(:last-child){
  margin-right:calc(var(--site-padding) * 0.5);
}

.about {
  position:fixed;
  z-index:9;
  left:0;
  right:0;
  top:calc(var(--site-padding) * 3);
  top:0;
  display: none;
  opacity: 0;
  width:calc(100vw - 220px);
  padding:var(--site-padding);
  transition: opacity 0.5s var(--bezier);
}

.hide-projects,
.about-active{
  overflow: hidden !important;
}

.hide-projects .projects{
  opacity: 0;
  pointer-events:none;
}

.hide-projects .nav{
  transform: translateX(-350px);
  opacity: 0;
  pointer-events:none;
}

.hide-projects .about{
  display: block;
}

.about-active .about{
  opacity: 1;
}

.about-hide{
  display: none;
}

h1>*{
  display:block;
  transition: all 0.3s var(--bezier);
}

.hide-projects h1>*{
  font-size:var(--font-size-title);
  transition: all 0.5s var(--bezier);
}

.about p{
  font-size:var(--font-size-title);
  line-height:1.05;
}

.about p:not(:last-child){
  margin-bottom:calc(var(--font-size) * 1.5);
}

.about p span{
  opacity:0;
}

.project{
  padding:var(--site-padding) 0 0 0;
}

.project:not(:last-child){
  margin-bottom:calc(var(--site-padding) * 7);
}

.project-media{
  margin-bottom:-2px;
}

.project-media li{
  display: block;
  border-radius:var(--border-radius);
  width:100%;
  padding:0 var(--image-padding);
}

.project-media li:not(:last-child){
  margin-bottom:var(--media-padding);
}

.project-media li.project-media-full{
  padding:0;
  border-radius:0;
}

.project-media li.project-media-center{
  padding:0 calc(var(--image-padding) * 2);
}

.project-media img,
.project-media video{
  width:calc(100% + 2px);
  margin-left:-1px;
  height:auto;
  border-radius:var(--border-radius);
  transition: opacity 0.7s var(--bezier);
}

.project-media-full img,
.project-media-full video{
  border-radius:0;
}

.project-media-grid{
  display: flex;
  flex-direction:row;
  grid-gap:var(--media-padding) calc(var(--media-padding) + 2px);
  width:100%;
}

.project-media-grid>*{
  flex-grow:1;
}

.project-media-grid img,
.project-media-grid video{
  object-fit:cover;
  flex-grow:1;
}

.project-media-full .project-media-grid>*:first-child,
.project-media-full .project-media-grid>*:first-child,
.project-media-full .project-media-grid>*:first-child img,
.project-media-full .project-media-grid>*:first-child video{
  border-top-right-radius:var(--border-radius);
  border-bottom-right-radius:var(--border-radius);
}

.project-media-full .project-media-grid>*:last-child,
.project-media-full .project-media-grid>*:last-child,
.project-media-full .project-media-grid>*:last-child img,
.project-media-full .project-media-grid>*:last-child video{
  border-top-left-radius:var(--border-radius);
  border-bottom-left-radius:var(--border-radius);
}

.project-media-full-top .project:first-child .project-media li:first-child{
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.project-media-full-top .project:first-child .project-media li:first-child img,
.project-media-full-top .project:first-child .project-media li:first-child video{
  border-bottom-left-radius:var(--border-radius);
  border-bottom-right-radius:var(--border-radius);
}

.project-info{
  padding:calc(var(--site-padding) * 0.5) 0;
}

.project-info p,
.project-description,
.project-links,
.credits{
  font-family:-apple-system,BlinkMacSystemFont,Helvetica,sans-serif;;
  font-size:11px;
  line-height:1.2;
  letter-spacing:0.3px;
}

.project-details {
  padding:var(--site-padding) calc(var(--image-padding) * 1.5);
  text-align: center;
}

.project-details li{
  display: inline-block;
  padding:0 calc(var(--media-padding) * 0.5);
}

.project-details>*,
.project-details>*>p:not(:last-child){
  margin-bottom:9px;
}

.credits{
  display:none;
}

video,
img{
  pointer-events:none;
}

.projects{
  padding:calc(var(--site-padding) + var(--font-size)) 0 0 0;
  transition: opacity 0.5s var(--bezier);
}

.project-media-full-top,
.project-media-full-top .project:first-child{
  padding-top:0;
}

img:not([src]) {
  opacity: 0;
}

.cat{
  width:50px;
  transform:translate(-20px,-20px);
  z-index:100;
}


@media(max-width:800px){

  h2{
    display:block;
  }

  .nav{
    display: none;
  }

  .about{
    width:100vw;
  }

  .about,
  .hide-projects h1>*{
    transform:translateY(calc(var(--site-padding) * 1 + var(--font-size)))
  }

}

::-moz-selection {
  color: var(--color-bg);
  background: rgba(255,255,255,0.99);
}

::selection {
  color: var(--color-bg);
  background: rgba(255,255,255,0.99);
}


@font-face {
  	font-family: 'AA Olymp';
    src: url('fonts/AA-Olymp-Book.woff') format('woff'),
         url('fonts/AA-Olymp-Book.woff2') format('woff2');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'AA Olymp';
    src: url('fonts/AA-Olymp-Book-Italic.woff') format('woff'),
         url('fonts/AA-Olymp-Book-Italic.woff2') format('woff2');
     font-weight:normal;
     font-style:italic;
}