@font-face {
  font-family: 'Inknut';
  src: url('../assets/fonts/InknutAntiqua.ttf') format('truetype');
}

@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Frank Ruehl';
  src: url('../assets/fonts/FrankRuhlLibre-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Instrument';
  src: url('../assets/fonts/InstrumentSerif-Regular.ttf') format('truetype');
}

:root {
    --color-white: #ffffff;
    --color-gray-light: rgba(211, 211, 211, 0.35);
    --color-gray: rgb(211, 211, 211);
    --color-button: rgb(87, 211, 207);;
    --bg-transparent: rgba(255, 255, 255, 0.5);
    
    --shadow: 4px 4px 16px -2px rgba(0, 0, 0, 0.3);
    --border-radius: 0.5rem;
    --font-figtree: 'Figtree', sans-serif;
    --font-inknut: 'Inknut', serif;
    --font-instrument: 'Instrument', sans-serif;
    --font-frank: 'Frank Ruehl', serif;

    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 4rem;
}

body, 
header {
  margin: 0;
  padding: 0;
}

body {
    background-image: 
        linear-gradient(to bottom, var(--color-white) 0%, transparent 400%),
        url(../assets/img/background.svg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}