@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');




*, 


html{
    /* font-family: 'Sora', sans-serif; */
    font-family: "Inter", sans-serif;
    
}

.top-left {
  position: fixed;
  top: 1.2rem;
  left: 40px;
  max-width: 17vw;

}


/* Style the links */
.top-left a{
  position: relative; /* needed for the underline */
  color: #0059FF; /* or whatever text color you like */
  text-decoration: none;
  font-size: 15px;
  padding: 2px 0px 2px 0px;
}

/* Add the underline effect */
.top-left a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* thickness of the line */
  background-color: #0059FF;
  transform: scaleX(1); /* start full width */
  transform-origin: right;
  transition: transform 0.3s ease;

}

/* On hover, retract (shrink) the underline */
.top-left a:hover::after {
  transform: scaleX(0); /* shrink to 0 */
  transform-origin: left;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  font-style:italic;
 
}

.landing {
  z-index:-1;
  position:fixed;
  top:0;
  width:100vw;
}

.landing__background {
  width:100%;
  position:absolute;
  
}

.landing__content {
  position:relative;
  width:100%;
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing__content-item {  
  flex: 0 0 50%;
  padding:2rem 2rem;
  color: var(--color-0);
  /* background-color: var(--color-4); */
  /* box-shadow: 0px 40px 40px rgb(0,0,0,0.4); */
  /* transform: skewX(-15deg); */
  font-size: var(--font-size-l);
  line-height: var(--font-size-l);
  text-align: center;       
}


.divider {
  border: none;
  height: 2px;
  background-color: #0059FF; /* or any color */
  margin: 0 0px 2rem 0px;          /* spacing above and below */
}

.divider2 {
  border: none;
  height: 1px;
  background-color: #0059FF; /* or any color */
  margin: 15px 0px 15px 0px;          /* spacing above and below */
}


body {
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
    font-family: "Inter", sans-serif;
    /* font-family: 'Sora', sans-serif; */
  font-size: 15px;
  line-height: 115%;
  font-weight: 500;
}

body {
  background: transparent;
}

a {
  color: #0059FF;
  
}

a:hover {
  color: #0059FF;
  font-style: italic;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  line-height: 115%;
  font-weight: 400;
  
}


h1 {
  color:#0059FF;
  font-size: 12px;
  line-height: 115%;
  font-weight: 500;
}

h1 a {
  color: #0059FF;
  padding-bottom:1rem;
  
}

h1 a:hover {
  color: #0059FF;
  font-style: italic;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  line-height: 115%;
  font-weight: 400;
  padding-bottom: 1rem;
  
}



h2 {
  color:#0059ff;
  font-size: 16px;
  line-height: 115%;
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  font-style:italic;

  
 
}



h3 {
 /* font-family:'Sora', sans-serif; */
 font-family: "Instrument Serif", serif;
  font-weight: 200;
  font-style: normal;
  color:#0059FF;
  font-size: 110px;
  line-height: 50%;
}
h4 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
  line-height: 50%;
  color:#0059FF;
  font-size: 110px;
 
  font-style: italic;
}

p {
  color:#0059FF;
  font-size: 12px;
  line-height: 115%;
  font-weight: 500;
}

figcaption {
  color:  #0059FF;
}

/* carousel */

.carousel {
  position: relative;
  width: 100%;
  max-width: 1920px;
  overflow: hidden;
  margin: auto;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-img {
  width: 100%;
  flex-shrink: 0;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  background: rgba(0, 0, 0, 0);
  color: white;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}


/* flipbook */


  #flipbook-container {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 0;
  }

  #publuu-embed {
    width: 150%;
    height: 1200px;
    transform: translate(-25%, -200px) scale(1.2);
    border: none;
  }

  .scroll-hint {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
    font-family: sans-serif;
    animation: blink 2s infinite;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }



/* *************************************** */
/* Sections, custom background             */
/* *************************************** */


.hero__overlay {
  background: transparent;
  /* background: #fffdf584; */
  color: #0059FF;
}


.inspiration {
  /* background: #fffdf5; */
  background: transparent;
  /* background: #fffdf584; */
  
}

.process {
  /* background-color: #fffdf5; */
  background: transparent;
  /* background: #fffdf584; */
}

.footer {
  /* background-color: #fffdf5; */
  background: transparent;
  /* background: #fffdf584; */
}

.about__button p a:hover {
  background-color: #002203;
  color:rgb(247, 255, 245);
} 

.about__button p a {
  background-color: rgb(247, 255, 245);
  color:rgb(0, 34, 3);
  border: 1px solid white;
  border-radius:50px;
}

.about__details {
  /* background-color: rgba(247, 255, 245); */
  background: transparent;
  /* background: #fffdf584; */

}

/* Navigation */

.bottom-left, .bottom-right {
  position: fixed;
  bottom: 1.2rem;
}

.bottom-left {
  left: 40px;
}

.bottom-right {
  right: 3rem;
}

/* Style the links */
.bottom-left a, .bottom-right a {
  position: relative; /* needed for the underline */
  color: #0059FF; /* or whatever text color you like */
  text-decoration: none;
  font-size: 15px;
  padding: 2px 0px 2px 0px;
}

/* Add the underline effect */
.bottom-left a::after,
.bottom-right a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* thickness of the line */
  background-color: #0059FF;
  transform: scaleX(1); /* start full width */
  transform-origin: right;
  transition: transform 0.3s ease;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  font-style:italic;
}

/* On hover, retract (shrink) the underline */
.bottom-left a:hover::after,
.bottom-right a:hover::after {
  transform: scaleX(0); /* shrink to 0 */
  transform-origin: left;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  font-style:italic;
}


/* *************************************** */
/* About | Project Description             */
/* *************************************** */

.project-description {
  /* background: #fffdf5; */
  background: transparent;
  /* background: #fffdf584; */
  min-height: 50vh;
  font-size: 1.25rem;
}

.project-description h2 {
  font-size: inherit;
  color: #0059FF;
}

.project-description p {
  font-size: inherit;
  color: #0059FF;
}

/* *************************************** */
/* Sketches section                        */
/* *************************************** */


.sketches {
  /* background: #fffdf584; */
  background: transparent;
  padding-bottom:3rem;
}

.sketches p,
.sketches h1,
.sketches h2,
.sketches li {
  color:#0059FF;
}

.sketches__intro {
  max-width:480px;
}

.sketches__list-item {
  padding: 1.2rem 0;
  margin-right:1rem;
}

/* Style the links */
.sketches__list-item a {
  position: relative; /* needed for the underline */
  color: #0059FF; /* or whatever text color you like */
  text-decoration: none;
  font-size: 12px;
  padding: 0;
}

/* Add the underline effect */
.sketches__list-item  a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 23%;
  height: 2px; /* thickness of the line */
  background-color: #0059FF;
  transform: scaleX(1); /* start full width */
  transform-origin: right;
  transition: transform 0.3s ease;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  font-style:italic;
}

/* On hover, retract (shrink) the underline */
.sketches__list-item a:hover::after{
  transform: scaleX(0); /* shrink to 0 */
  transform-origin: left;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  font-style:italic;
}

.sketches2__intro {
  max-width:480px;
}

.sketches2__list-item {
  padding: 1.2rem 0;
  margin-right:1rem;
}

/* Style the links */
.sketches2__list-item a {
  position: relative; /* needed for the underline */
  color: #0059FF; /* or whatever text color you like */
  text-decoration: none;
  font-size: 12px;
  padding: 0;
}

/* Add the underline effect */
.sketches2__list-item  a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 23%;
  height: 2px; /* thickness of the line */
  background-color: #0059FF;
  transform: scaleX(1); /* start full width */
  transform-origin: right;
  transition: transform 0.3s ease;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  font-style:italic;
}

/* On hover, retract (shrink) the underline */
.sketches2__list-item a:hover::after{
  transform: scaleX(0); /* shrink to 0 */
  transform-origin: left;
  font-family: "Instrument Serif", serif;
  font-optical-sizing: auto;
  font-style:italic;
}





/* *************************************** */
/* media queries: desktop, mobile          */
/* *************************************** */


@media (orientation: portrait) {

  
  .sketches__list {
    display: none;
  }
}

.width__max {
  max-width: 1280px;
  margin:auto;
}

@media (max-width: 1200px) {

  p, h1, h2 {
    font-size:16px;
  }

  h3, h4 {
    font-size: 90px;
    line-height: 60%;
  }

  
  
  .top-left {
    padding: 1.2rem;
    position:static;
    max-width: 100vw;
  }

  .bottom-left {
    left: 1.2rem;
    background-color: #fffdf5b0;
    padding: 1.2rem;

  }
  .bottom-right {
    right: 1.2rem;
    background-color: #fffdf5b0;
    padding: 1.2rem;

  }

  

  .sketches__list-item {
    padding: 1.2rem 0rem 0rem 0rem;
    
  }

  .sketches__list-item  a {
    
    left: 0rem;
    
  }

  .sketches2__list-item {
    padding: 1.2rem 0rem 0rem 0.6rem;
    
  }

  .sketches2__list-item  a {
    
    left: 0.5rem;
    
  }
  }