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

/* Custom CSS for homepage design */
.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Smooth animations for cards */
@layer components {
  .card-hover {
    @apply transform transition-all duration-300 ease-in-out;
  }
  
  .card-hover:hover {
    @apply -translate-y-2 shadow-2xl;
  }
  
  .tech-icon {
    @apply transition-colors duration-200;
  }
  
  .social-card {
    @apply transform transition-all duration-200 ease-in-out;
  }
  
  .social-card:hover {
    @apply scale-105;
  }
}

/* Additional gradient utilities */
@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent;
  }
  
  .bg-hero-gradient {
    @apply bg-gradient-to-br from-slate-900 via-blue-900 to-purple-900;
  }
  
  .bg-gaming-gradient {
    @apply bg-gradient-to-r from-blue-500 to-purple-600;
  }
  
  .bg-tabletop-gradient {
    @apply bg-gradient-to-r from-green-500 to-teal-600;
  }
}
/*
 * 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.
 *


 */


/*
================
Reference Colors
================

light_blue: #264e86;
white: #ffffff;
medium_blue: #3165ae;
dark_blue: #1b375e;
gray: #e6e6e6;
lighter_blue: #477ecb;
*/

.markdown p  {
  margin: 10px;
}