@import "./reset.css";
@import "./classes.css";

@import url('https://fonts.googleapis.com/css2?family=Capriola&family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Fira+Code:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Reenie+Beanie&display=swap');

:root {
  /* https://coolors.co/f5f5f5-36827f-f57200-95234d-262730 */
  --c-dark: #262730;
  --c-light: #f5f5f5;
  --c-semi-light: #d1d2db;
  --c-primary-bright: #95c623;
  --c-primary: #769c1c;
  --c-secondary: #f57200;
  --c-ternary: #36827f;

  --f-title-1: 700 4em "Caveat", sans-serif;
  --f-title-2: 600 2.5em "Caveat", sans-serif;
  --f-title-3: 600 2em "Caveat", sans-serif;
  --f-title-4: 500 2em "Caveat", sans-serif;
  --f-title-5: 500 1.5em "Caveat", sans-serif;
  --f-title-6: italic 400 1.5em "Caveat", sans-serif;

  --f-text: 300 1em "Nunito", sans-serif;
  --f-text-bold: 500 1em "Nunito", sans-serif;
  --f-text-cursive: 300 italic 1em "Nunito", sans-serif;

  --f-text-code: 1em "Fira Code", monospace;
  --f-text-code-bold: 600 1em "Fira Code", monospace;
  --f-text-code-cursive: italic 1em "Fira Code", monospace;

  --f-text-note: 1em "Reenie Beanie" cursive;
}

body {
  background-color: var(--c-dark);
  background-image: 
    url(/public/papermask-transparent-half.png),
    linear-gradient(206deg, rgb(from var(--c-semi-light) r g b / 0.2), transparent)
  ;
  background-size: 100%, 100%;
  background-attachment: fixed;

  color: var(--c-light);
  font: var(--f-text);
}

a {
  color: var(--c-primary);
  transition: all 125ms;
}

a:hover {
  color: var(--c-primary-bright);
  transform: scale(1.1);
}

h1 { font: var(--f-title-1); }
h2 { font: var(--f-title-2); }
h3 { font: var(--f-title-3); }
h4 { font: var(--f-title-4); }
h5 { font: var(--f-title-5); }
h6 { font: var(--f-title-6); }