@import "tailwindcss";
@import "./theme.css" layer(theme);

body {
  @apply text-gray-950 dark:text-gray-50;
}

main {
  @apply flex flex-col gap-4 p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
}

header {
  @apply flex flex-col justify-stretch;
}

nav {
  @apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
}

code {
  speak-as: literal-punctuation;
  @apply inline-block bg-gray-800 text-gray-50;
}

pre {
  @apply bg-gray-950 rounded-lg border-1 border-gray-300 mb-4 p-1;
}

pre > code {
  @apply !bg-gray-950 p-1;
}

footer {
  @apply bg-gray-950 text-gray-50 text-lg flex p-6;
}

h1 {
  @apply text-6xl mb-2 mt-4;
}

h2 {
  @apply text-5xl mb-2 mt-4;
}

h3 {
  @apply text-4xl mb-2 mt-4;
}

h4 {
  @apply text-3xl mb-2 mt-4;
}

h5 {
  @apply text-2xl mb-2 mt-4;
}

details {
  @apply rounded-lg bg-gray-200 text-gray-950 p-2 text-xl;
}

aside {
  @apply p-2 rounded-lg bg-gray-100 text-gray-950;
}

aside > mark {
  @apply p-1 rounded-sm bg-gray-300;
}

aside > mark.info {
  @apply bg-purple-300;
}

aside > mark.warning {
  @apply bg-yellow-300;
}

aside > mark.alert {
  @apply bg-red-300;
}

card {
  @apply flex flex-col bg-gray-200 dark:bg-gray-800 dark:text-gray-100 max-w-md rounded-lg shadow-lg outline;
}

card > top {
  @apply text-3xl font-bold text-center dark:text-gray-50;
}

card > top > img {
  @apply rounded-t-lg;
}

card > top > shape {
  @apply rounded-t-lg;
}

card > bottom {
  @apply flex text-gray-50 p-3 justify-stretch *:flex-1 gap-2;
}

card > middle {
  @apply flex flex-col text-xl p-4 gap-4;
}

label {
  @apply font-bold text-gray-950 dark:text-gray-100;
}

input {
  @apply shadow-sm outline rounded-sm p-1 bg-gray-200 text-gray-950 dark:text-gray-950;
}

input::placeholder {
  @apply text-gray-700 dark:text-gray-700;
}

button {
  @apply rounded-sm shadow-sm bg-gray-600 text-gray-50 dark:bg-gray-300 dark:text-gray-950 p-3;
}

blockquote {
  @apply border-l-5 border-gray-800 dark:border-black bg-gray-200 text-black dark:bg-gray-700 dark:text-white p-2;
}

@utility btn-hover {
  @apply !bg-gray-900 !text-gray-50;
}

@utility btn-alert {
  @apply !bg-red-800 !text-gray-50;
}

@utility btn-warning {
  @apply !bg-yellow-800 !text-gray-50;
}

@utility btn-primary {
  @apply !bg-teal-300 !text-gray-950;
}

shape {
  @apply bg-gray-300 flex flex-col justify-center items-center aspect-square p-1 text-gray-950;
}

shape.tiny {
  @apply min-w-15 w-15 max-w-15 p-0;
}

shape.xxs {
  @apply min-w-30 w-30 max-w-30 p-0;
}

shape.xs {
  @apply min-w-xs w-xs max-w-xs;
}

shape.sm {
  @apply min-w-sm w-sm max-w-sm;
}

shape.md {
  @apply min-w-md w-md max-w-md;
}

shape.lg {
  @apply min-w-lg w-lg max-w-lg;
}

shape.xl {
  @apply min-w-xl w-xl max-w-xl;
}

shape.video {
  @apply w-full aspect-video;
}

block {
  @apply flex flex-col p-4 mb-10 gap-4;
}

bar {
  @apply flex flex-row p-4 gap-4;
}

stack {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "cover";
}

stack > * {
  width: 100%;
  height: 100%;
  position: relative;
  grid-area: cover;
}

stack > .top {
  z-index: 10;
}

grid {
  @apply grid gap-2 p-4;
}

hr {
  visibility: hidden;
}

select {
  @apply text-red-50 bg-gray-800 rounded-lg border-1 border-gray-600 p-1;
}

table {
  @apply bg-gray-200 dark:bg-gray-800 shadow-lg rounded-sm;
}

@utility table-header {
  @apply text-gray-50 bg-gray-950 *:border-x *:border-black;
}

@utility table-row {
  @apply *:border-2 *:border-black *:p-1 hover:bg-gray-100 hover:text-gray-950;
}