@font-face {
  font-family: 'Circular';
  src: url('../font/CircularStd-Medium.otf');
}

@font-face {
  font-family: 'EuclideCircularB-Medium';
  src: url('../font/EuclidCircularB-Medium-WebXL.woff2') format("woff2"),
    url('../font/EuclidCircularB-Medium-WebXL.woff') format("woff");
}

@font-face {
  font-family: 'EuclidCircularB-Light';
  src: url('../font/EuclidCircularB-Light-WebXL.woff2') format("woff2"),
    url('../font/EuclidCircularB-Light-WebXL.woff') format("woff");
}
@font-face {
  font-family: 'EuclidCircularB-LightItalic';
  src: url('../font/EuclidCircularB-LightItalic-WebXL.woff2') format("woff2"),
    url('../font/EuclidCircularB-LightItalic-WebXL.woff') format("woff");
}

@font-face {
  font-family: 'EuclidFlex-Medium';
  src: url('../font/EuclidFlex-Medium-WebXL.woff2') format("woff2"),
    url('../font/EuclidFlex-Medium-WebXL.woff') format("woff");
}
@font-face {
  font-family: 'EuclidFlex-Regular';
  src: url('../font/EuclidFlex-Regular-WebXL.woff2') format("woff2"),
    url('../font/EuclidFlex-Regular-WebXL.woff') format("woff");
}

/* @supports(padding:max(0px)) {
    body, header, footer, #heroImage{
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
} */


:root {
  --text: #000;
  --background: #fff;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

html{
  font-size: 21pt;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  display: none;
}

canvas {
  z-index: -5;
  top: 0;
  left: 0;
  position: fixed;
  margin: 0;
  padding: 0;
}

body {
  min-height: -webkit-fill-available;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  font-family: EuclideCircularB-Medium, Circular, sans-serif;
  color: var(--text);
  /* background-color: var(--background); */
  background-color: black;
  min-height: -webkit-fill-available;
  /* color: var(--dynamicColor);
    background-color: var(--dynamicBackgroundColor); */
  padding: 0px 0px 0px 0px !important;
  margin: 0px 0px 0px 0px !important;

  /* background-image: url('../imgs/projects/showreel/Showreel_all_august2022.mp4');
  background-size: cover !important;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: fixed; */
  transition-delay: 2900ms;
  transition-property: overflow;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  display: inline-block;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  /* box-shadow: 0 0 1px transparent; */
  position: relative;
  overflow: hidden;
  width: auto !important;
}

a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  opacity: 1 !important;
  /* background: #000; */
  background: var(--dynamicColor);
  height: .1rem;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

a:hover:before, a:focus:before, a:active:before {
  right: 0;
  font-size: 2rem;
}

.nav-wrapper{
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: max(env(safe-area-inset-top), .5rem);
  padding-bottom: max(env(safe-area-inset-bottom), .5rem);
  /* padding: 1.5rem 1.5rem 1.5rem 1.5rem; */

  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;

  mix-blend-mode: overlay;

  /* min-height: -webkit-fill-available; */
  transition-property: height;
  transition-duration: 1.75s;
}

.debug{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: yellow;
}

@keyframes breathingEffect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.75);
  }
  100% {
    transform: scale(1);
  }
}

.giuliooo{
  position: relative;
  top: calc(50% - 1rem);
  display: flex;
  align-items: center;
  font-size: 2rem;
  animation-name: breathingEffect;
  animation-duration: 8s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

  transition: font-size .5s 2500ms, top .5s 2500ms, position 1ms 2500ms;
}

.logo_minimised{
  top: 0;
  font-size: 1rem;
}

nav{
  z-index: 10000000;
  position: absolute;
  opacity: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  left: 0;
  bottom: max(env(safe-area-inset-bottom), .5rem);
  width: 100vw;
  height: auto;
  transition-delay: 3.75s;
  transition-duration: 1.75s;
  transition-property: opacity;
  mix-blend-mode: overlay;

}

nav a{
font-size: .8rem;
text-align: center;
background: transparent;
padding: .2rem .5rem .2rem .5rem;
color: black;
border-color: black;
border-style: solid;
border-width: 3pt;
border-radius: 200pt;
}

nav a:hover{
  border: 3pt solid #000;
  background-color: black;
  color: white;
}
#heroImage{
  position: absolute;
  top: env(safe-area-inset-top);
  left: 0;
  padding: 0 0 0 0;
  object-fit: cover;
  width: 100%;
  height: 100vh;
}


#headlineWrapper{
  position: absolute;
  object-fit: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  mix-blend-mode: overlay;
  /* background-image: url("../imgs/projects/mxmechanical/01.gif");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition-property: all;
  transition-duration: 850ms;
  transition-delay: 300ms;
}

.blend-headline{
  font-size: clamp(16pt, 10vw, 10vh);
  text-align: center;
  mix-blend-mode: overlay;

  pointer-events: none;

}

@keyframes headlineAnim {
	100% {
    opacity: 1;
  }
}
@keyframes scale-reset {
  100%{
    scale(1);
  }
}
.add-anim-in {
	animation: headlineAnim 300ms forwards;
}
/* #headlineWrapper .blend-headline {
	animation: headlineAnim 300ms forwards;
} */
#headlineWrapper .blend-headline:nth-child(1) {
	animation-delay: 2600ms;
}
#headlineWrapper .blend-headline:nth-child(2) {
	animation-delay: 2750ms;
}
#headlineWrapper .blend-headline:nth-child(3) {
	animation-delay: 2900ms;
}

section {
  width: 100%;
}

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(50% -  5rem), 1fr));
  grid-auto-flow: row;
  grid-gap: 5rem;
  padding: 1rem 5rem 1rem 5rem;
}

.projectWrapper{
  width: 100%;
  padding: 1rem 5rem 1rem 5rem;
}

.grid-intro{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(50% -  5rem), 1fr));
  grid-auto-flow: row;
  grid-gap: 5rem;
  padding: 0 0 0 0;
}

.intro{
  width: calc(100% - 10rem);
  margin: 2rem 5rem 0 5rem;
  padding: 2rem 1rem 1rem 1rem;
  border-radius: .2rem;
}

.dark{
  color: #FFF;
}
.light{
  color: #000;
}

.title{
  color: inherit;
  font-size: 2.5rem;
  max-width: 650px;
  line-height: 2.3rem;
  margin: 0 0 1rem 0;
  text-transform: capitalize;
}
.intro-title{
  margin: 0 0 1rem 2rem;
  line-height: 2.4rem;
  max-width: 500px;
}
.corps{
  font-family: EuclideCircularB-Medium;
  font-size: 1
  color: inherit;
  font-size: 1rem;
  /* max-width: 550px; */
}

.corps-light{
  color: inherit;
  font-family: EuclidCircularB-Light;
  font-size: .9rem;
  /* max-width: 350px; */
}

.quote{
  position: absolute;
  text-align: center;
  transform: translate(0, -50%);
  top: 50%;
  opacity: 1;
  font-family: EuclidCircularB-LightItalic;
  font-size: 1.5rem;
  transition: opacity .75s;
}


.separator{
  /* mix-blend-mode: multiply; */
  /* opacity: .5; */
  color: #c4c4c4;
  padding: 2rem 0 2rem 7rem;
  font-family: EuclidFlex-Medium;
  font-size: 3rem;
  text-transform: uppercase;
}

.tile{
  justify-self: center;
  width: 100%;
  height: 100%;
  max-width: 850px;
  min-height: 550px;
  border-radius: .2rem;
  transform: scale(.9, .9);
  transition: transform .75s, opacity .25s;
  /* border: 2px solid black; */
}

.textTile{
  border-radius: inherit;
  padding: 2rem 2rem 2rem 2rem;
  max-width: 650px;
}

.projectTile{
  justify-self: center;
  z-index: 10000000;
  transform: scale(.5, .5);
  width: 100%;
  border-radius: .2rem;
  height: auto;
  min-height: 80vh;
  transition: transform .75s, opacity .25s;
  padding: 2rem 2rem 2rem 2rem;
  filter: grayscale(80%);
}

.projectText{
  width: 33%;
}


.list{
  padding: 2rem 2rem 2rem 2rem;
}

.tile-cover{
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  cursor: pointer;
  transition: all .5s;
}

.excerpt{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 1.5rem 1.5rem 1.5rem;
  height: auto;
  max-width: 500px;
}

.coverImage{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  cursor: pointer;
  background-size: cover !important;
  webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: fixed;

  transition: all .75s;
}
.projectWrapper .coverImage{
  z-index: -2;
  opacity: .1;
}

.blur-normal{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.blur-strong{
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.blend{
  mix-blend-mode: screen;
}
.scaled{
  transform: scale(1, 1);
}
.descale{
  transform: scale(.5, .5);
}
.lock {
  overflow: hidden;
}

.remove{
  display: none;
}

.hide {
  opacity: 0;
}

.show{
  opacity: 1;
}

.closeButton{
  cursor: pointer;
  background-image: url('../imgs/bullet_icons/owl.png');
  z-index: 100000;
  width: 5rem;
  height: 5rem;
}

#installations .tileDoublePortrait1{
  grid-column: 2;
  grid-row: 2 / 4;
}
#installations .tileDoublePortrait2{
  grid-column: 1;
  grid-row: 4 / 6;
}

#logi .tileDoublePortrait1{
  grid-column: 1;
  grid-row: 1 / 3;
}
#logi .tileDoublePortrait2{
  grid-column: 2;
  grid-row: 2 / 4;
}

.bullet-container{
  display: flex;
  flex-grow: row;
  margin:0 0 1rem 0;
}
.bullet-icon{
  width: 3rem;
  height: 3rem;
  margin: 0 1rem 0 0;
}