/* General layout and font */
body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  animation: fadeInPage 1s ease;
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

h1 {
  text-align: center; /* Centers the heading text */
  padding: 20px; /* Adds padding inside the h1 element */
  background-color: #8e72b0; /* Sets a purple background color */
  color: white; /* Sets the text color to white */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Adds a shadow below the h1 */
  margin-bottom: 0; /* Removes bottom margin */
}

nav {
  background-color: #695086; /* Sets background color for the navigation bar */
  padding: 15px; /* Adds padding inside the nav */
  display: flex; /* Makes the nav a flex container */
  justify-content: center; /* Centers the nav items horizontally */
  gap: 20px; /* Adds space between nav items */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Adds shadow under the nav */
}

nav a {
  color: white; /* Sets the link color to white */
  text-decoration: none; /* Removes underline from links */
  font-weight: bold; /* Makes the link text bold */
  transition: color 0.3s; /* Adds smooth transition effect for color change */
}

nav a:hover {
  color: #fc5c5c; /* Changes link color on hover */
}

.profile_photo{
  border-radius: 10%;
  -webkit-border-radius: 10%;
  -moz-border-radius: 10%;
  -ms-border-radius: 10%;
  -o-border-radius: 10%;
}

.basket_photo{
  border-radius: 8%;
  -webkit-border-radius: 8%;
  -moz-border-radius: 8%;
  -ms-border-radius: 8%;
  -o-border-radius: 8%;
}

.manga_photo{
  border-radius: 10%;
  -webkit-border-radius: 10%;
  -moz-border-radius: 10%;
  -ms-border-radius: 10%;
  -o-border-radius: 10%;
}
section {
  margin: 40px auto; /* Adds vertical margin and centers the section horizontally */
  padding: 20px; /* Adds padding inside the section */
  max-width: 900px; /* Sets maximum width of the section */
  background-color: white; /* Sets background color to white */
  border-radius: 15px; /* Rounds the corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Adds shadow effect */
  animation: fadeIn 1s ease; /* Applies fade-in animation */
}


@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);} /* Starting state: invisible and moved down */
  to {opacity: 1; transform: translateY(0);} /* Ending state: fully visible and in position */
}

section h2 {
  color: #342134; /* Sets the color of h2 headings */
  margin-bottom: 10px; /* Adds space below the h2 */
}

/* Skills list */
ul.skills {
  list-style: none; /* Removes default bullet points */
  padding: 0; /* Removes default padding */
  display: flex; /* Makes it a flex container */
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  gap: 15px; /* Adds space between list items */
}

ul.skills li {
  background-color: #ede3ff; /* Sets a light purple background */
  padding: 10px 20px; /* Adds vertical and horizontal padding */
  border-radius: 25px; /* Rounds the item into a pill shape */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Adds subtle shadow */
  border: 1px solid #d4c2f0; /* Adds a light purple border */
  transition: transform 0.3s; /* Smooth transform animation */
}

ul.skills li:hover {
  transform: scale(1.15); /* Slightly enlarges the item on hover */
}

/* Projects table */
table {
  width: 100%; /* Table takes full width */
  margin-top: 20px; /* Adds space above the table */
  border-collapse: collapse; /* Merges borders between cells */
  overflow: hidden; /* Hides overflow content */
  border-radius: 10px; /* Rounds the table corners */
}

th, td {
  padding: 12px; /* Adds padding inside table cells */
  border: 1px solid #ccc; /* Adds a light gray border */
  text-align: left; /* Aligns text to the left */
}

th {
  background-color: #342134; /* Sets a purple background for header cells */
  color: white; /* Sets text color to white */
}

td a {
  color: #6b4cb3; /* Sets link color in table cells */
  font-size: 20px; /* Enlarges link font size */
}

.project-img {
  width: 100%; /* Makes image take full width of its container */
  max-width: 350px; /* Limits image width */
  margin: 15px 0; /* Adds vertical margin */
  border-radius: 10px; /* Rounds the image corners */
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2); /* Adds a soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animations */
}

.project-img:hover {
  transform: scale(1.05); /* Slightly enlarges the image */
  box-shadow: 4px 4px 15px rgba(0,0,0,0.3); /* Increases shadow intensity */
}

/* Form */
form {
  display: flex; /* Uses flex layout */
  flex-direction: column; /* Arranges children in a column */
  gap: 15px; /* Adds vertical spacing between form elements */
}

input, textarea {
  padding: 10px; /* Adds padding inside inputs and textareas */
  border: 1px solid #ccc; /* Adds a light gray border */
  border-radius: 8px; /* Rounds the corners */
  font-size: 16px; /* Sets the font size */
  width: 100%; /* Makes the input span the full width */
}

button {
  padding: 10px; /* Adds padding inside the button */
  border: none; /* Removes border */
  background-color: #6b4cb3; /* Sets background to purple */
  color: white; /* Sets text color to white */
  font-size: 16px; /* Sets font size */
  border-radius: 8px; /* Rounds button corners */
  cursor: pointer; /* Shows pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth background color transition */
}

button:hover {
  background-color: #fc5c5c; /* Darkens button background on hover */
}

/* Social icons */
.social-icons {
  margin-top: 10px; /* Adds top margin */
}

.social-icons a {
  margin-right: 15px; /* Adds space between icons */
  font-size: 24px; /* Increases icon size */
  color: #6b4cb3; /* Sets icon color to purple */
  transition: transform 0.3s, color 0.3s; /* Smooth hover effects */
}

.social-icons a:hover {
  color: #fc5c5c; /* Changes icon color to yellow on hover */
  transform: scale(1.2); /* Enlarges icon slightly on hover */
}

/* Fullscreen */
.fullscreen-img {
  display: none; /* Hides the fullscreen image by default */
  position: fixed; /* Fixes it to the viewport */
  top: 0; left: 0; /* Positions it at the top-left corner */
  width: 100vw; height: 100vh; /* Makes it cover the entire screen */
  background-color: rgba(0, 0, 0, 0.9); /* Adds a dark semi-transparent background */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  z-index: 1000; /* Ensures it appears above other content */
}

.fullscreen-img img {
  max-width: 90%; /* Limits image width to 90% of viewport */
  max-height: 90%; /* Limits image height to 90% of viewport */
  border-radius: 10px; /* Rounds the image corners */
}

.close-btn {
  position: absolute; /* Absolutely positions the close button */
  top: 20px; /* Positions it 20px from the top */
  right: 40px; /* Positions it 40px from the right */
  font-size: 30px; /* Enlarges the icon */
  color: white; /* Sets icon color to white */
  cursor: pointer; /* Shows pointer cursor on hover */
}

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- MOBILE (≤767px) ---------- */
@media (max-width: 767px) {
  nav {
    flex-direction: column;
    gap: 10px;
  }

  h1 {
    font-size: 22px;
    padding: 15px;
  }

  section {
    padding: 15px;
    margin: 20px 10px;
  }

  ul.skills {
    flex-direction: column;
    align-items: center;
  }

  .project-img {
    max-width: 100%;
  }

  form label {
    font-size: 14px;
  }

  .social-icons a {
    font-size: 20px;
  }

  table th, table td {
    font-size: 14px;
    padding: 8px;
  }
}

/* ---------- TABLET (768px–1023px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: 28px;
  }

  nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  ul.skills {
    justify-content: center;
  }

  .project-img {
    max-width: 80%;
    margin: 10px auto;
  }

  table th, table td {
    font-size: 15px;
  }

  form input,
  form textarea {
    font-size: 15px;
  }

  .social-icons a {
    font-size: 22px;
  }
}

/* ---------- DESKTOP (≥1024px) ---------- */
@media (min-width: 1024px) {
  section {
    padding: 30px;
    margin: 40px auto;
  }

  h1 {
    font-size: 36px;
  }

  ul.skills li {
    font-size: 16px;
  }

  .project-img {
    max-width: 350px;
  }

  form input,
  form textarea {
    font-size: 16px;
  }

  .social-icons a {
    font-size: 24px;
  }
}

/* Grid-based Certifications Section */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.card {
  background-color: #f3edff;
  border: 1px solid #d4c2f0;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 4px 8px 18px rgba(0,0,0,0.15);
}

.card h3 {
  color: #6b4cb3;
  margin-bottom: 10px;
}

/* Favorite Languages Grid */
#favorite-languages {
  text-align: center;
}

#favorite-languages .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

#favorite-languages .card {
  background-color: #ffffff;
  border: 1px solid #e0d4fc;
  padding: 25px 15px;
  border-radius: 15px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#favorite-languages .card:hover {
  transform: translateY(-5px);
  box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.15);
}

#favorite-languages .card i {
  margin-bottom: 15px;
}

#favorite-languages .card h3 {
  color: #6b4cb3;
  margin-bottom: 10px;
}

#favorite-languages .card p {
  font-size: 14px;
  color: #555;
}

/* Gengar floating mascot */
.gengar-floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  animation: floatY 2.5s ease-in-out infinite;
  -webkit-animation: floatY 2.5s ease-in-out infinite;
}

.gengar-floating img {
  width: 220px;
  height: auto;
  pointer-events: none; /* Gengar no interfiere con clics */
}

.gengar-floating2 {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  animation: floatY 2.5s ease-in-out infinite;
  -webkit-animation:floatY 2.5s ease-in-out infinite;
}

.gengar-floating2 img {
  width: 220px;
  height: auto;
  pointer-events: none; /* Gengar no interfiere con clics */
}

/* Floating animation */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}