@import "common.css";
@import "components/landing-top.css";
@import "fonts.css";
@import "components/footer.css";
@import "components/header.css";
@import "components/feature-card.css";
@import "components/pagination.css";
@import "components/column-selector.css";
@import "components/data-table.css";
@import "components/screenshot-modal.css";

:root {
  --color-home-explore-more-text: var(--blue-3);
}

[data-theme="dark"] {
  --color-home-explore-more-text: var(--white-1);
}

body {
  margin: 0;
  background-color: var(--color-background);
}

.landing-background {
  background-image: url("../images/landing-background.webp");
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  gap: 0;
}

.columns-container {
  box-sizing: border-box;
  margin: 0 5rem;
}

.table-container {
  overflow-x: auto;
  box-sizing: border-box;
  margin: 0 5rem;
}

.data-table {
  background-color: var(--color-background);
}

.explore-more-data {
  margin: 0 5rem;
  padding-top: 2rem;
}

.explore-more-data a {
  text-decoration: none;
  color: var(--color-home-explore-more-text);
}

.feature-container {
  padding: 3.5rem 5rem;
}

.feature-title {
  text-align: center;
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-text);
}

@media (width < 1200px) {
  .feature-container {
    padding: 3rem;
  }

  .explore-more-data,
  .columns-container,
  .table-container {
    margin: 0 3rem;
  }


  .feature-title {
    font-size: 3rem;
  }
}

@media (width < 992px) {
  .feature-container {
    padding: 2rem;
  }

  .explore-more-data,
  .columns-container,
  .table-container {
    margin: 0 2rem;
  }

  .feature-title {
    font-size: 2.5rem;
  }
}

@media (width < 768px) {
  .feature-title {
    font-size: 2rem;
  }
}