html {
  scroll-behavior: smooth;
}

body {
  /* Default is light theme */
  --light--primary-background: #ffffff;
  --light--secondary-background: #fdf8f5;

  --light--primary-accent: #1482e3;
  --light--primary-accent-soft: #5caff9;
  --light--primary-accent-light: #c4e0f8;
  --light--primary-accent-lighter: #e1eefa;
  --light--primary-accent-lightest: #f7fbff;

  --light--secondary-accent: #4ed4b2;
  --light--secondary-accent-light: #dcf6f0;

  --light--primary-heading: #2a2a62;

  --light--primary-text: #2a2a62;
  --light--text: #000000;
  --light--text-light: #FFFFFF;
  --light--sidebar-text: #2a2a62;
  --light--author-text: #525284;
  --light--mini-event-card-text: #000000;

  --light--primary-title: #2a2a62;
  --light--primary-subtitle: #2a2a62;
  --light--secondary-subtitle: #2a2a62;

  --light--form-invalid: #9f616a;
  --light--warning-background: #dd0014;
  --light--warning-text: #ffffff;

  --light--link: #1482e3;
  --light--link-hover: #4ed3b2;

  --light--input-background: #f0f0f0;
  --light--input-placeholder-text: #bbbbbb;
  --light--input-text: #6b6b6b;

  --light--icon: #2A2A62;

  --light--navbar-page-overlay: hsla(0,0%,47.1%,0.6980392156862745);
  --light--code-background: #f0f0f0;

  --light--button-background: #1482e3;
  --light--footer-background: #2a2a62;
  --light--card-background: #FFFFFF;
  --light--dark-card-background: #DCF6F0;
  --light--table-header: #DCF6F0;
  --light--table-section: #f7fbff;

  --light--blue-gradient: #1481E3;
  --light--border: #2a2a62;
  --light--marker: #1482e3;

  --dark--primary-background: #171729;
  --dark--secondary-background: #252542;

  --dark--primary-accent: #5CAFF9;
  --dark--primary-accent-soft: #5cb0f9;
  --dark--primary-accent-light: #252542;
  --dark--primary-accent-lighter: #171729;
  --dark--primary-accent-lightest: #464671;

  --dark--secondary-accent: #4ed3b2;
  --dark--secondary-accent-light: #525284;

  --dark--primary-heading: #fcf7f4;

  --dark--form-invalid: #9f616a;
  --dark--warning-background: #dd0014;
  --dark--warning-text: #ffffff; 

  --dark--link: #4ED4B2;
  --dark--link-hover: #C1F0E4;

  --dark--primary-text: #ffffff;
  --dark--text: #AFAFD3;
  --dark--text-light: #FFFFFF;
  --dark--sidebar-text: #AFAFD3;
  --dark--author-text: #ABABF2;
  --dark--mini-event-card-text: #5CAFF9;

  --dark--input-background: #C4C4C4;
  --dark--input-placeholder-text: #bbbbbb;
  --dark--input-text: #6b6b6b;

  --dark--icon: #ffffff;

  --dark--primary-title: #5CAFF9;
  --dark--primary-subtitle: #E0E0F7;
  --dark--secondary-subtitle: #ABABF2;

  --dark--navbar-page-overlay: rgba(0, 0, 0, 0.7);
  --dark--code-background: #3d3d68;

  --dark--button-background: #1482e3;
  --dark--footer-background: #525284;
  --dark--card-background: #272751;
  --dark--dark-card-background: #272751;
  --dark--table-header: #252542;
  --dark--table-section: #202037;

  --dark--blue-gradient: #5CAFF9;
  --dark--border: #2A2A62;
  --dark--marker: #C5C5F0;

  --primary-background: var(--light--primary-background);
  --secondary-background: var(--light--secondary-background);

  --primary-accent: var(--light--primary-accent);
  --primary-accent-soft: var(--light--primary-accent-soft);
  --primary-accent-light: var(--light--primary-accent-light);
  --primary-accent-lighter: var(--light--primary-accent-lighter);
  --primary-accent-lightest: var(--light--primary-accent-lightest);

  --secondary-accent: var(--light--secondary-accent);
  --secondary-accent-light: var(--light--secondary-accent-light);

  --primary-heading: var(--light--primary-heading);

  --form-invalid: var(--light--form-invalid);
  --warning-background: var(--light--warning-background);
  --warning-text: var(--light--warning-text);

  --link: var(--light--link);
  --link-hover: var(--light--link-hover);

  --primary-text: var(--light--primary-text);
  --text: var(--light--text);
  --text-light: var(--light--text-light);
  --sidebar-text: var(--light--sidebar-text);
  --author-text: var(--light--author-text);
  --mini-event-card-text: var(--light--mini-event-card-text);

  --input-background: var(--light--input-background);
  --input-placeholder-text: var(--light--input-placeholder-text);
  --input-text: var(--light--input-text);

  --icon: var(--light--icon);

  --primary-title: var(--light--primary-title);
  --primary-subtitle: var(--light--primary-subtitle);
  --secondary-subtitle: var(--light--secondary-subtitle);

  --navbar-page-overlay: var(--light--navbar-page-overlay);
  --code-background: var(--light--code-background);

  --button-background: var(--light--button-background);
  --footer-background: var(--light--footer-background);
  --card-background: var(--light--card-background);
  --dark-card-background: var(--light--dark-card-background);
  --table-header: var(--light--table-header);
  --table-section: var(--light--table-section);

  --blue-gradient: var(--light--blue-gradient);
  --border: var(--light--border);
  --marker: var(--light--marker);

  background-color: var(--primary-background);
  color: var(--text);
  font-family: "Poppins", "sans-serif";
  font-size: 1rem;
  font-weight: 400;
  line-height: calc(30 / 16);

  margin: 0;
}

input {
  font-family: "Poppins", "sans-serif";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-style: normal;
  line-height: 1.5;
  color: var(--primary-heading);
}

h1,
h2 {
  margin-top: calc(32rem / 16);
  margin-bottom: calc(16rem / 16);
}

h1 {
  font-size: calc(48rem / 16);
  font-weight: 700;
}

h2 {
  font-size: calc(36rem / 16);
  font-weight: 600;
}

h3 {
  margin-top: calc(24rem / 16);
  margin-bottom: calc(16rem / 16);

  font-size: calc(24rem / 16);
  font-weight: 600;
}

h4 {
  margin-top: calc(24rem / 16);
  margin-bottom: calc(8rem / 16);

  font-size: calc(18rem / 16);
  font-weight: 600;
}

p {
  margin: 1rem 0;
}

/* 
 * A lot of elements right next to an h4 (eg p, ol, ul, etc) have a 16px margin.
 * We need to make sure that the next item has an 8px margin-top.
 */
h4 + * {
  margin-top: calc(8rem / 16);
}

@media only screen and (max-width: calc(768rem / 16)) {
  /* h1, h2 = h3 on mobile */
  h1,
  h2 {
    margin-top: calc(24rem / 16);
    margin-bottom: calc(16rem / 16);

    font-size: calc(24rem / 16);
    font-weight: 600;
  }
}

@media only screen and (prefers-color-scheme: dark) {
  body {
    --primary-background: var(--dark--primary-background);
    --secondary-background: var(--dark--secondary-background);

    --primary-accent: var(--dark--primary-accent);
    --primary-accent-soft: var(--dark--primary-accent-soft);
    --primary-accent-light: var(--dark--primary-accent-light);
    --primary-accent-lighter: var(--dark--primary-accent-lighter);
    --primary-accent-lightest: var(--dark--primary-accent-lightest);

    --secondary-accent: var(--dark--secondary-accent);
    --secondary-accent-light: var(--dark--secondary-accent-light);

    --primary-heading: var(--dark--primary-heading);

    --form-invalid: var(--dark--form-invalid);
    --warning-background: var(--dark--warning-background);
    --warning-text: var(--dark--warning-text);

    --link: var(--dark--link);
    --link-hover: var(--dark--link-hover);

    --primary-text: var(--dark--primary-text);
    --text: var(--dark--text);
    --text-light: var(--dark--text-light);
    --sidebar-text: var(--dark--sidebar-text);
    --author-text: var(--dark--author-text);
    --mini-event-card-text: var(--dark--mini-event-card-text);

    --input-background: var(--dark--input-background);
    --input-placeholder-text: var(--dark--input-placeholder-text);
    --input-text: var(--dark--input-text);

    --icon: var(--dark--icon);

    --primary-title: var(--dark--primary-title);
    --primary-subtitle: var(--dark--primary-subtitle);
    --secondary-subtitle: var(--dark--secondary-subtitle);

    --navbar-page-overlay: var(--dark--navbar-page-overlay);
    --code-background: var(--dark--code-background);

    --button-background: var(--dark--button-background);
    --footer-background: var(--dark--footer-background);
    --card-background: var(--dark--card-background);
    --table-header: var(--dark--table-header);
    --table-section: var(--dark--table-section);

    --blue-gradient: var(--dark--blue-gradient);
    --border: var(--dark--border);
    --marker: var(--dark--marker);
  }
}