@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

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

:root {
  --bg: hsl(0, 0%, 5%);
  --bg-light: hsl(0, 0%, 10%);
  --bg-lighter: hsl(0, 0%, 30%);
  --text: hsl(0, 0%, 95%);
  --text-muted: hsl(0, 0%, 70%);
  --text-less: hsl(0, 0%, 50%);
  --accent30: hsl(150, 80%, 30%);
  --accent20: hsl(150, 80%, 20%);
  --danger40: hsl(10, 80%, 40%);
  --danger30: hsl(10, 80%, 20%);
  --ff: "Inter", sans-serif;
  --ff2: "Noto Sans", sans-serif;
  --p: 1rem / 1.5rem var(--ff);
  --h1: 600 3rem / 1.2rem var(--ff2);
  --h2: 600 2rem / 1.2rem var(--ff2);
  --spacing1: 4px;
  --spacing2: 8px;
  --spacing3: 16px;
  --spacing4: 20px;
  --spacing5: 20px;
  --spacing6: 40px;
  --spacing7: 80px;
  --spacing8: 160px;
}

body {
  background-color: var(--bg);
  color: var(--text-muted);
  font: var(--p);
  min-height: 100vh;
}

h1 {
  font: var(--h1);
  color: var(--text);
}
h2 {
  font: var(--h2);
  color: var(--text);
}
a {
  color: var(--text);
  text-decoration: none;
  transition: all 300ms ease-in-out;
  &:hover {
    color: var(--accent30);
  }
}

.btn,
button {
  all: unset;
  background-color: var(--bg-lighter);
  color: var(--text);
  padding: var(--spacing2) var(--spacing3);
  border-radius: var(--spacing2);
  transition: all 300ms ease-in-out;
  text-align: center;
}
.btn:hover,
button:hover {
  color: var(--accent30);
  cursor: pointer;
}
.cte-btn {
  all: unset;
  background-color: var(--accent30);
  color: var(--text);
  padding: var(--spacing2) var(--spacing3);
  border-radius: var(--spacing2);
  transition: all 300ms ease-in-out;
  text-align: center;
  &:hover {
    cursor: pointer;
    color: var(--text);
    background-color: var(--accent20);
  }
}
.danger-btn {
  all: unset;
  background-color: var(--danger40);
  color: var(--text);
  padding: var(--spacing2) var(--spacing3);
  border-radius: var(--spacing2);
  transition: all 300ms ease-in-out;
  &:hover {
    cursor: pointer;
    color: var(--text);
    background-color: var(--danger30);
  }
}

header {
  padding: var(--spacing4) 0;
  width: 90%;
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  flex-wrap: wrap;
}

main {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
}

.toast {
  padding: var(--spacing2) var(--spacing3);
  margin: var(--spacing2) 0;
  text-align: center;
  border-radius: var(--spacing2);
  border: 1px solid var(--accent20);
  color: var(--accent20);
  & > a {
    color: var(--accent30);
    &:hover {
      color: var(--text);
    }
  }
}

.card {
  background-color: var(--bg-light);
  border-radius: var(--spacing2);
  padding: var(--spacing2) var(--spacing3);
}

.message-container {
  padding: var(--spacing3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing2);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacing2);
  padding: var(--spacing3) 0;
}

.card-text-container {
  display: flex;
  flex-direction: column;
}

.lucide-circle-user-round-icon {
  width: 4rem;
  height: 4rem;
  stroke-width: 1;
  color: var(--accent30);
}

.card-username {
  color: var(--text);
}
.card-time {
  color: var(--text-less);
}

.card-footer {
  padding: var(--spacing3) 0;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-card {
  background-color: var(--bg-light);
  padding: var(--spacing6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing4);
  border-radius: var(--spacing2);
}

label {
  display: block;
  color: var(--text);
}

.form-input,
.form-textarea {
  padding: var(--spacing2) var(--spacing3);
  font: var(--p);
  color: var(--text-muted);
  background-color: var(--bg-light);
  border-radius: var(--spacing2);
  border: 2px solid var(--text-less);
  min-width: 100%;
}

.form-textarea {
  min-height: 150px;
  width: 100%;
  resize: vertical;
}

.message-form {
  background-color: var(--bg-light);
  padding: var(--spacing6);
  display: flex;
  flex-direction: column;
  align-items: normal;
  min-width: 100%;
  gap: var(--spacing3);
  border-radius: var(--spacing2);
}

.error-container {
  border: 1px solid var(--danger40);
  padding: var(--spacing1) var(--spacing2);
  color: var(--danger40);
  border-radius: var(--spacing2);
  & li {
    list-style: none;
  }
}

.error-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing3);
  align-items: center;
}