/*==============================
  Import Google Fonts
  Import the "League Gothic" font from Google Fonts for title use.
==============================*/
@import url("https://fonts.googleapis.com/css2?family=League+Gothic&display=swap");

/*==============================
  CSS Custom Properties (Variables)
  Define color and font variables for easier theming and reuse.
==============================*/
:root {
  --color-principal: #a38ae7; /* Primary accent color used for highlights and interactive elements */
  --color-secundario: #9e8ae77a; /* Secondary accent color with transparency, ideal for overlays or backgrounds */
  --fuente-principal: "League Gothic", sans-serif; /* Font for headings and logos */
  --fuente-secundaria: "Poppins", sans-serif; /* Font for body text and general content */
}

/*==============================
  Global Reset
  Remove default margins, paddings, and other styles for consistent base.
==============================*/
* {
  margin: 0; /* Remove default element margin */
  padding: 0; /* Remove default element padding */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  text-decoration: none; /* Remove underline from links */
  border: none; /* Remove default borders */
  outline: none; /* Remove focus outline */
  font-family: var(--fuente-secundaria); /* Set default font to secondary font */
}

/*==============================
  HTML Base Styles
  Base font sizing and smooth scroll behavior.
==============================*/
html {
  color-scheme: dark; /* Enables dark theme preference on supported browsers */
  font-size: 12px; /* Base font size, for easier rem calculations */
  scroll-behavior: smooth; /* Smooth scrolling for anchor navigation */
}

/*==============================
  Body Styling
  Set full viewport size and color scheme.
==============================*/
body {
  width: 100%; /* Take full width of viewport */
  height: 100%; /* Take full height of viewport */
  overflow-x: hidden; /* Prevent horizontal scrollbar */
  background-color: black; /* Set background to black */
  color: white; /* Set default text color to white */
}

/*==============================
  Header & Navigation Bar
  Fixed header with semi-transparent background and blur effect.
==============================*/
header {
  position: fixed; /* Fix header at top */
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  width: 100%; /* Full width */
  padding: 2rem 9%; /* Vertical and horizontal padding */
  filter: drop-shadow(60px); /* Drop shadow effect for depth */
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space out child elements */
  align-items: center; /* Center items vertically */
  z-index: 100; /* Ensure header stays on top */
  backdrop-filter: blur(10px); /* Blur background behind header */
}

/*==============================
  Logo Styling
  Style the logo with custom font, uppercase, color and hover effect.
==============================*/
.logo {
  font-family: var(--fuente-principal); /* Use title font */
  text-transform: uppercase; /* Uppercase letters */
  font-size: 4rem; /* Large size */
  color: var(--color-principal); /* Primary accent color */
  transition: 0.5s ease; /* Smooth transition for transform */
}

.logo:hover {
  transform: scale(1.2); /* Enlarge logo on hover */
}

/*==============================
  Navigation Links
  Style navigation links with spacing, font size, and hover effects.
==============================*/
nav a {
  font-size: 1.7rem; /* Font size for links */
  color: #fff; /* White text */
  margin-left: 4rem; /* Spacing between links */
  font-weight: 500; /* Medium font weight */
  transition: 0.3s ease color, 0.3s ease border-bottom; /* Smooth color and border transition */
  border-bottom: 3px solid transparent; /* Invisible bottom border by default */
  text-decoration: none; /* Remove underline */
}

nav a:hover,
nav a.active {
  color: var(--color-principal); /* Change color on hover or if active */
  border-bottom: 3px solid var(--color-principal); /* Show colored underline */
}

/*==============================
  Mobile Menu Placeholder
  Hidden menu for mobile, displayed via media queries.
==============================*/
.menu {
  display: none; /* Hide by default */
}

/*==============================
  General Section Padding
  Uniform padding for all section elements.
==============================*/
section {
  padding: 1rem 9% 1rem; /* Vertical and horizontal padding */
}

/*==============================
  Home Section Layout
  Flex container centered horizontally and vertically.
==============================*/
.home {
  display: flex; /* Flex layout */
  flex-flow: row wrap; /* Allow wrapping */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  column-gap: 8rem; /* Space between columns */
  background-color: black; /* Black background */
  min-height: 100vh; /* Full viewport height */
  margin-top: 5rem; /* Space below fixed header */
}

/* Home Section Heading */
.home .home-content h1 {
  font-size: 6rem; /* Very large heading */
  font-weight: 700; /* Bold */
  line-height: 1.3; /* Line height for readability */
}

/* Highlighted text in spans */
span {
  color: var(--color-principal); /* Use accent color */
}

/* Text Content Layout */
.home-content {
  flex: 1; /* Flexible width */
}

/* Subtitle styling */
.home-content h3 {
  font-size: 4rem; /* Large subtitle */
  margin-bottom: 2rem; /* Space below */
  font-weight: 700; /* Bold */
}

.home-content p {
  font-size: 1.6rem; /* Paragraph text size */
}

/*==============================
  Home Image Styling
  Circular images with gradient masking for fade effect.
==============================*/
.home-img {
  border-radius: 50%; /* Circular container */
  min-width: 300px; /* Minimum size */
  width: 30vw; /* Responsive width */
}

.home-img img {
  width: 100%; /* Full container width */
  margin-top: 22px; /* Space above */
  position: relative; /* Relative positioning */
  border-radius: 33px; /* Rounded corners */
  transition: 0.4s linear; /* Smooth transitions */
  /* Gradient mask effect on image */
  mask-image: linear-gradient(black 40%, transparent); /* Fade mask from bottom */
  mask-image: linear-gradient(
    transparent 5%, /* Transparent top */
    rgb(255, 255, 255) 30%, /* Solid in middle */
    transparent 100% /* Transparent bottom */
  );
}

/*==============================
  Download CV Button
  Styled button with colors, padding, and hover effects.
==============================*/
.download-cv {
  font-family: var(--fuente-secundaria); /* Body font */
  padding: 10px 20px; /* Padding inside button */
  background-color: var(--color-principal); /* Accent background */
  border: none; /* No border */
  border-radius: 20px; /* Rounded pill shape */
  margin-top: 3rem; /* Spacing above */
  cursor: pointer; /* Pointer cursor */
  box-shadow: 0px 10px 13px -7px #000000,
    1px -5px 20px 9px rgba(163, 138, 231, 0.14); /* Soft shadow */
}

.download-cv:hover {
  background-color: #846cc7; /* Darker accent on hover */
  box-shadow: none; /* Remove shadow on hover */
}

/*==============================
  About Section
  Two-column grid layout with gap and padding.
==============================*/
.about {
  display: grid; /* Use CSS Grid */
  background-color: rgb(19, 18, 18); /* Very dark background */
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  width: 100vw; /* Full viewport width */
  height: 90vh; /* Almost full viewport height */
  align-items: center; /* Vertical centering */
  gap: 5rem; /* Gap between columns */
  padding: 2rem 10rem; /* Padding inside section */
}

.about-info {
  text-align: justify; /* Justify paragraph text */
  font-family: var(--fuente-secundaria); /* Body font */
  font-size: 1.4rem; /* Readable font size */
}

.about-title {
  display: flex; /* Flex container */
  flex-direction: column; /* Stack vertically */
  justify-content: start; /* Align to top */
  font-size: 1.9rem; /* Title font size */
}

.about-info h1 {
  font-family: var(--fuente-principal); /* Title font */
  color: var(--color-principal); /* Accent color */
}

/* Decorative line divider */
.divider {
  height: 4px; /* Line thickness */
  width: 14rem; /* Length */
  background-color: var(--color-principal); /* Accent color */
  margin-bottom: 2rem; /* Space below */
}

/* Button margin inside about */
.about button {
  margin-top: 2rem; /* Space above buttons */
}

/* Embedded video or iframe styling */
.about iframe {
  margin-top: 10%; /* Top margin */
  margin-bottom: 10%; /* Bottom margin */
  width: 100%; /* Full width */
  height: 60%; /* Set height */
  border-radius: 20px; /* Rounded corners */
}

/*==============================
  Skills Section
  Centered grid layout for skill items.
==============================*/
#skills {
  max-width: 800px; /* Max container width */
  margin: 60px auto; /* Center horizontally with margin */
  padding: 20px; /* Padding inside container */
  text-align: center; /* Center text */
}

#skills h2 {
  font-size: 5rem; /* Large heading */
  color: var(--color-principal); /* Accent color */
  font-family: var(--fuente-principal); /* Title font */
}

#skills ul {
  display: grid; /* Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responsive columns */
  gap: 2rem; /* Gap between skill items */
  list-style: none; /* Remove bullet points */
  padding: 0; /* Remove padding */
}

#skills li {
  background-color: #1a1a1a; /* Dark background for each skill */
  margin: 10px auto; /* Vertical margin and center horizontally */
  padding: 12px 20px; /* Padding inside each item */
  width: fit-content; /* Width adjusts to content */
  min-width: 10rem; /* Minimum width */
  border-radius: 8px; /* Rounded corners */
  font-size: 1.1rem; /* Font size */
  color: #ffffff; /* White text */
  transition: background 0.3s; /* Smooth background transition */
}

#skills li:hover {
  background-color: #333333; /* Lighter background on hover */
  transform: scale(1.1); /* Slight zoom effect */
}

/*==============================
  Projects Section
  Centered layout with responsive grid of projects.
==============================*/
#projects {
  max-width: 900px; /* Max width */
  margin: 60px auto; /* Centered horizontally with margin */
  padding: 20px; /* Padding */
  text-align: center; /* Center text */
}

#projects h2 {
  font-size: 5rem; /* Large section heading */
  color: var(--color-principal); /* Accent color */
  font-family: var(--fuente-principal); /* Title font */
}

#projects h3 {
  font-size: 20px; /* Project title size */
  font-weight: 600; /* Semi-bold */
  color: var(--color-principal); /* Accent color */
  margin-bottom: 15px; /* Space below */
}

/* ========== Projects Section Grid Layout ========== */

/* Defines a responsive grid layout for the project list */
.list-proyects {
  display: grid;
  justify-items: center; /* Center items horizontally */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Auto-fit columns with min 320px width */
  gap: 2rem; /* Gap between grid items */
}

/* Styles each project article */
#projects article {
  background-color: #121212; /* Dark background for contrast */
  padding: 20px; /* Inner spacing */
  border-radius: 12px; /* Rounded corners */
  margin-bottom: 30px; /* Space below each project */
  width: 40rem; /* Fixed width for layout */
}

/* Styles images inside project articles */
#projects img {
  max-width: 100%; /* Makes image responsive */
  border-radius: 8px; /* Smooth corners */
  margin-top: 15px;
  margin-bottom: 2rem;
}

/* Paragraph text inside projects */
#projects p {
  font-size: 14px; /* Small font for descriptions */
}

/* ========== Project Buttons and Icons ========== */

/* Container for links/buttons in project cards */
.proyects-links {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 2rem; /* Space between buttons */
}

/* Individual link buttons (GitHub, Live Demo, etc.) */
.link-button {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  border-radius: 100%; /* Perfect circle */
  background-color: var(--color-secundario); /* Secondary theme color */
  font-size: 35px;
  cursor: pointer;
}

/* Icon inside the button */
.link-button i {
  text-decoration: none;
  color: white;
}

/* ========== Tooltip Styling ========== */

/* Wrapper for elements with tooltip */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Hidden tooltip content initially */
.tooltip-text {
  visibility: hidden;
  background-color: #333; /* Dark background */
  color: #fff; /* White text */
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  bottom: 120%; /* Position above the element */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0; /* Invisible initially */
  transition: opacity 0.3s;
  white-space: nowrap; /* Prevent line breaks */
}

/* Tooltip arrow */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ========== Contact Section ========== */

/* Main contact section container */
.contact {
  display: flex;
  justify-content: space-evenly;
  padding: 0;
}

/* Contact section title */
.contact h2 {
  font-family: var(--fuente-principal);
  margin: 20px;
  text-align: center;
  font-size: 5rem;
}

/* Form wrapper */
.contact form {
  width: 50rem;
}

/* General form layout */
form {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  height: 100%;
}

/* Label styles */
label {
  font-size: 1rem;
  color: var(--color-principal);
}

/* Input and textarea styles */
input[type="text"],
input[type="email"],
textarea {
  padding: 10px;
  border-radius: 6px;
  background-color: #ffffff;
  color: #000;
  resize: vertical;
}

/* Submit button styling */
input[type="submit"] {
  background: linear-gradient(
    115deg,
    rgba(103, 19, 152, 1) 19%,
    rgba(150, 44, 168, 1) 100%
  );
  color: #ffffff;
  padding: 12px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

/* Submit button hover effect */
input[type="submit"]:hover {
  background: linear-gradient(
    115deg,
    rgba(66, 9, 99, 1) 19%,
    rgba(98, 25, 110, 1) 100%
  );
}

/* Image section next to the contact form */
.contact-img img {
  width: 50rem;
  height: 100%;
}

/* ========== Footer Styling ========== */

.footer-section {
  padding: 50px;
  text-align: center;
  background: linear-gradient(
    115deg,
    rgba(103, 19, 152, 1) 19%,
    rgba(150, 44, 168, 1) 100%
  );
  color: #fff;
  bottom: 0;
}

/* ========== Responsive Design ========== */

/* --------- Small Screens (<=600px) --------- */
@media (max-width: 600px) {
  #skills li {
    width: 100%;
  }

  table,
  th,
  td {
    font-size: 0.9rem;
  }

  input[type="submit"] {
    font-size: 0.95rem;
  }
}

/* --------- Medium Screens (<=1251px) --------- */
@media (max-width: 1251px) {
  /* Mobile nav styles */
  nav {
    padding: 8px;
    position: absolute;
    top: 100%;
    overflow: hidden;
    right: 16px;
    width: 40%;
    border: 1px solid rgba(255, 231, 231, 0.1);
    border-radius: 2rem;
    padding: 1rem solid;
    background-color: #050505;
    transition: 0.2s ease opacity;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
  }

  .menu {
    display: flex;
  }

  /* Show nav menu if checkbox is checked */
  #menu:checked + nav {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  nav a {
    display: block;
    font-size: 2rem;
    margin: 3rem 0;
    padding: 1rem;
  }

  nav a:hover,
  nav a.active {
    border-radius: 0.5rem;
    border-bottom: 0.5rem solid var(--color-principal);
  }

  /* About section layout for smaller screens */
  .content-about-me {
    height: 100%;
    padding: 4% 7%;
    display: flex;
    flex-direction: column;
    gap: 5rem;
  }

  .about {
    display: grid;
    grid-template-columns: repeat(1, 2fr);
    width: 100%;
    height: 100%;
    padding: 2rem 4rem;
    align-items: center;
    gap: 10px;
  }

  .about-info {
    text-align: center;
    font-family: var(--fuente-secundaria);
    font-size: 1.4rem;
  }

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

  .divider {
    height: 4px;
    width: 14rem;
    background-color: var(--color-principal);
    margin-bottom: 2rem;
  }

  .about button {
    margin-top: 2rem;
  }

  .about iframe {
    margin-top: 20%;
    margin-bottom: 10%;
    width: 100%;
    height: 80%;
  }

  /* Contact layout for smaller screens */
  .contact {
    display: flex;
    flex-direction: column;
  }

  .contact form {
    width: 100%;
    padding: 2rem 10rem;
  }

  .contact-img img {
    display: none; /* Hide contact image on smaller screens */
  }
}

/* --------- Extra Small Screens (<=480px) --------- */
@media (max-width: 480px) {
  .home-content h1 {
    font-size: 3rem;
  }

  .home-content h3 {
    font-size: 2rem;
  }

  .download-cv {
    width: 100%;
  }

  #projects article {
    width: 100%;
  }

  .contact {
    padding: 1rem;
    flex-direction: column;
    align-items: center;
  }

  .contact form {
    width: 100%;
    padding: 2rem 2rem;
  }

  .contact-form {
    width: 100%;
  }

  #skills ul {
    grid-template-columns: 1fr;
  }

  #skills li {
    font-size: 1.2rem;
    text-align: center;
  }
}