/* Themes(light and dark) */


/* Light theme */
html {
  --background-color: #383c4a;
  --section-color: #2a2e3a;
  --text-color: #C8C8C8;
  --headings-color: #ffffff;
  --header-color: #2e323e;
  --site-name-color: #ffffff;;
  --site-description-color: #ffffff;
  --nav-link-color: #57cc8a;
  --nav-link-hover-color: #ffffff;
  --link-color: #8bb8df;
  --link-color-hover: 8bb8df;
  --border-color: #808080;
  --footer-color: #2e323e;
}

@media (prefers-color-scheme:light) {
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--headings-color);
  }

  header {
    background-color: var(--header-color);
  }

  .menu {
    color: white;
  }

  a {
    color: #CC99FF;
  }

  a:hover {
    color: white;
    text-decoration: underline;
  }

  .content {
    background-color: #ffffff;
  }

  main p {
    color: black;
  }

  section {
    background-color: #ffffff;
  }

  footer {
    background-color: #182329;
    color: #C8C8C8;
  }
}


/* Dark theme */
html[data-theme='dark'] {
  --background-color: #383c4a;
  --section-color: #2a2e3a;
  --text-color: #C8C8C8;
  --headings-color: #ffffff;
  --header-color: #2e323e;
  --site-name-color: #ffffff;;
  --site-description-color: #ffffff;
  --nav-link-color: #57cc8a;
  --nav-link-hover-color: #ffffff;
  --link-color: #8bb8df;
  --link-color-hover: 8bb8df;
  --border-color: #808080;
  --footer-color: #2e323e;
}

@media (prefers-color-scheme:dark) {
  body {
    background-color: #383c4a;
    color: var(--text-color);
  }

  h1, h2, h3 {
    color: white;
  }

  header {
    /* background-color: #182329; */
    background-color: #2e323e;
  }

  main {
    color: #ffffff;
  }

  .title {
    color: #ffffff;
  }

  .menu {
    color: #ffffff;
  }

  a {
    color: #CC99FF;
  }

  a:hover {
    color: white;
  }

  .content {
    background-color: #182329;
  }

  main p {
    color: #C8C8C8;
  }

  section {
    background-color: #2a2e3a;
  }

  footer {
    background-color: #2e323e;
    border-top: 1px solid var(--border-color);
    color: #C8C8C8;
  }
}