@font-face {
  font-family: 'CabinetGrotesk-Variable';
  src: url('../fonts/cabinet-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'ClashGrotesk-Variable';
  src: url('../fonts/clash-variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "SpaceMono";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/space-mono-regular.ttf") format('truetype');
}


:root{

  /* FONT */

  --font-family: 'CabinetGrotesk-Variable';
  --font-size: 16px;
  --font-weight-regular: 320;
  --letter-spacing: 0;

  --font-weight-light: 200;
  --font-weight-bold: 600;
  
  --font-size-regular: 1.25rem;
  --font-size-small: 0.6875rem;
  --font-size-big: 1.75em;
  --font-size-bigger: 3.125rem;
  
  --line-height-regular: 120%;
  --line-height-small: 120%;
  --line-height-big: 125%;
  --line-height-bigger: 124%;

  --font-family-h1: 'ClashGrotesk-Variable';
  --font-family-h2: 'ClashGrotesk-Variable';
  --font-family-h3: 'ClashGrotesk-Variable';
  --font-family-h4: 'ClashGrotesk-Variable';

  --font-size-h1: 6.875rem;
  --font-size-h2: 5rem;
  --font-size-h3: 2.8125rem;
  --font-size-h4: 1.5625rem;
  --font-size-h5: var(--font-size-small);

  --font-weight-h1: 550;
  --font-weight-h2: 550;
  --font-weight-h3: 550;
  --font-weight-h4: 550;
  --font-weight-button: 450;

  --line-height-h1: 90%;
  --line-height-h2: 87.5%;
  --line-height-h3: 100%;
  --line-height-h4: 108%;
  
  --letter-spacing-h1: 1.5%;
  --letter-spacing-h2: 1%;
  --letter-spacing-h3: 2;
  --letter-spacing-h4: 1;
  
  --text-underline-offset: 20%;
  --text-decoration-thickness: .065rem;



  /* COLOR */

  --black: 0,0,0;
  --white: 255,255,255;

  --color-black: rgba(var(--black),1);
  --color-white: rgba(var(--white),1);

  --color: var(--color-text);
  --color-background: var(--color-background);
  
  --header-color: var(--color);
  --header-background-color: var(--color-header);
  
  --footer-color: var(--color); /* gets overwritten by last layout */
  --footer-background-color: var(--color-background); /* gets overwritten by last layout */
  
  --blur: blur(10px);
  
  
  /* BORDER */

  --regular-border-width: 1px;
  --border-opacity: 50%;
  --regular-border-color: color-mix(in srgb, currentColor var(--border-opacity), transparent);
  --regular-border: var(--regular-border-width) solid var(--regular-border-color);
  --regular-border-radius: 20px;
  
  
  
  /* HEADER */
  
  --header-height: 5rem;
  --header-padding-top: 0;
  --header-padding-bottom: 0;
  --header-padding-sides: var(--site-padding-sides);
  --header-border-bottom: 1px solid var(--color-background);
  --font-weight-header: 550;
  

  /* FOOTER */
  
  --footer-height: 5rem;
  --footer-padding-top: 0;
  --footer-padding-bottom: 0;
  --footer-padding-sides: var(--site-padding-sides);
  --footer-nav-gap: 2rem;
  


  /* BOX */

  --site-padding-top: 0;
  --site-padding-sides: 2rem;
  --site-padding-bottom: 0;
  
  --image-border-radius: 2px;
  
  


  /* LAYOUT */

  --layout-column-gap: 1rem;
  --block-gap: 1rem;
  
  --layout-padding-top: 5rem;
  --layout-padding-bottom: 5rem;
  --layout-padding-sides: var(--site-padding-sides);
  
  --layout-padding-top-add: 0rem;
  --layout-padding-bottom-add: 0rem;
  
  --layout-leadingtitle-offset: 3rem;
  
  --layout-sticky-padding-top-add: 2rem;
  --layout-sticky-padding-bottom-add: 2.5rem;
  
  --layout-sticky-subtitle-offset: 2rem;
  
  --column-margin-top: 2rem;
  
  --block-animation-duration: 800ms;
  --block-animation-movement: 40px;
  --line-animation-duration: 800ms;
  --line-animation-delay: calc(var(--block-animation-duration) - 100ms);
  
  
  
  
  
  /* TRANSITION */
  
  --regular-transition-duration: 200ms;
  

}

img {
  height: auto;
}