@tailwind components;

/* #app {
  
} */

.divider {
  border-bottom-width: 1px;
  padding-bottom: 3px;
  border-color: #38444d;
}

.content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}

.main-content {
  padding: 20px 25px;
  text-align: left;
}

.logo {
  height: 6em;
  padding: 1.5em;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.preact:hover {
  filter: drop-shadow(0 0 2em #673ab8aa);
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

.users-score {
  color: #a8adb3;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media screen and(max-width: 425px) {
  .users-score {
    font-size: .75rem;
    line-height: 1rem;
  }

  .users-score-bar p {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}



@layer components {
  .text-prime {
    @apply text-secondary
  }
}