/* Tailwind CSS Base Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 24.6 95% 53.1%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 20 14.3% 86%;
    --input: 60 16.7% 97%;
    --ring: 226 84.2% 88%;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }

  a {
    color: hsl(var(--primary));
    text-decoration: none;
  }

  a:hover {
    color: hsl(var(--secondary));
  }

  /* Buttons */
  button {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.3s ease;
  }

  button:hover {
    background-color: hsl(var(--secondary));
  }

  /* Navbar */
  nav ul li a {
    color: hsl(var(--primary));
    transition: color 0.3s ease;
  }

  nav ul li a:hover {
    color: hsl(var(--secondary));
  }

  /* Header Section */
  header {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  header h4 {
    color: hsl(var(--foreground));
  }

  /* Projects Section */
  section {
    padding: 2rem 0;
  }

  section.bg-card {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
  }

  section.bg-card h2 {
    color: hsl(var(--foreground));
  }

  section.bg-card p {
    color: hsl(var(--foreground));
  }

  /* Menu Toggle Button */
/* General Styling */
.bg-primary {
  background-color: #f57c00; /* Primary background color */
}

.text-primary-foreground {
  color: white; /* Text color */
}

.shadow-lg {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Menu Button from Uiverse.io */
.menuButton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 13%;
  color: #090909;
  width: 3.5em;
  height: 3.5em;
  border-radius: 0.5em;
  background: #171717;
  border: 1px solid #171717;
  transition: all .3s;
  box-shadow: inset 4px 4px 12px #3a3a3a, inset -4px -4px 12px #000000;
}

.menuButton:hover {
  border: 1px solid black;
}

.menuButton:active {
  color: #666;
  box-shadow: 6px 6px 12px #3a3a3a, -6px -6px 12px #000000;
}

input[type="checkbox"] {
  display: none;
}

.menuButton span {
  width: 30px;
  height: 4px;
  background: rgb(200, 200, 200);
  border-radius: 100px;
  transition: 0.3s ease;
}

input[type="checkbox"]:checked + label .top {
  transform: translateY(290%) rotate(45deg);
  width: 40px;
}

input[type="checkbox"]:checked + label .bot {
  transform: translateY(-270%) rotate(-45deg);
  width: 40px;
  box-shadow: 0 0 10px #495057;
}

input[type="checkbox"]:checked + label .mid {
  opacity: 0;
}

/* Flexbox alignment */
.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.absolute {
  position: absolute;
}

.top-20 {
  top: 5rem;
}

.left-0 {
  left: 0;
}

.bg-primary {
  background-color: #f57c00; /* Adjust this as needed */
}

/* Hidden state for the menu links */
.hidden {
  display: none;
}

/* Menu link visibility when checked */
input[type="checkbox"]:checked ~ #menu-links {
  display: flex;
}

/* Menu Links Styling */
.menu-links {
  list-style: none;
}

.menu-links li a {
  text-decoration: none;
  color: white;
  transition: color 0.3s;
  display: block;
  padding: 1rem;
}

.menu-links li a:hover {
  color: #ddd;
}

.space-y-4 > *:not(:last-child) {
  margin-bottom: 1rem; /* Adds space between vertical items */
}


/*           */

  /* Projects and Cards */
  .project-card {
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    padding: 1.5rem;
    border-radius: 0.375rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .project-card h2 {
    color: hsl(var(--foreground));
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .project-card p {
    color: hsl(var(--foreground));
  }

  /* Footer Section */
  footer {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: 2rem;
    text-align: center;
  }

  footer a {
    color: hsl(var(--primary-foreground));
  }

  footer a:hover {
    color: hsl(var(--secondary-foreground));
  }
}