:root {

  overscroll-behavior: none;
  scrollbar-width: none;  

  /*---- Colours ----*/
  --yellow: #ffff00;

  --black-light: #333333;
  --black: #222222;
  --black-dark: #1a1a1a;

  --white-light: #fff;
  --white: #F6F6F2;
  --white-dark: #dcd2c0;;
  
  --none: rgba(0, 0, 0, 0);
  
  /*---- Padding & Gap ----*/
  --section-padding: 75px;
  --rounded-corners: 10px;

  /*---- Nav ----*/
  --nav-height: 100px;
  --nav-pad: 2.5vw;

  /*---- Work Grid ----*/
  --grid-width: 90vw;
  --grid-gap: 30px;
  
  /*---- Animation ----*/
  --transition: 0.25s ease-in-out;
  --animate-duration: 800ms;
  --animate-delay: 4s;
  
  /*---- Fonts ----*/
  --h1height: 120px; 
  --font-headline: "squeezed", sans-serif;
  --font-accent: "early-sans-variable", sans-serif;
  --font-body: "early-sans-variable", sans-serif;
}

html {
  scroll-behavior: smooth;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

body{
  margin: 0;
  padding: 0;
  background-color: var(--white);
  color: var(--black);
  -ms-overflow-style: none;
  scrollbar-width: none;  
}

section{
  position: relative;
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.container{
  position: relative;
  width: var(--grid-width);
  margin: 0 auto;
}