export const HeadingStyles = 'text-2xl font-bold text-green-400';

export const FormStyles =
  'flex flex-row items-center w-full mt-16 justify-items-center animate-pulse';

export const LiStyles =
  'w-full sm:h-12 md:h-16 sm:p-1 md:p-2 ml-3 sm:text-2xl md:text-4xl lg:text-5xl font-bold text-center text-green-500 transition duration-500 ease-in-out transform border-2 border-gray-600 shadow-md cursor-pointer rounded-xl hover:-translate-y-1 hover:scale-100';

export const InputStyles =
  'w-full ml-3 font-bold text-center text-green-400 border-2 border-green-400 sm:p-3 sm:text-xl md:p-3 md:text-2xl rounded-xl focus:outline-none focus:underline';

export const HeaderStyles =
  'flex justify-between w-5/6 items-center border-b-4 border-green-400 p-6 m-auto';

export const ItemStyles =
  'w-full ml-3 font-bold text-center text-green-500 border-2 border-gray-600 rounded-xl';

export const inputClasses =
  'w-full sm:h-12 md:h-16 sm:p-1 md:p-2 ml-3 sm:text-2xl md:text-4xl lg:text-5xl font-bold text-center text-green-400 border-2 border-green-200 rounded-xl focus:outline-none focus:underline';

export const editClasses =
  'w-full p-3 ml-3 text-5xl font-bold text-center text-green-500 border-2 border-gray-600 rounded-xl';

export const TodoStyles = 'flex flex-row w-full my-2';
