@font-face {
  font-family: lemonMocktail;
  src: url(../assets/fonts/lemon_mocktail/Lemon_Mocktail.ttf);
}

@font-face {
  font-family: kasperLullaby;
  src: url(../assets/fonts/kasper_lullaby/Kasper_Lullaby.otf);
}

@font-face {
  font-family: atkinsonHyperlegibleRegular;
  src: url(../assets/fonts/Atkinson-Hyperlegible/TTF/Atkinson-Hyperlegible-Regular-102.ttf);
}

@font-face {
  font-family: linux_libertine;
  src: url(../assets/fonts/linux_libertine/LinLibertine_DR.ttf);
}

@font-face {
  font-family: moon_get;
  src: url(../assets/fonts/moon_get/moon_get-heavy.ttf);
}

@font-face {
  font-family: gontserratRegular;
  src: url(../assets/fonts/gontserrat/Gontserrat-Regular.ttf);
}
@font-face {
  font-family: gontserratMedium;
  src: url(../assets/fonts/gontserrat/Gontserrat-Medium.ttf);
}
@font-face {
  font-family: gontserratSemiBold;
  src: url(../assets/fonts/gontserrat/Gontserrat-SemiBold.ttf);
}

@font-face {
  font-family: gontserratBold;
  src: url(../assets/fonts/gontserrat/Gontserrat-Bold.ttf);
}

@font-face {
  font-family: AlteHaasGroteskBold;
  src: url(../assets/fonts/lemAlteHaasGrotesk/AlteHaasGroteskBold.ttf);
}

@font-face {
  font-family: AlteHaasGroteskRegular;
  src: url(../assets/fonts/lemAlteHaasGrotesk/AlteHaasGroteskRegular.ttf);
}

html { 

  font-size: 62.5%; /* =10px */
  scroll-behavior: smooth; /* for menus */
  height: -webkit-fill-available;

} 



body {
  
  margin: 0;
  padding: 0;
  height: 100%;


  --color-light: #F1EEF9;
  --color-dark: #230A37;
  --color-highlight: #742EAD;
  --color-menu: #B4ABEF;


  color: var(--color-dark);
  background-color: var(--color-light);

  font-size: 1.4rem;  /* =14px */
  font-weight: 400;
  font-family: "Courier New", "Courier", monospace;


  overflow-x: hidden; 
  overflow-y: scroll;


  /* Push page content below the unsafe top area, and respect left/right insets */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);

  /* Fallback for older Safari versions */
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);


}



    
  



a:link,
a:visited,
a:active { 
  outline: none; 
  text-decoration: none;
  border-bottom: solid 1px ;
  color: var(--color-highlight);

}

a:hover {
  text-decoration-line: underline;

}

p {
  max-width: 600px;
}


img {
  max-width: 100%;
  max-height: 100%;
}



input:focus::placeholder {
  color: transparent;
}






/*  For homepage image fade in */

.fade-in-image {


  animation: fadeIn 5s;
  -webkit-animation: fadeIn 5s;
  -moz-animation: fadeIn 5s;
  -o-animation: fadeIn 5s;
  -ms-animation: fadeIn 5s;

/*  animation-delay: 1s;*/

}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}











.c-header,
.c-menu__header  {
  position: fixed;
  top: 0;
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;

}

.c-header {
  z-index: 1000;
  transition: opacity 1.5s;
}

.c-menu__header {
  z-index: 102;
  transition: opacity 150ms;
}







.c-header__logo,
#c-menu__header--logo {

  font-family: 'Courier New', Courier, monospace;

  display: flex;
  align-self: center;
  font-size: 1.8rem;
  font-weight: 400;

  border-bottom: none !important;
  text-decoration-line: none !important;
  
  color: var(--color-dark) !important;

}


#c-menu__header--logo {
  transition: display 5s;
}


.c-header__menu {
  display: none;
}


.c-header__menu--item {

  font-size: 1.8rem;
  margin: 0 2rem;
}

.c-header__menu--item a {
  color: var(--color-dark) !important;
  text-decoration: none !important;
    border-bottom: none !important;

}





#c-header__menu--open,
#c-menu__close {

  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-dark);
  height: 50px;
  width: 50px;
  font-size: 1.8rem;
  text-align: end;
}

#c-menu__close {
}


#c-header__menu--open {
  opacity: 100%;
  transition: opacity 0.5s;

}



#menu {
  position: fixed;
  z-index: 1001;

  top: 0;
  left: 100%;
  transition: left 1s;

  background: rgba(180, 171, 239, 0.95);
  height: 100%;
  width: 100%;

}

.fade-in {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity 300ms ease-in-out;
}

.fade-out {
  visibility: hidden;
    opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms ease-in-out;
}






.c-menu__logo{
  display: block;
  max-width: 150px;
  margin-top: 1rem;

}

/* Fix Safari repaint / fixed-position rendering bug for menu links */
#menu,
.c-menu__links,
.c-menu__link,
.c-menu__link a {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}


#menuBanner {
  font-size: 11vw;
  font-weight: 850;
  letter-spacing: 2px;
}

.c-menu__links {
  opacity: 100%;
  position: fixed;
  top: 15vh;
  padding-left: 2rem;
}

.c-menu__link {
    opacity: 100%;

  font-family: 'Courier New', Courier, monospace;
  font-size: 2.6rem;
  letter-spacing: 1px;
  margin-top: 5vh;
}

.c-menu__link a {
  color: var(--color-dark) !important;
}

.c-menu__link a {
  border-bottom: none !important;
}





.c-menu__links--social {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0); /* Adjust for safe areas */
  padding-bottom: 10rem;
  padding-left: 2rem;
  color: var(--color-dark) ;

}

.c-menu__links--social a {
  font-size: 1.6rem;
  border-bottom: none !important;
  color: var(--color-dark);
}


.c-menu__social {
  position: fixed;
  bottom: 20vh;

  display: flex;
  padding-left: 2rem;
}

.c-menu__footer {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0); /* Adjust for safe areas */
  padding-bottom: 3rem;
  padding-left: 2rem;
  font-size: 1.4rem;
  color: var(--color-dark);
}





.footer {

  background-color: var(--color-light);
  color: var(--color-dark);

  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  
}


.footerEmail {
  display: flex;
  flex-direction: column;
  margin-bottom: 6rem;
}


.footerEmail__text {
  color: var(--color-dark);
  font-size: 1.4rem;
  margin-bottom: 3rem;
}

.footerSocial {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}



.indicates-required {
  display: none;
}

.footerEmailImage {
  display: none;
}


#mc_embed_signup_scroll {
  display: flex;
  flex-direction: row;
  height: 3rem;
}


.mc-field-group {
  padding-right: 1rem;
  width: 100%;
}




#mce-EMAIL {
  line-height: calc(3rem - 4px);
  border-radius: 5px;
  border: 1px solid var(--color-dark);
  color: darkgray;
  padding-left: 1rem;
  width: 95%;
}

#mc-embedded-subscribe {
  background-color: var(--color-dark);
  color: var(--color-light);
  border: 0 none;
  border-radius: 5px;
  line-height: 30px;
  padding: 0 22px;
  text-align: center;
  text-decoration: none;
}



/*
.formkit-powered-by-convertkit-container {
  display: none !important;
}

.formkit-submit {
  background-color: var(--color-dark) !important;
}*/


.social,
.socialLarge {
    display: flex;
}

.social {
  height: 30px;
  width: 30px;
}
.socialLarge {
  height: 40px;
  width: 40px;
}

/*

.formkit-form > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
*/
.footerContact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3vh;
}

.footerContent {
  margin-bottom: 1vh;
}

.footerContact a {
  color: var(--color-dark) !important;
}












#l-main {

  background-color: var(--color-light);

  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;


  width: 100%;
  min-height: 100vh;

  overflow-y: scroll;
  box-sizing: border-box;

  margin: 0 auto;
}


.l-container {
  padding: 2rem;

}


.l-container {
  padding: 2rem 2rem;
  box-sizing: border-box;
}


.l-container--home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh
}





.c-headline {

  font-family: AlteHaasGroteskBold;

  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0px;

  margin-top: 12rem;
  margin-bottom: 5rem;

}

.c-section-headline {

  font-family: AlteHaasGroteskBold;

  font-size: 2.0rem;

  margin-top: 4rem;
  margin-bottom: 2rem;

}

.c-headline__home {
  
  color: var(--color-highlight);

  font-family: linux_libertine;
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: 0px;

  margin-top: 11rem;
  margin-bottom: 6rem;

}



.c-text {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 160%;
  color:  var(--color-dark);
  margin-bottom: 4rem;
}




#c-home__art {
  display: flex;
  justify-content: center;
  height: 57vh;
}

.c-home__art--image {
  object-fit: contain;
}



.c-project__title {

  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  line-height: 160%;
  margin-bottom: 2rem;
}








.c-blog__post {
  display: flex;
  flex-direction: row;
  margin-bottom: 3rem;
  border-bottom: none !important;
}


.c-blog__post--date {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0px;
  color:  darkgray;
  width: 110px;
}

.c-blog__post--title {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.4px;
  margin-left: 2rem;
}




.c-post__title {

 font-family: linux_libertine;

  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0px;

  margin-top: 12rem;
  margin-bottom: 5rem;

}



.c-post__date {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0px;
  color:  darkgray;
  margin-bottom: 3rem;

}

 
.c-post__text {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 3rem;
  margin-bottom: 3rem;
}



.c-art__row {
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
}

#c-art__generative {
  flex: 100%;
  max-width: 100%;
  min-height: 600px;

  display: flex;
  flex-flow: row wrap;
  gap: 3rem;
  margin-bottom: 8rem;
}

.c-art__generative--image {
  width: 100%;
}


.c-art__header {
  margin-bottom: 6rem;
}

.c-art__subtitle {
  font-family: alteGroteskBold;
  font-size: 2.0rem;
  font-weight: 600;
  margin-bottom: 3rem;
}

.c-art__links {
  margin-bottom: 6rem;
}

.c-art__link--title {
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 2rem;
}

.c-art__link{
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-highlight);
  margin-bottom: 2rem;
  border-bottom: solid 1px ;
  width: fit-content;
}


.c-art__video--title {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.c-art__video--description {
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 0rem;
}


.c-art__postcards {
  margin-bottom: 6rem;
}


.c-404__image {
  width: 100%;
}



#c-art__section--films {
  margin-bottom: 8rem;
}

.c-art__video {
  margin-bottom: 4rem;
}

.c-art__video--frame {

  width: 100%;
  min-height: 300px;
}












/*  NOVARI PAGE */


.l-novari-main {
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  min-height: 100vh;
  width: 100%;

  overflow-y: scroll;
  box-sizing: border-box;


  margin: 0 auto;
  padding: 1.5rem;


  background-color: var(--color-text);
  color: var(--color-background);
}




.l-container__novari {
  display: flex;
  flex-direction: column;
}




.l-block {

  flex: 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 2em 0;

}


.l-button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3em;
}








.c-header--novari {

  display: flex;
  align-items: flex-end;
  justify-content: center;

  height: 13em;
}

.c-header__title--novari {
  font-size: 3.9rem;
  margin-bottom: 0.5em;;
}


.c-info {
  margin-bottom: 2em;

}

.c-info__title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 3rem;
}

.c-info__list {
  display: flex;
}


.c-info__content {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 3rem;
  margin-bottom: 2em;
}


.c-skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 200px));
  list-style: outside none none;
  padding: 0;
  margin: 0;
}

.c-skills-grid__item {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 3headerrem;
  padding-right: 1em;
}

.c-skills-grid__item--spaced {
  margin-bottom: 1em; 
}

.bold {
  font-weight: 700;
}

.l-mobile-image-container {
  display: flex;
  max-width: 600px;
}



.c-product-image {
  display: flex;
  align-items: flex-start; /* for safari */
  overflow: hidden;
  max-width: 600px;
  border-radius: 0.5rem;
}

.shadow {
  box-shadow: 1rem 1.5rem 3rem .7rem rgba(0,0,0,.13);
}


.c-product-image--mobile {
  border-radius: 2rem;
  margin: 2em;
}

.hidden-mobile {
  display: none;
}




.c-quote {

  display: flex;
  flex-direction: column;

  font-family: var(--font-family-title);
  font-size: 1.6rem;
  font-weight: 600;

  margin: 2em 1em;
}

.c-quote__title {
  margin-bottom: 1em;
}


.c-quote--left {
  align-self: flex-start;
  text-align: left;
  margin-right: 15%;
}

.c-quote--right {
  align-self: flex-end;
  text-align: right;
  margin-left: 15%;
}





@media only screen and (min-width: 35em) {




.l-container {
  padding: 7rem;

}

.c-menu__header,
.c-header {
  padding-left: 7rem;
  padding-right: 7rem;
}


.l-container,
.c-menu__links,
.c-menu__links--social,
.c-menu__footer {
  padding-left: 7rem;
}





.c-menu__social {
  padding-left: 6rem;
}

.c-menu {
  display: flex;
}

#c-header__menu_icon {
  display: none;
}



.c-headline {
  

}

.c-404__image {
  width: 400px;
}



/*#c-art__column {
  flex: 45%;
  max-width: 45%;
  margin: auto;
}*/







.c-art__video--frame {

}

.c-art__video--description {
  margin-bottom: 3rem;
}



}




@media only screen and (min-width: 50em) {


/*#c-art__column {
  flex: 30%;
  max-width: 30%;
  margin: auto;
}*/

.c-art__generative--image {
  width: 45%;
}


.c-header__menu { 
  display: flex;
}

#c-header__menu--icon {
  display: none;
}

.c-art__video--frame {

  width: 640px;
  height: 360px 
}





.footer {


}






/* NOVARI */



.c-header--novari {
  margin-bottom: 3rem;
}


.l-block {

  width: 50%;
  padding: 0 2.5em;
}

.l-block--left {  
  align-items: flex-end;
  order: 1;

}

.l-block--right {
  align-items: flex-start;
  order: 2;

}


.l-container__novari {
  flex-direction: row;
  margin-bottom: 50px;
}


.l-text-container {

  max-width: 400px;
}

.l-text-container--wide {
  max-width: 85rem;

}

.hidden-large {
  display: none;
}


/*.footerEmail {
  flex-direction: column;
  align-items: center;
}*/
/*
.footerEmail__text {

  margin-bottom: 0rem;
}

.formkit-fields {
  flex-wrap: nowrap !important;
}

.formkit-field {
  margin: 0 !important;
}

.formkit-submit {
  margin-bottom: 0 !important;
}
*/

}



@media only screen and (min-width: 75em) {


.c-art__generative--image {
  width: 30%;
}


#c-art__generative {
  margin-bottom: 12rem;
}

.l-container {
  margin: 0 auto;

}


}