@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --fz:1;
  --fs-nav:calc(.74rem * var(--fz));
  --fs-label:calc(.62rem * var(--fz));
  --fs-body:calc(1.04rem * var(--fz));
  --fs-body-sm:calc(.82rem * var(--fz));
  --fs-title:calc(2.1rem * var(--fz));
  --fs-title-sm:calc(1.05rem * var(--fz));
}

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

html{
  scroll-behavior:smooth;
  font-size:18px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
  position:relative;
  width:100%;
}

@media (min-width:1600px){html{font-size:20px}}
@media (min-width:768px) and (max-width:1199px){html{font-size:16px}}
@media (max-width:767px){html{font-size:15px}}
@media (max-width:767px) and (orientation:landscape){html{font-size:13px}}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Noto Sans', Arial, sans-serif;
  overflow-x:hidden;
  font-size:var(--fs-body);
  line-height:1.9;
  position:relative;
  width:100%;
}

#particles{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.particle{
  position:absolute;
  width:1px;
  height:1px;
  background:var(--acc);
  border-radius:50%;
  opacity:0;
  animation:drift linear infinite;
}

@keyframes drift{
  0%{opacity:0;transform:translateY(100vh) scale(0)}
  10%{opacity:.4}
  90%{opacity:.15}
  100%{opacity:0;transform:translateY(-10vh) scale(2)}
}

.fade-up{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.25s}.d3{transition-delay:.4s}.d4{transition-delay:.58s}

section{position:relative;z-index:1}