html,
body {
  padding: 0;
  margin: 0;
  background-color: black;
  color: beige;
}

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

:root {
  --nav-bg: theme(colors.cyan.800);
}
/* Wrap our app content so it'*s not covered by nav bar */
.app-container {
  color: beige;
}

/* Style our main screen */
.upload-box {
  @apply cursor-pointer m-14 flex  justify-center rounded-md border-2 border-cyan-600 px-3 pt-14 pb-14;
}

.description-input {
  @apply w-full p-2 rounded-md text-gray-400 border-2 border-cyan-700 bg-gray-800 placeholder:text-gray-400;
}

.button {
  @apply w-full rounded bg-cyan-700 py-12 px-3 text-sm font-semibold text-gray-300 shadow-sm hover:bg-cyan-500 hover:text-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600;
}

your-photos::part(list){
  @apply m-4;
}
your-photos::part(btn){
  @apply text-center rounded w-32 right-0 bg-cyan-900 py-3 px-2.5 text-sm font-semibold text-gray-300;
}
your-photos::part(item) {
@apply p-4 shadow-xl;
}
your-photos::part(image){
  width:100%;
}