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

/* Custom styles */
body {
  font-family: "Arial, sans-serif";
  box-sizing: border-box;
  background-color: #f5f5f5;
  color: #000000;
}

header {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  z-index: 1; /* Keep it on top */
}

nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav a:hover {
  color: #007bff;
}

main {
  padding: 20px;
  position: relative;
  top: 10px; /* Adjust this based on your header height */
  left: 20px; /* Align to the left */
  width: 50%; /* Adjust the width as needed */
  z-index: 1;
}

/* Custom centering style for game page */
.main-center {
  padding: 20px;
  margin: 0 auto; /* Centers horizontally */
  width: 80%; /* Adjust width as needed */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers items vertically */
  justify-content: center; /* Centers items horizontally */
  min-height: 100vh; /* Make sure it takes up the full height of the page */
  text-align: center; /* Centers the text */
}

/* Footer Styles */
footer {
  text-align: center;
  padding: 1.5rem 1rem;
  background-color: #ffffff;
  position: fixed;
  width: 100%;
  bottom: 0;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1; /* Keep footer above the canvas */
}

footer p {
  margin: 0;
  font-size: 16px;
  color: #333;
  margin-bottom: 0.5rem;
}

/* Contact Links Styles */
footer .contact-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* Center the links horizontally */
  gap: 2rem; /* Space between each link */
}

footer .contact-links li {
  display: inline;
}

footer .contact-links li a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Space between icon and text */
  transition: color 0.3s ease;
}

footer .contact-links li a:hover {
  color: #007bff; /* Change color on hover */
}

footer .contact-links li a img {
  width: 24px;
  height: 24px; /* Ensure consistent icon size */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  footer .contact-links {
    flex-direction: column;
    gap: 1rem;
  }

  footer .contact-links li a {
    font-size: 18px;
  }

  footer .contact-links li a img {
    width: 28px;
    height: 28px;
  }
}

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Common styles for both game containers */
.game-container {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 40px auto; /* Add some margin between the games */
  border: 1px solid #000;
  box-sizing: border-box; /* Ensure borders are within the defined size */
}

/* Overlay styles for both games */
.overlay {
  position: absolute; /* Sit on top of the game container */
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
  z-index: 10; /* Sit on top */
}

.overlay-content {
  text-align: center;
  color: white;
}

/* Button styles for start, restart, quit */
.btn {
  padding: 10px 20px;
  margin: 10px;
  background-color: #1da1f2;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.btn:hover {
  background-color: #0d8ae5;
}

/* Full-size quit button for menus and game over screens */
.quit-btn-large {
  padding: 10px 20px;
  background-color: #e53e3e;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.quit-btn-large:hover {
  background-color: #c53030;
}

/* Game-specific heading styles */
.game-heading {
  text-align: center; /* Center the headings above the containers */
  font-size: 24px; /* Slightly larger font size for emphasis */
  font-weight: bold; /* Bold to make them stand out */
  color: #333; /* Professional dark color */
  margin-bottom: 20px; /* Space between the heading and game container */
  margin-top: 40px; /* Space between sections */
  text-transform: uppercase; /* Optional: Uppercase styling */
  letter-spacing: 1px; /* Adds a subtle spacing between letters */
}

/* Style for the nav bar */
nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0;
}

nav li {
  display: flex;
  align-items: center;
}

nav a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 10px;
}

nav img {
  width: 32px;
  height: 32px;
  margin-right: 8px; /* Space between icon and text */
}

/* Glitch hover effect */
@keyframes glitch {
  0% {
    transform: skew(0deg, 0deg);
  }
  20% {
    transform: skew(5deg, -5deg);
  }
  40% {
    transform: skew(-5deg, 5deg);
  }
  60% {
    transform: skew(2deg, -2deg);
  }
  80% {
    transform: skew(-2deg, 2deg);
  }
  100% {
    transform: skew(0deg, 0deg);
  }
}

nav a:hover {
  animation: glitch 0.3s ease-in-out;
  color: #ffcc00;
}

#particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ensure it's behind content */
  pointer-events: none; /* Disable interactions */
}

/* Ensure the canvas covers the entire page */
#life-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* Make sure it stays behind everything */
  background-color: rgb(240, 240, 240);
}

/* Docked control panel */
#control-panel {
  position: absolute; /* Not fixed to the right anymore */
  top: 35%; /* Center vertically */
  right: 0; /* Start from the right side */
  transform: translateY(-50%); /* Adjust position to truly center */
  background-color: rgba(
    255,
    255,
    255,
    0.85
  ); /* Pastel-like transparent panel */
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
  width: 250px; /* Control panel width */
  transition: height 0.3s ease, transform 0.3s ease;
  max-height: 400px; /* Give the panel a maximum height */
  overflow: hidden;
}

/* Control panel title bar */
.control-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #c8e3ff; /* Solid title area */
  padding: 5px 8px;
  border-radius: 5px 5px 0 5px;
  font-size: 12px; /* Smaller text */
  cursor: grab;
}

/* Hidden state for control panel */
#control-panel.collapsed .control-content {
  display: none; /* Collapse the content but keep the title */
}

.toggle-btn {
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
}

.toggle-btn:hover {
  filter: brightness(2); /* Increase brightness by 50% */
}

/* Hide all content except the canvas */
body.hide-everything header,
body.hide-everything main,
body.hide-everything footer {
  display: none;
}

/* Styling for speed control and buttons */
#speed-control {
  width: 200px;
  margin: 10px 0;
}

button {
  display: block;
  margin: 5px 0;
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

/* Terminal styles */
#terminal {
  background-color: #000; /* Black background */
  color: #fafffa; /* Green text */
  font-family: "Courier New", Courier, monospace; /* Monospace font */
  padding: 20px;
  border-radius: 8px;
  overflow-y: auto; /* Make it scrollable */
  max-height: 400px; /* Limit the height */
  line-height: 1.4;
  white-space: pre-wrap; /* Preserve whitespace */
  box-sizing: border-box;
  position: relative;
}

/* Blinking cursor effect */
#terminal::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: #fafffa;
  margin-left: 2px;
  animation: blink 1s steps(2, start) infinite;
  position: absolute;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* Adjust main-content to fit the terminal */
.main-content {
  background-color: transparent; /* Make background transparent */
  padding: 0; /* Remove padding */
}

/* Responsive adjustments */
@media (max-width: 600px) {
  #terminal {
    max-height: 300px;
    padding: 10px;
  }
}

.tooltip-icon {
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  margin-left: 5px;
  color: white; /* Icon color */
  background-color: #ff9800; /* Identifiable color */
  border-radius: 50%; /* Circle shape */
  padding: 2px; /* Reduce padding for a smaller circle */
  width: 24px;
  height: 24px;
  text-align: center; /* Center the icon inside the circle */
  line-height: 16px; /* Adjust this to vertically align the icon */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow */
  transition: background-color 0.3s ease; /* Smooth hover transition */
}

.tooltip-icon:hover {
  background-color: #ff5722; /* Slightly darker color on hover */
}

/* Tooltip styling */
.tooltip-box {
  display: none;
  position: absolute; /* Positioned relative to the icon */
  background-color: #ffffff;
  color: #333;
  padding: 20px; /* Increase padding */
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  width: 350px; /* Increase width slightly */
  max-width: 80vw;
  top: 50%; /* Align the tooltip with the center of the icon vertically */
  left: calc(
    100% + 10px
  ); /* Position to the right of the icon with a 10px gap */
  transform: translateY(
    -50%
  ); /* Vertically center the tooltip relative to the icon */
  z-index: 20;
  text-align: center;
  font-size: 16px; /* Slightly increase font size */
  opacity: 1;
}

/* Ensure the image is fully opaque and centered */
.rules-image {
  width: 100%; /* Make image fit the width of the tooltip box */
  height: auto; /* Maintain aspect ratio */
  opacity: 1; /* Ensure image is fully opaque */
  margin-top: 10px;
}

.tooltip-box ul {
  padding-left: 20px;
}

.tooltip-box strong {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}

/* Right-side Info Panel */
.info-panel {
  width: 70%; /* Take up 70% of the screen */
  height: 100vh; /* Ensure the full height of the screen */
  padding: 20px;
  background-color: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 2px solid #555;
  position: relative;
  overflow: hidden;
}

.custom-header {
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
  position: fixed;
  top: 0;
  width: 100%;
}

.custom-nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.custom-nav a:hover {
  color: #007bff;
}

.custom-html {
  overflow: hidden; /* Hide scroll bars on the entire page */
  height: 100%;
  margin: 0;
  padding: 0;
}

.custom-body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.resume-container {
  position: absolute;
  top: 80px; /* Accounts for header height */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw; /* Full viewport width */
  height: calc(100vh - 80px); /* Full viewport height minus the header */
  display: flex;
  justify-content: center;
  align-items: center;
}

.resume-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}
/* Reset margins and paddings */
.projects-html,
.projects-body {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  background-color: #0d0d19;
  color: #fff;
  height: 100%;
  box-sizing: border-box;
}

.projects-header {
  background-color: #fff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}

.projects-nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.projects-nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.projects-nav a:hover {
  color: #007bff;
}

/* Intro Section Styling */
.projects-intro {
  margin-bottom: 40px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #1e1e2d 0%, #090923 100%);
  padding: 60px 20px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

.projects-intro h1 {
  font-size: 48px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.projects-intro p {
  font-size: 20px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  color: #ccc;
}

/* Projects Main Section */
.projects-main {
  padding: 120px 20px;
  max-width: 1400px; /* Keeps the content width reasonable */
  margin: 0 auto;
  text-align: center;
}

/* Projects Grid */
.projects-grid {
  display: grid;
  gap: 40px; /* Increased gap between items */
  justify-content: center; /* Centers the grid items */
}

/* Project Item Styles */
.project-item {
  background-color: #1e1e2d;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px; /* Fixed width to maintain card proportions */
  height: 420px; /* Fixed height */
  transition: transform 0.3s ease;
}

/* Add box-shadow only on hover */
.project-item:hover {
  transform: translate(-4px, -4px); /* Move up and left */
  box-shadow: 8px 8px 0px #b67acb; /* Contrasting color shadow */
}

/* Image Styles */
.project-image {
  width: 100%;
  height: 60%; /* 60% of the card's height */
  position: relative;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Subtle image scale on hover */
.project-item:hover .project-image img {
  transform: scale(1.02);
}

/* Project Info */
.project-info {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  flex-grow: 1;
}

.project-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #fff;
}

.project-description {
  font-size: 14px;
  color: #bdbdbd;
  margin: 0 10px;
}

/* Skills Styles */
.project-skills {
  width: 100%;
  padding-bottom: 10px;
  text-align: center;
}

.skill {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  margin: 5px 5px 0 0;
  transition: background-color 0.3s;
}

.skill:hover {
  background-color: #a4b6de;
  color: #000;
}

/* Link Icon Styles */
.project-link {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  padding: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s;
}

.project-link img {
  width: 20px;
  height: 20px;
}

.project-link:hover {
  background-color: #a4b6de;
}

/* Responsive Adjustments */
/* Adjust grid columns for different screen sizes */
@media (min-width: 992px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */
  }
}

@media (max-width: 991px) and (min-width: 601px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

@media (max-width: 600px) {
  .projects-grid {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }

  .project-item {
    width: 100%; /* Full width on small screens */
    height: auto; /* Adjust height accordingly */
  }

  .project-image {
    height: 200px; /* Fixed height for images on small screens */
  }
}

/* Hobbies Section Styles */
.hobbies-section {
  margin-top: 80px; /* Space between projects and hobbies */
  text-align: center;
}

.hobbies-section h2 {
  font-size: 36px;
  color: #fff;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hobbies-grid {
  display: grid;
  gap: 40px;
  justify-content: center;
}

.hobby-item {
  background-color: #2b2b3a; /* Different background color from project cards */
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  height: 420px;
  transition: transform 0.3s ease;
}

.hobby-item:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0px #b67acb; /* Slightly different shadow color */
}

.hobby-image {
  width: 100%;
  height: 60%;
  position: relative;
  overflow: hidden;
}

.hobby-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hobby-item:hover .hobby-image img {
  transform: scale(1.02);
}

.hobby-info {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  flex-grow: 1;
}

.hobby-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #fff;
}

.hobby-description {
  font-size: 14px;
  color: #bdbdbd;
  margin: 0 10px;
}

/* Responsive Adjustments */
@media (min-width: 992px) {
  .hobbies-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */
  }
}

@media (max-width: 991px) and (min-width: 601px) {
  .hobbies-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

@media (max-width: 600px) {
  .hobbies-grid {
    grid-template-columns: 1fr; /* 1 column on small screens */
  }

  .hobby-item {
    width: 100%; /* Full width on small screens */
    height: auto; /* Adjust height accordingly */
  }

  .hobby-image {
    height: 200px; /* Fixed height for images on small screens */
  }
}