* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  display: block;
}

.wrapper {
  font-family: "DM Sans", sans-serif;
  color: hsl(233, 18%, 9%);
  max-inline-size: 375px;
  margin: auto;
  padding: 1rem;
}

.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-end: 1rem;
  margin-block-end: 2.5rem;
}
.logo-container .logo {
  block-size: 1.875rem;
}
.logo-container .theme-btn {
  background-color: hsl(240, 24%, 96%);
  padding: 0.375rem;
  border: none;
  border-radius: 0.375rem;
}
.logo-container .theme-btn .theme-icon {
  inline-size: 1.25rem;
}

.title {
  font-family: "Dm Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -1px;
  text-align: center;
}

.form {
  margin-block: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form .text-input {
  font-family: "Dm Sans", sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.6px;
  line-height: 140%;
  inline-size: 100%;
  block-size: 200px;
  padding: 0.75rem;
  border: 2px solid hsl(240, 26%, 92%);
  border-radius: 0.75rem;
  resize: none;
  background-color: hsl(240, 24%, 96%);
  color: hsl(235, 13%, 19%);
}
.form .text-input::-moz-placeholder {
  color: hsl(235, 13%, 19%);
}
.form .text-input::placeholder {
  color: hsl(235, 13%, 19%);
}
.form .text-input:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 10px hsl(274, 90%, 73%));
}
.form .text-input[data-exceeded=true] {
  border-color: hsl(15, 99%, 67%);
  filter: drop-shadow(0 0 8px hsl(15, 99%, 43%));
}
.form .hint-text {
  font-family: "Dm Sans", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.6px;
  line-height: 130%;
  color: hsl(15, 99%, 67%);
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}
.form .options-container {
  display: grid;
  gap: 0.75rem;
}
.form .options-container .option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.form .options-container .option input[type=number] {
  font-family: "Dm Sans", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.6px;
  line-height: 130%;
  color: inherit;
  display: none;
  background-color: transparent;
  padding: 0.25rem 0.75rem;
  border: 1px solid hsl(234, 14%, 29%);
  border-radius: 0.375rem;
  max-width: 5ch;
  text-align: center;
  outline: none;
}
.form .options-container .option input[type=number]::-webkit-outer-spin-button, .form .options-container .option input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form .options-container .option input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid hsl(233, 18%, 9%);
  border-radius: 4px;
  outline: none;
}
.form .options-container .option input[type=checkbox]:hover {
  cursor: pointer;
}
.form .options-container .option input[type=checkbox]:checked {
  background-image: url(../images/icon-check.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-color: hsl(274, 90%, 73%);
  border-color: hsl(274, 90%, 73%);
}
.form .options-container .option input[type=checkbox]:focus-visible {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #d3a0fa;
  transition: box-shadow 0.3s ease;
  background-color: white;
  border-color: hsl(240, 26%, 92%);
}
.form .options-container .option input[type=checkbox]:focus-visible:checked {
  background-color: hsl(274, 90%, 73%);
}

.stats {
  display: grid;
  gap: 1rem;
}
.stats .stat {
  block-size: 130px;
  border-radius: 0.75rem;
  padding: 1.25rem;
  background-repeat: no-repeat;
  background-size: auto 150px;
  background-position: right -50px center;
}
.stats .value {
  font-family: "Dm Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -1px;
}
.stats .info {
  font-family: "Dm Sans", sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.6px;
  line-height: 140%;
}
.stats .total-char {
  background-color: hsl(274, 90%, 80%);
  background-image: url(../images/pattern-character-count.svg);
}
.stats .word-count {
  background-color: hsl(37, 100%, 50%);
  background-image: url(../images/pattern-word-count.svg);
}
.stats .sentence-count {
  background-color: hsl(15, 99%, 67%);
  background-image: url(../images/pattern-sentence-count.svg);
}

.density {
  margin-block: 1.5rem 1rem;
  display: grid;
  gap: 1.25rem;
}
.density .density-title {
  font-family: "Dm Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 130%;
}
.density .density-results {
  font-family: "Dm Sans", sans-serif;
  font-size: 1rem;
  letter-spacing: -0.6px;
  line-height: 130%;
  display: grid;
  gap: 0.75rem;
}
.density .density-results .letter-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  list-style: none;
}
.density .density-results .letter-data .letter {
  inline-size: 1rem;
}
.density .density-results .letter-data .progress-bar {
  block-size: 0.75rem;
  inline-size: 13.25rem;
  background-color: hsl(240, 24%, 96%);
  border-radius: 0.75rem;
  flex: 1;
}
.density .density-results .letter-data .bar-fill {
  block-size: 0.75rem;
  background-color: hsl(274, 90%, 80%);
  border-radius: 0.75rem;
}
.density .density-results .letter-data .values {
  inline-size: 5.375rem;
  text-align: right;
}
.density .see-more-btn {
  font-family: "Dm Sans", sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.6px;
  line-height: 140%;
  justify-self: left;
  display: none;
  background: none;
  border: none;
}

body[data-dark-mode=true] {
  background-color: hsl(233, 18%, 9%);
}
body[data-dark-mode=true] .wrapper {
  color: hsl(240, 24%, 96%);
}
body[data-dark-mode=true] .wrapper .theme-btn {
  background-color: hsl(235, 13%, 19%);
}
body[data-dark-mode=true] .wrapper .text-input {
  background-color: hsl(235, 14%, 15%);
  color: inherit;
  border-color: hsl(235, 13%, 19%);
}
body[data-dark-mode=true] .wrapper .text-input::-moz-placeholder {
  color: inherit;
}
body[data-dark-mode=true] .wrapper .text-input::placeholder {
  color: inherit;
}
body[data-dark-mode=true] .wrapper .form input[type=checkbox] {
  border: 1px solid hsl(240, 26%, 92%);
}
body[data-dark-mode=true] .wrapper .stats {
  color: hsl(233, 18%, 9%);
}
body[data-dark-mode=true] .wrapper .progress-bar {
  background-color: hsl(235, 14%, 15%);
}
body[data-dark-mode=true] .wrapper .see-more-btn {
  color: inherit;
}

@media (min-width: 580px) {
  .wrapper {
    padding-inline: 2rem;
    max-inline-size: 728px;
  }
  .title {
    font-family: "Dm Sans", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -1px;
    max-inline-size: 510px;
    margin: 0 auto;
  }
  .form .options-container {
    display: flex;
  }
  .form .options-container .reading-time {
    margin-left: auto;
  }
  .stats {
    display: flex;
  }
  .stats .stat {
    block-size: 150px;
    background-position: right -70px center;
    flex: 1;
    padding: 1rem 0.75rem;
  }
  .stats .value {
    font-family: "Dm Sans", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -1px;
  }
}
@media (min-width: 1024px) {
  .wrapper {
    max-inline-size: 990px;
  }
  .stats .stat {
    background-position: right -30px center;
    padding: 1rem;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}/*# sourceMappingURL=style.css.map */