/* Base body stays simple */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  background: #121212; /* fallback */
  color: #e0e0e0;
}

/* The wrapper that receives the animated background */
.rain-body{
  position: relative;
  isolation: isolate;     /* new stacking context */
  overflow: hidden;       /* clip the rotated plane so it NEVER exceeds the footer */
  background: transparent;
}

/* Big rotated plane so no corner gaps; clipped by .rain-body */
.rain-body::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:300vmax;                /* huge square covers all diagonals */
  height:300vmax;
  transform: translate(-50%,-50%) rotate(-45deg);
  transform-origin: center;
  pointer-events:none;
  z-index:-1;

  /* your effect (kept), with colors changed:
     - blue -> yellow (#e4f52f)
     - yellowish dots -> green (#00ff88)
  */
  background:#000000;
  background-image:
    radial-gradient(4px 100px at 0px 235px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 235px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 252px, #e4f52f, #0000),      /* was blue —> yellow */
    radial-gradient(4px 100px at 300px 252px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 150px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 150px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 253px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 253px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 204px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 204px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 134px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 134px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 179px, #e4f52f, #0000),      /* some rays in yellow */
    radial-gradient(4px 100px at 300px 179px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 299px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 299px, #e4f52f, #0000),    /* yellow */
    radial-gradient(1.5px 1.5px at 150px 149.5px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 215px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 215px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 281px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 281px, #e4f52f, #0000),    /* yellow */
    radial-gradient(1.5px 1.5px at 150px 140.5px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 158px, #00ff88, #0000),
    radial-gradient(4px 100px at 300px 158px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, #00ff88 100%, #0000 150%),

    radial-gradient(4px 100px at 0px 210px, #e4f52f, #0000),      /* yellow */
    radial-gradient(4px 100px at 300px 210px, #00ff88, #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, #00ff88 100%, #0000 150%);

  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;

  animation: hi 150s linear infinite;
}

/* same keyframes you already use */
@keyframes hi {
  0% {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 350.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px, 426.5px 180px;
  }
  100% {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

/* Header */
header {
  width: 100%;
  color: #f5f5f5;
  padding: 20px;
  position: relative;   /* allows absolutely positioning children */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;

  /* Hexagon background pattern */
  --s: 200px; /* control the size */
  --c1: #1d1d1d;
  --c2: #4e4f51;
  --c3: #3c3c3c;

  background: repeating-conic-gradient(
        from 30deg,
        #0000 0 120deg,
        var(--c3) 0 180deg
      )
      calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
    repeating-conic-gradient(
      from 30deg,
      var(--c1) 0 60deg,
      var(--c2) 0 120deg,
      var(--c3) 0 180deg
    );
  background-size: var(--s) calc(var(--s) * 0.577);
}

header h1 {
  margin: 0;
  font-size: 2.5rem;
  color: #00ff88;
}

header p {
  margin: 5px 0 15px;
  font-size: 1.1rem;
  color: #e4f52f;
}

header nav a {
  color: #f5f5f5;
  text-decoration: none;
  transition: 0.3s;
  font-weight: bold;
  margin-left: 15px;  /* default spacing */
}

/* Remove margin for the first nav link */
header nav a:first-child {
  margin-left: 0;
}


header nav a:hover {
  color: #00ff88;
}

/* Sections */
.container {
  width: 80%;
  margin: auto;
  padding: 20px 0;
}

h2 {
  position: relative;
  margin-bottom: 10px;
  color: #00ff88;
  align-items: center;
  border-bottom: 2px solid #00ff88;
  display: inline-block;
  padding: 10px 15px;
  overflow: hidden;
  z-index: 1;
}
/* From Uiverse.io by prashantj510 */ 
.aboutcard {
  width: 1500px;
  height: 150px;
  background-image: linear-gradient(163deg, #7bff00 0%, #ffee00 100%);
  border-radius: 10px;
  transition: all .3s;
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
  text-align: center;    /* center align text */
  padding: 15px;    
}

.card2 {
  width: 1500px;
  height: 150px;
  background-color: #1a1a1a;
  border-radius: 10px;
  transition: all .2s;
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
  text-align: center;    /* center align text */
  padding: 15px;    
}

.card2:hover {
   transform: scale(0.99, 0.92);
  border-radius: 10px;
}

.card:hover {
  box-shadow: 0px 0px 30px 1px rgba(0, 255, 117, 0.30);
}
#education,#about,#skills,#projects,#certifications,#contact,#acievements {
  display: flex;
  margin-top:50px;
  flex-direction: column;
  align-items: center; /* centers all cards */
}
#education article {
  width: 1000px;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  background-color: #1e1e1e;
  border-radius: 5px;
  padding: 20px;
  transition: all 0.3s ease-in-out;   /* smooth hover */
}

#education article:hover {
  transform: translateY(-5px) scale(1.02);   /* lift & zoom */
  box-shadow: 0 8px 20px rgba(57, 255, 20, 0.4);  /* neon glow */
  background-color: #252525;   /* slightly lighter on hover */
}

#education article svg {
  margin-right: 20px;
  transition: color 0.3s ease;
}

#education article:hover svg {
  color: #fefe33;   /* icon glows yellow on hover */
}

#education article p {
  margin: 0 10px 10px 10px;
  text-align: center;
  flex: 1;
  transition: color 0.3s ease;
}

#education article:hover p {
  color: #39ff14;   /* text turns neon green on hover */
}

/* Skills Grid */
/* Skills grid: 2 rows, 5 per row */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 80px;              /* space between boxes */
  max-width: 1500px;
  margin-top: 50px;
  justify-items: center;
  text-decoration: none !important;
}

/* Glow wrapper */
.box {
  position: relative;
  width: 160px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  z-index: 1;
}

/* Glow behind */
.box::before,
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 80;
  width: 50%;
  height: 100%;
  background: linear-gradient(315deg,#ffee00,#7bff00);
  border-radius: 12px;
  transform: skewX(15deg);
  transition: 0.5s;
}

.box::after {
  filter: blur(30px); /* blurred glow */
  z-index: 0;
}

/* Hover effect → straighten */
.box:hover::before,
.box:hover::after {
  transform: skewX(0deg);
}

/* Glassy content */
.box .content {
  position: relative;
  width: 140px;      /* larger so text fits */
  height: 100px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  z-index: 1;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
}

/* Skill text */
.box .content h2 {
  font-size: 16px;
  color: #fff;
  border-bottom: none; 
  margin: 0;
  line-height: 1.4;
}
.box:hover .content h2 {
  color: #000;
}

/* Decoration glassy boxes */
.box span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

/* Top-left small glassy */
.box span::before {
  content: '';
  position: absolute;
  top: -25px;        /* move above main box */
  left: 35px;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Bottom-right small glassy */
.box span::after {
  content: '';
  position: absolute;
  bottom: -25px;     /* move below main box */
  right: 35px;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}


/* Projects */
/* From Uiverse.io by SouravBandyopadhyay */ 
.card-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;   /* makes them stack on smaller screens */
  gap: 20px;         /* spacing between cards */
  margin-top: 20px;
}

.card {
  flex: 1 1 300px; /* flexible, minimum width 300px */
  max-width: 350px;
  background: linear-gradient(to bottom, #26e305, #168203);
  border-radius: 12px;
  padding: 2em 1.2em;
  margin: 12px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 0;
  font-family: Arial, Helvetica, sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Lift effect */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card-title {
  color: #262626;
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 0.6em;
  transition: color 0.3s ease;
}

.small-desc {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5em;
  color: #452c2c;
  transition: color 0.3s ease;
}

/* corner button */
.go-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 2em;
  height: 2em;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #363535, #0000);
  border-radius: 0 4px 0 32px;
  overflow: hidden;
}

.go-arrow {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
}

/* Hover gradient expansion */
.card:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #111721, #070a0d);
  height: 2em;
  width: 2em;
  border-radius: 0 4px 0 32px;
  transform: scale(1);
  transform-origin: top right; /* expand from go-corner */
  transition: transform 0.35s ease-out;
}

.card:hover:before {
  transform: scale(45); /* bigger to cover full card */
}


.card:hover .card-title {
  color: #e4f52f;
}

.card:hover .small-desc {
  color: #e4f52f;
}

/* From Uiverse.io by kamehame-ha, customized */
.certificationcards {
  display: flex;
  flex-direction: column;  /* stack in one column */
  gap: 20px;
  align-items: center;     /* center horizontally */
}

.certificationcards .cercard,
.certificationcards .ocercard {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 120px;
  width: 280px;
  border-radius: 12px;
  color: black;
  cursor: pointer;
  transition: 300ms ease;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
  background-color: #00ff88;
}

/* Different colors if needed */
.certificationcards .cercard {
  background-color: #fff01f; /* yellow-green */
}
.certificationcards .ocercard {
  background-color: #00ff88; /* neon green */
}

/* Text styles */
.certificationcards .cercard p.tip,
.certificationcards .ocercard p.tip {
  font-size: 1.1em;
  font-weight: 700;
}
.certificationcards .cercard p.second-text,
.certificationcards .ocercard p.second-text {
  font-size: 0.85em;
  margin-top: 6px;
}

/* Hover effect on the card */
.certificationcards .cercard:hover,
.certificationcards .ocercard:hover {
  transform: scale(1.5);
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.9);
}

/* Blur ONLY siblings when one card is hovered */
.certificationcards .cercard:hover ~ .cercard,
.certificationcards .cercard:hover ~ .ocercard,
.certificationcards .ocercard:hover ~ .cercard,
.certificationcards .ocercard:hover ~ .ocercard {
  filter: blur(4px);
  transform: scale(0.8);
}

/* From Uiverse.io by mahiatlinux */ 
.achcard {
  width: 500px;   /* wider to fit content */
  background: #1e1e1e;
  box-shadow: 0 1px 25px rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 10px;
  margin: 30px auto;   /* centers below heading */
  display: flex;
  gap: 15px;
  align-items: center;
  color: white;
}

.card_load {
  width: 70px;
  height: 70px;
  background: linear-gradient(
    120deg,
    #2a2a2a 30%,
    #3a3a3a 38%,
    #3a3a3a 40%,
    #2a2a2a 48%
  );
  border-radius: 50%;
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load89234 2s infinite;
  flex-shrink: 0;
}

.card_text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card_load_extreme_title {
  font-size: 1.2em;
  font-weight: bold;
  color: #fff01f;  /* neon yellow */
  border-radius: 5px;
  background: linear-gradient(
    120deg,
    #2a2a2a 30%,
    #3a3a3a 38%,
    #3a3a3a 40%,
    #2a2a2a 48%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load89234 2s infinite;
}

.card_load_extreme_descripion {
  font-size: 0.9em;
  line-height: 1.3;
  color: #ddd;
  border-radius: 5px;
  background: linear-gradient(
    120deg,
    #2a2a2a 30%,
    #3a3a3a 38%,
    #3a3a3a 40%,
    #2a2a2a 48%
  );
  margin-top: 10px;
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: load89234 2s infinite;
}

@keyframes load89234 {
  100% {
    background-position: -100% 0;
  }
}
/* From Uiverse.io by Javierrocadev */ 
.achcontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 5em;
  font-weight: 900;
  color: #e10600;
  position: relative;
  transition: all 1s ease;
  text-align: center;
}

.achcontainer__star {
  transition: all .7s ease-in-out;
}

.achfirst {
  position: absolute;
  top: 0px;
  left: 50px;
  transition: all .7s ease-in-out;
}

.achsvg-icon {
  position: absolute;
  fill: #e94822;
  z-index: 1;
}

.achstar-eight {
  background: #efd510;
  width: 70px;
  height: 70px;
  position: relative;
  text-align: center;
  animation: rot 3s  infinite;
}

.achstar-eight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 70px;
  width: 70px;
  background: #efd510;
  transform: rotate(135deg);
}

.achcontainer:hover .achcontainer__star {
  transform: rotateX(70deg) translateY(100px);
  box-shadow: 0px 0px 120px -100px #e4e727;
}

.achcontainer:hover .achsvg-icon {
  animation: grow 1s linear infinite;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(340deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes grow {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Footer */
footer {
  text-align: center;
  padding: 12px;
  color: #aaa;
  margin-top: 20px;
  border-top: 2px solid #333;

  /* Pattern background */
  --s: 200px; /* control the tile size */
  --c1: #1d1d1d;
  --c2: #4e4f51;
  --c3: #3c3c3c;

  background: repeating-conic-gradient(
        from 30deg,
        #0000 0 120deg,
        var(--c3) 0 180deg
      )
      calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
    repeating-conic-gradient(
      from 30deg,
      var(--c1) 0 60deg,
      var(--c2) 0 120deg,
      var(--c3) 0 180deg
    );
  background-size: var(--s) calc(var(--s) * 0.577);
}

/* From Uiverse.io by Juanes200122 */ 
#svg-global {
  position: absolute;
  right: 100px;          /* distance from right edge */
  top: 40%;/* center vertically */
  transform: translateY(-50%) scale(1.5); /* keep zoom & center */
  overflow: visible;
  z-index: 10; 
}

@keyframes fade-particles {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(-40px);
    opacity: 0;
  }
}

#particles {
  animation: fade-particles 5s infinite alternate;
}
.particle {
  animation: floatUp linear infinite;
}

.p1 {
  animation-duration: 2.2s;
  animation-delay: 0s;
}
.p2 {
  animation-duration: 2.5s;
  animation-delay: 0.3s;
}
.p3 {
  animation-duration: 2s;
  animation-delay: 0.6s;
}
.p4 {
  animation-duration: 2.8s;
  animation-delay: 0.2s;
}
.p5 {
  animation-duration: 2.3s;
  animation-delay: 0.4s;
}
.p6 {
  animation-duration: 3s;
  animation-delay: 0.1s;
}
.p7 {
  animation-duration: 2.1s;
  animation-delay: 0.5s;
}
.p8 {
  animation-duration: 2.6s;
  animation-delay: 0.2s;
}
.p9 {
  animation-duration: 2.4s;
  animation-delay: 0.3s;
}

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

#line-v1,
#line-v2,
#node-server,
#panel-rigth,
#reflectores,
#particles {
  animation: bounce-lines 3s ease-in-out infinite alternate;
}
#line-v2 {
  animation-delay: 0.2s;
}

#node-server,
#panel-rigth,
#reflectores,
#particles {
  animation-delay: 0.4s;
}



/* Container for the buttons */
/* From Uiverse.io by Creatlydev */
.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.button {
    cursor: pointer;
    border: none;
    background: #168203;
    color: #e4f52f;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: grid;
    place-content: center;
    transition:
        background 300ms,
        transform 200ms;
    font-weight: 600;
}

/* You can keep your other rules. Just add/replace these: */

/* set a comfortable radius for 100x100 with a 40px center logo *//* try 32–36 if you want to fine-tune */

.button__text {
  position: absolute;
  inset: 0px;
  animation: text-rotation 8s linear infinite;

  > span {
    position: absolute;
    transform: rotate(calc(22deg * var(--index)));
    inset: 0px;
  }
}




.button__circle {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: #e4f52f;
    color: #168203;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button__icon--copy {
    position: absolute;
    transform: translate(-150%, 150%);
}

.button:hover {
    background: #000;
    transform: scale(1.05);
}

.button:hover .button__icon {
    color: #000;
}

.button:hover .button__icon:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}

.button:hover .button__icon--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}

@keyframes text-rotation {
    to {
        rotate: 360deg;
    }
}