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

@layer components {
  .btn {
    @apply py-2 px-4 min-w-fit h-fit text-center rounded-lg focus:text-white border border-white shadow-[inset_0_-2px_4px_rgba(220,220,255,0.2)];
  }

  .poemtitle {
    @apply text-gray-800 font-garamond font-semibold text-4xl md:text-7xl mb-4 md:mb-10 p-4 border-b-4 border-gray-900 text-end;
  }

  .poembox {
    @apply bg-gray-300 flex flex-col justify-start pt-[3vh] pl-[10%] rounded-r-lg rounded-l-[40px] font-ebgaramond text-xl;
  }

  .poembody {
    @apply text-xl md:text-2xl font-medium border-l-8 border-t-2 border-white rounded-tl-[40px] rounded-br-lg bg-gradient-to-br from-white via-gray-100 to-gray-300 pl-2 md:pl-8 py-12;
  }

  .poetname {
    @apply flex justify-center w-0 md:w-[100px] md:h-[1000px] bg-black invisible md:visible;
  }

  .artbox {
    @apply h-[80vh] bg-gray-100 flex items-center justify-end p-[1vh] rounded-r-lg rounded-l-[20px] md:rounded-l-[160px];
  }
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */