@charset "UTF-8";
@font-face {
  font-family: DMSans-Regular;
  src: url(/assets/fonts/DM_Sans/static/DMSans-Regular.ttf);
}
@font-face {
  font-family: DMSans-Bold;
  src: url(/assets/fonts/DM_Sans/static/DMSans-Bold.ttf);
}
@font-face {
  font-family: DMSans-SemiBold;
  src: url(/assets/fonts/DM_Sans/static/DMSans-SemiBold.ttf);
}
@font-face {
  font-family: DMSans-Italic-Variable;
  src: url(/assets/fonts/DM_Sans/DMSans-Italic-VariableFont_opsz\,wght.ttf);
}
@font-face {
  font-family: DMSans-Variable;
  src: url(/assets/fonts/DM_Sans/DMSans-VariableFont_opsz\,wght.ttf);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: DMSans-Variable;
  font-size: 16px;
}

body {
  height: 100vh;
  background-image: url(/assets/images/bg-dark-theme.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.container {
  display: flex;
  flex-direction: column;
  width: 55%;
  margin: auto;
  gap: 25px;
}

nav {
  padding: 35px 0 0 0;
  display: flex;
  justify-content: space-between;
}
nav .button {
  all: unset;
  background-color: #2a2a34;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}
nav .button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.main-top h1 {
  color: white;
  font-size: 4rem;
  text-align: center;
}

h1 span:nth-child(2) {
  display: block;
}

.main-mid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.capital-sin {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

textarea {
  width: 100%;
  height: 180px;
  padding: 16px 20px;
  border: 2px solid #303038;
  border-radius: 10px;
  background-color: #22222c;
  font-size: 16px;
  resize: none;
  color: white;
}

.input-area {
  display: flex;
  justify-content: space-between;
  color: white;
}

.inputs {
  display: flex;
  gap: 15px;
}

.inp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.inp input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.inp input:hover {
  border-color: #ffffff;
}
.inp input:checked {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
}
.inp input:checked::after {
  content: "✔";
  font-size: 15px;
  color: #ffffff;
}

.seven-deadly-sins {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.total-count {
  background-color: #d3a1fa;
  background-image: url(/assets/images/pattern-character-count.svg);
  background-size: contain;
  background-position: 113%;
  background-repeat: no-repeat;
}

.word-count {
  background-color: #ff9f00;
  background-image: url(/assets/images/pattern-word-count.svg);
  background-size: contain;
  background-position: 113%;
  background-repeat: no-repeat;
}

.sentence-count {
  background-color: #ff8159;
  background-image: url(/assets/images/pattern-sentence-count.svg);
  background-size: contain;
  background-position: 113%;
  background-repeat: no-repeat;
}

.count {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  border-radius: 15px;
  height: 140px;
  color: black;
}
.count h2 {
  font-size: 3.5rem;
}
.count p {
  font-size: 1.2rem;
}

.main-bottom {
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: white;
}

.white {
  background-image: url(/assets/images/bg-light-theme.png);
}
.white label {
  color: black;
}
.white h1 {
  color: black;
}
.white h2 {
  color: black;
}
.white p {
  color: black;
}
.white input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease;
}
.white input:hover {
  border-color: #000000;
}
.white input:checked {
  background: rgba(0, 0, 0, 0.5215686275);
  border-color: #000000;
}
.white input:checked::after {
  content: "✔";
  font-size: 15px;
  color: #000000;
}
.white textarea {
  width: 100%;
  height: 180px;
  padding: 16px 20px;
  border: 2px solid rgba(63, 63, 63, 0.2196078431);
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 16px;
  resize: none;
  color: #000000;
}
.white nav .button {
  all: unset;
  background-color: rgba(63, 63, 63, 0.1215686275);
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}
.white nav .button:hover {
  background-color: rgba(0, 0, 0, 0.3647058824);
}/*# sourceMappingURL=style.css.map */