html {
  scroll-behavior: smooth;
}

body {
  /* Theme colours */
  --pink: #EF839D;
  --light-pink: #FFCAD0;
  --lighter-pink: #FFE7E7;
  --orange: #F5917B;
  --light-orange: #FFC4A9;
  --navy: #252D41;
  --light-navy: #354265;
  --dark-navy: #141D34;

  /* Default is dark theme */
  --light--primary-background: #FFFFEF;
  --light--secondary-background: #FDF5ED;
  --light--primary-accent: #CA634D;
  --light--primary-accent-light: var(--orange);
  --light--primary-accent-lighter: #FFBC9F;
  --light--secondary-accent: #E55F98;
  --light--secondary-accent-light: #FEA0C8;
  --light--primary-heading: #D02B53;
  --light--primary-text: #483B35;
  --light--secondary-text: var(--pink);
  --light--link: var(--orange);
  --light--link-hover: #FFBC9F;
  --light--card-background: #FFFFFF;
  --light--label: #A98778;

  --dark--primary-background: var(--navy);
  --dark--secondary-background: var(--dark-navy);
  --dark--tertiary-background: var(--light-navy);
  --dark--primary-accent: var(--pink);
  --dark--primary-accent-light: var(--light-pink);
  --dark--primary-accent-lighter: var(--lighter-pink);
  --dark--secondary-accent: var(--orange);
  --dark--secondary-accent-light: var(--light-orange);
  --dark--primary-heading: #FFC48D;
  --dark--secondary-heading: var(--pink);
  --dark--link: var(--pink);
  --dark--link-hover: var(--light-pink);
  --dark--primary-text: #FDF5ED;
  --dark--secondary-text: var(--light-pink);
  --dark--card-background: #2C3651;
  --dark--label: #FFFFFF;

  --primary-background: var(--dark--primary-background);
  --secondary-background: var(--dark--secondary-background);
  --tertiary-background: var(--dark--tertiary-background);
  --primary-accent: var(--dark--primary-accent);
  --primary-accent-light: var(--dark--primary-accent-light);
  --primary-accent-lighter: var(--dark--primary-accent-lighter);
  --secondary-accent: var(--dark--secondary-accent);
  --secondary-accent-light: var(--dark--secondary-accent-light);
  --primary-heading: var(--dark--primary-heading);
  --secondary-heading: var(--dark--secondary-heading);
  --link: var(--dark--link);
  --link-hover: var(--dark--link-hover);
  --primary-text: var(--dark--primary-text);
  --card-background: var(--dark--card-background);
  --label: var(--dark--label);

  background-color: var(--primary-background);
  color: var(--primary-text);
  font-family: "Inconsolata", "monospace";
  margin: 0;
}

h1,
h2 {
  color: var(--primary-heading);
}

h3,
h4,
h5,
h6 {
  color: var(--secondary-heading);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
}

@media only screen and (prefers-color-scheme: dark) {
  body {
    --primary-background: var(--dark--primary-background);
    --secondary-background: var(--dark--secondary-background);
    --tertiary-background: var(--dark--tertiary-background);
    --primary-accent: var(--dark--primary-accent);
    --primary-accent-light: var(--dark--primary-accent-light);
    --primary-accent-lighter: var(--dark--primary-accent-lighter);
    --primary-accent-dark: var(--dark--primary-accent-dark);
    --secondary-accent: var(--dark--secondary-accent);
    --secondary-accent-light: var(--dark--secondary-accent-light);
    --secondary-accent-dark: var(--primary-accent-dark);
    --primary-heading: var(--dark--primary-heading);
    --secondary-heading: var(--dark--secondary-heading);
    --link: var(--dark--link);
    --link-hover: var(--dark--link-hover);
    --primary-text: var(--dark--primary-text);
    --card-background: var(--dark--card-background);
    --label: var(--dark--label);
  }
}