/* Reset and defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "SF Pro Display", sans-serif;
  transition: background-color 0.5s ease;
}

[data-theme="dark"] body {
  background-color: #000000;
  background-image: linear-gradient(43deg, #000000 29%, #454545 75%, #000 100%);
}

[data-theme="light"] body {
  background-color: #ffffff;
  background-image: linear-gradient(
    43deg,
    #ffffff 29%,
    #d7d7d7 75%,
    #ffffff 100%
  );
}

/* Dark theme */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: white;
}

/* Light theme */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #333;
}
