@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

.list-wrapper {
  background: var(--main);
  max-height: 80px;
  width: 100%;
}

.list-item {
  display: flex;
  border-radius: 1.125rem;
}

.list-avatar {
  width: 80px;
  height: 80px;
  background-size: cover;
  border-radius: 0; /* rounded-none */
  overflow: hidden;
  flex-shrink: 0;
}

.list-info {
  flex-shrink: 1;
  padding-left: 0.75rem; /* pl-3 */
  padding-top: 0.5rem; /* pt-2 */
  margin-top: 0.25rem; /* my-1 */
  margin-bottom: 0.25rem; /* my-1 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-name {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700; /* font-bold */
  margin-top: 0.25rem; /* my-1 */
  margin-bottom: 0.25rem; /* my-1 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transition-shadow {
  transition: box-shadow 0.3s ease-in-out;
}