/* inconsolata-regular - latin */
@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inconsolata-v31-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/inconsolata-v31-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/inconsolata-v31-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/inconsolata-v31-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/inconsolata-v31-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/inconsolata-v31-latin-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
  }
/* inconsolata-700 - latin */
@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inconsolata-v31-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/inconsolata-v31-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/inconsolata-v31-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/inconsolata-v31-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/inconsolata-v31-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/inconsolata-v31-latin-700.svg#Inconsolata') format('svg'); /* Legacy iOS */
  }
/* playfair-display-regular - latin */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/playfair-display-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/playfair-display-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/playfair-display-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/playfair-display-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/playfair-display-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/playfair-display-v30-latin-regular.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  }
/* playfair-display-700 - latin */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/playfair-display-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/playfair-display-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/playfair-display-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/playfair-display-v30-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/playfair-display-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/playfair-display-v30-latin-700.svg#PlayfairDisplay') format('svg'); /* Legacy iOS */
  }

/* Import */
@import url(normalize.css);

/* Fixes */
html, body {width: 100%; height: 100%; margin: 0; padding: 0; font-size: 1em; background: #FFFDFF; background-color: #FFFDFF;}
::selection {color: white; background-color: #0000ff; background-color: var(--select-bg);}
.marked, .marked a {background-color: #0000ff; color: #FFFDFF;}
* {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0 }
.clearfix:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px;}

h2 {font-family: 'Playfair Display'; font-size: 9em; text-align: left; margin: 0; padding: 0; color:#000; font-weight: 700;}
p {font-family: 'Inconsolata', sans-serif; font-weight: 400; font-size: 1.1em; margin: 0; line-height: 1.7em;}
.bold {font-family: 'Inconsolata'; text-transform: uppercase; font-weight: 700; font-size: 1.3em; letter-spacing: 1.5px;}
a {text-decoration: none; border-bottom: 1px solid; -webkit-transition-duration: 0.4s; transition-duration: 0.4s;}
a:hover{text-decoration: none;}
ul {font-family: 'Inconsolata', sans-serif; font-weight: 400; font-size: 1.1em; margin: 0 0 12px 0; line-height: 1.7em; list-style: none; margin: 1em 0 2em 0; padding-left: 0;}
li {padding-left: 1.2em; text-indent: -1.2em;}
li:before {content: "→"; padding-right: 10px;}

.button {border: none; padding: 16px 24px; text-align: center; text-decoration: none; font-size: 1.1em; font-family: 'Inconsolata', sans-serif; font-weight: 400; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; background-color: white;}
.button-black {color: #000; border: 1px solid #000; background: #FFFDFF;}
.button-black:hover {color: #FFFDFF; border: 1px solid #000; background: #000;}
.button-white {color: #FFFDFF; border: 1px solid #FFFDFF; background: #000;}
.button-white:hover {color: #000; border: 1px solid #FFFDFF; background: #FFFDFF;}

#header {width: auto; padding: 4% 0 0 10%;  margin: 0; top: 0; position: fixed;}
#wrapper {margin: 0 auto; isolation: isolate;}
#container {width: 60%; margin: 0 0 0 5%;}
#container-black {width: 65%; margin: 0 0 0 18%;}
#project {width: 100%; margin: 0 0 25% 0; clear: both; overflow: auto;}
#no-bottom-margin {margin-bottom: 0;}
#image img {width: 100%; margin: 0 0 5% 0;}
#film video {width: 100%; margin: 0 0 5% 0;}
video {width: 100%; height: 100%;}
#vita {width: 100%; margin: 0 0 25px 0; clear: both;}
#vita-headline {width: 100%; margin: 10% 0 0 0; clear: both;}
#left {float: left; margin: 0 6% 2% 0; }
#right {float: left; }

.bg-white {background: #FFFDFF; color: black; padding: 10% 15% 20% 20%; }
.bg-black {background: black; color: #FFFDFF; padding: 6% 10% 10% 7%; }
.bg-white a {color:#000;}
.bg-black a {color:#FFFDFF;}
.bg-white a:hover {color:#FFFDFF; background:#000;}
.bg-black a:hover {color:#000; background:#FFFDFF;}

.w10{width: 10%;}
.w20{width: 20%;}
.w30{width: 30%;}
.w40{width: 40%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w80{width: 80%;}
.w90{width: 90%;}
.w100{width: 100%;}


/* ----------------------------- Responsive ----------------------------- */

@media (min-width: 1px) and (max-width: 900px) {
    h2 {color:#000; font-size: 6em;}
    p {font-size: 1em;}
    ul {font-size: 1em;}
    .bold {font-size: 1.2em;}

    .button {padding: 12px 20px; font-size: 1em;}
 
    #header {padding: 0 5% 5% 5%; position: unset;}
    #container {width: 90%;  margin: 0;}
    #container-black {width: 80%; margin: 0 5% 0 5%;}
    .bg-white {padding: 10% 5% 40% 5%;}
    .bg-black {padding: 1% 5% 5% 5%;}
    #project {width: 100%; margin: 0 0 40% 0;}
    #film video {margin: 0;}
    video {width: 100%; height: 100%;}
    #vita {width: 100%; margin: 0 0 25px 0; clear: both;}
    #vita-headline {margin: 10% 0 0 0; clear: both;}
    #left {float: none; margin: 5% 6% 5% 0;}
    #right {margin: 0 0 5% 0;}
    
    .w10{width: 100%;}
    .w20{width: 100%;}
    .w30{width: 100%;}
    .w40{width: 100%;}
    .w50{width: 100%;}
    .w60{width: 100%;}
    .w70{width: 100%;}
    .w80{width: 100%;}
    .w90{width: 100%;}
    }

@media (min-width: 1750px) and (max-width: 9000px){
    h1{font-size: 2em;}
    p{font-size: 1.1em; line-height: 1.7em;}
    .linkbox-text{font-size: 2em; line-height: 1.5em;}
    #wrapper{margin: 20vh 6em 0 5em;}
    #wrapper-credits{margin: 20vh 6em 0 5em;}
    }

/* ----------------------------- Dark Theme ----------------------------- */
/*
@media (prefers-color-scheme: dark) {
    html, body {background-color: #161616;}
    ::selection {color: white; background-color: #00f2ff;}
    ::-webkit-scrollbar-track {background-color: #161616;}
    ::-webkit-scrollbar-thumb {background-color: #FFFDFF; border: 22px solid #161616;}
    h1{color:#FFFDFF;}
    h2{color:#FFFDFF;}
    p{color: #FFFDFF;}
    #bar {background: #161616;}
    .bold{color: #FFFDFF;}
    a{color:#00f2ff;}
    #line {background: #00f2ff;}
    .linkbox-text{color: #00f2ff;}
    #wrapper-linkbox{border: 1px solid #00f2ff;}
    #wrapper-linkbox:hover{border: 1px dashed #00f2ff;}
}*/