/* content/global.css */

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-gradient-to-br from-slate-50 to-gray-100 text-gray-900 font-poppins;
  }
  * {
    box-sizing: border-box;
  }
}

@layer components {
  .container {
    @apply mx-auto px-4;
  }
  .btn-primary {
    @apply bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-700 text-white font-bold py-3 px-8 rounded-2xl hover:from-indigo-700 hover:via-purple-700 hover:to-indigo-800 transition-all duration-300 inline-block text-center whitespace-normal break-words no-underline shadow-lg hover:shadow-xl transform hover:-translate-y-1;
  }
  .btn-secondary {
    @apply bg-gradient-to-r from-amber-400 to-orange-500 text-white font-bold py-3 px-8 rounded-2xl hover:from-amber-500 hover:to-orange-600 transition-all duration-300 inline-block text-center whitespace-normal break-words no-underline shadow-lg hover:shadow-xl transform hover:-translate-y-1;
  }
  .section-title {
    @apply text-3xl sm:text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-8;
  }
  .form-input,
  .form-textarea {
    @apply bg-white border-2 border-indigo-200 text-gray-900 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-300;
  }
  .game-card {
    @apply flex flex-col;
  }
  .game-card a {
    @apply flex flex-col h-full;
  }
  .game-card img {
    @apply flex-shrink-0;
  }
  .game-card .p-6 {
    @apply flex-grow flex flex-col;
  }
  .game-card .btn-primary {
    @apply mt-auto;
  }
}

/* Custom Utilities */
.animate-bounce-slow {
  animation: bounce-slow 2s infinite;
}

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}

/* Responsive Typography for Headers */
h1 {
  font-size: 1.8rem; /* Mobile */
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.2rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 2.8rem; /* Desktop */
  }
}

.section-title {
  font-size: 1.5rem; /* Mobile */
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  .section-title {
    font-size: 2.5rem; /* Desktop */
  }
}

/* Adjust logo/site name size for mobile */
header a .text-2xl {
  font-size: 1.25rem; /* Mobile */
}

@media (min-width: 768px) {
  header a .text-2xl {
    font-size: 1.5rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  header a .text-2xl {
    font-size: 1.8rem; /* Desktop */
  }
}
.lawMatrixNode {
  margin-top: 70px;
    /* Base padding for the law matrix node */
    padding: 1.5em; /* Adds padding to the top, right, bottom, and left */
}

.lawMatrixNode h1 {
    /* Styles for primary heading */
    font-size: 2em; /* Relative to parent font size */
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.2;
    font-weight: bold;
}

.lawMatrixNode h2 {
    /* Styles for secondary heading */
    font-size: 1.75em;
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    line-height: 1.2;
    font-weight: bold;
}

.lawMatrixNode h3 {
    /* Styles for tertiary heading */
    font-size: 1.5em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    line-height: 1.3;
    font-weight: bold;
}

.lawMatrixNode h4 {
    /* Styles for quaternary heading */
    font-size: 1.25em;
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    line-height: 1.4;
    font-weight: bold;
}

.lawMatrixNode h5 {
    /* Styles for quinary heading */
    font-size: 1.1em;
    margin-top: 0.7em;
    margin-bottom: 0.3em;
    line-height: 1.5;
    font-weight: bold;
}

.lawMatrixNode p {
    /* Styles for general paragraph text */
    font-size: 1em; /* Base font size */
    margin-bottom: 1em; /* Space between paragraphs */
    line-height: 1.6; /* Improved readability for body text */
}

.lawMatrixNode ul {
    /* Styles for unordered lists */
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.5em; /* Indentation for list items */
    list-style-type: disc; /* Default bullet style */
}

.lawMatrixNode li {
    /* Styles for list items */
    margin-bottom: 0.5em; /* Space between list items */
    line-height: 1.6; /* Improved readability for list item text */
}


.container{
  margin-left: auto;
  margin-right: auto;
}

.game-card img{
  height: 300px;
}

.btn-primary,
#playNowBtn{
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #6366f1 100%);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
}

#hero{
  padding-top: 130px !important;
  padding-bottom: 50px;
  height: auto !important;
}

#confirmAgeBtn{
  padding: 15px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
}
#confirmAgeBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(16, 185, 129, 0.4);
}
#denyAgeBtn{
  padding: 15px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
  transition: all 0.3s ease;
}
#denyAgeBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(239, 68, 68, 0.4);
}

#contact{
  margin-top: 50px;
}

.wr{
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  main{
    flex: 1;
  }
}