/* Reset */

html {
  box-sizing: border-box;
  font-size: 14px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* Global CSS Variables */

:root {
  --background-color: #fff;
  --heading-color: #000;
  --text-color: #121416d8;
  --link-color: #543fd7;
}

html[data-theme='light'] {
  --background-color: #fff;
  --heading-color: #000;
  --text-color: #121416d8;
  --link-color: #543fd7;
}

html[data-theme='dark'] {
  --background-color: #202124;
  --heading-color: #e8eaed;
  --text-color: #9aa0a6;
  --link-color: #828fff;
}

/* Application Styles */
body {
  font-family: "Google Sans", Roboto, arial, sans-serif, "Noto Color Emoji", "apple color emoji", "windows emoji", "windows symbol";
  background: var(--background-color);
  color: var(--heading-color);
}