@import "tailwindcss";

* {
  @apply box-border m-0 p-0;
}

body {
  @apply bg-(--col0) text-white flex justify-center items-center h-screen text-center select-none;
  font-family: "Lexend", sans-serif;

  --col0: rgb(8, 8, 8);
  --col1: rgb(16, 16, 16);
  --col2: rgb(32, 32, 32);
  --col3: rgb(48, 48, 48);
  --col4: rgb(64, 64, 64);
  --col5: rgb(80, 80, 80);
  --col6: rgb(96, 96, 96);
  --col7: rgb(112, 112, 112);
  --col8: rgb(128, 128, 128);
}

.container {
  @apply w-[90vw] h-[90vh] bg-(--col1) border border-(--col3) p-4 rounded-lg;
}

h1 {
  @apply mb-2;
}

p {
  @apply text-base mb-4;
}

.form {
  @apply flex flex-col items-center gap-2;
}

.slider-section {
  @apply flex flex-col items-center w-full;
}

#password-length {
  @apply w-full;
}

button {
  @apply bg-(--col3) hover:bg-(--col5) border border-(--col5) hover:border-(--col7) rounded-lg cursor-pointer transition-colors;
}

.preset-buttons {
  @apply flex gap-2 flex-wrap justify-center;
}

.preset-btn {
  @apply px-2 py-1;
}

.generate-btn {
  @apply px-4 py-2;
}

.result-section {
  @apply flex flex-col items-center justify-center mt-2 select-text;
}

.password-display {
  @apply w-[80vw] mb-2 p-2 bg-(--col3) border border-(--col5) rounded-lg wrap-break-word;
}

.result-buttons {
  @apply flex flex-row gap-2.5 justify-center items-center;
}

.copy-btn {
  @apply px-4 py-2;
}