@import url("./reset.css");
@import url("./variables.css");
@import url("./utils.css");
@import url("./typography.css");
@import url("./nav.css");
@import url("./footer.css");
@import url("./hero.css");
@import url("./projects.css");
@import url("./banner.css");
@import url("./logos.css");

html{
  scroll-behavior: smooth;
  font-size: 90%;
}

body{
  background-color: var(--bg-main);
  color: var(--txt-main);
  font-family: articulat-cf, sans-serif; 
  font-size: var(--step-0);
  padding: 0 1rem;
}

section{
  padding-bottom: var(--space-2xl)
}

@media screen and (min-width: 800px){
  body{
    display: grid;
    grid-template-columns:
      calc( 50vw - 680px )
      repeat( 8, 1fr )
      calc( 50vw - 680px );
  }

  body > *{
    grid-column: 2 / 10;
  }
}

@media screen and (min-width: 1400px){
  body{
    padding: 0;
  }
}