html, body {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
*{
	margin: 0;
	padding: 0;
	letter-spacing: 0.03em;
}

body{
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
	/*max-width: 1440px;*/
}

/* =========================
   FULL PAGE LOADER
========================= */

#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #400606; /* change if needed */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

#page-loader.hide {
  opacity: 0;
  pointer-events: none;
}


/* =========================
   LOADER ANIMATION (YOUR STYLE)
========================= */

.loader {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#FFFEF8 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}

@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}