/*  config local font  */

@font-face {
  font-family: 'neueFont-regular';
  src: url('/assets/neueFont/NeueMontreal-Regular.otf') format('truetype');
}

@font-face {
     font-family: 'neueFont-medium';
     src: url('/assets/neueFont/NeueMontreal-Medium.otf') format('truetype');
   }

   @font-face {
     font-family: 'fjalla';
     src: url('/assets/Fjalla/FjallaOne-Regular.ttf') format('truetype');
   }


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

html {
     font-size: 62.5%;

     &.has-scroll-smooth {
          overflow: hidden;
      }
  
      &.has-scroll-dragging {
          user-select: none;
      }

      -webkit-overflow-scrolling: touch;

      /* overflow-y: hidden; */
}

body {
     font-family: 'neueFont-regular';
     font-size: 1.6rem;
     line-height: 1.6;
     color: #333;

     .has-scroll-smooth & {
          overflow: hidden;
      }

      -webkit-overflow-scrolling: touch;

}

.fjalla {
}

.projects > div > div:last-child {
    margin-bottom: 0;
}


.c-scrollbar {
     position: absolute;
     right: 0;
     top: 0;
     width: 11px;
     height: 100%;
     transform-origin: center right;
     transition: transform 0.3s, opacity 0.3s;
     opacity: 0;
 
     &:hover {
         transform: scaleX(1.45);
     }
 
     &:hover, .has-scroll-scrolling &, .has-scroll-dragging & {
         opacity: 1;
     }
 
     [data-scroll-direction="horizontal"] & {
         width: 100%;
         height: 10px;
         top: auto;
         bottom: 0;
         transform: scaleY(1);
 
         &:hover {
             transform: scaleY(1.3);
         }
     }
 
 }
 
 .c-scrollbar_thumb {
     position: absolute;
     top: 0;
     right: 0;
     background-color: black;
     opacity: 0.5;
     width: 7px;
     border-radius: 10px;
     margin: 2px;
     cursor: grab;
 
     .has-scroll-dragging & {
         cursor: grabbing;
     }
 
     [data-scroll-direction="horizontal"] & {
         right: auto;
         bottom: 0;
     }
 
 }




 
 [data-scroll-container] {
     .has-scroll-smooth & {
         min-height: 100vh;
     }
     [data-scroll-direction="horizontal"] & {
         height: 100vh;
         display: inline-block;
         white-space: nowrap;
     }
 }
 
 [data-scroll-section] {
     [data-scroll-direction="horizontal"] & {
         display: inline-block;
         vertical-align: top;
         white-space: nowrap;
         height: 100%;
     }
  }

.text-36 {
    font-size: 36px;
}