/* ============================
   Global Variables
============================ */
:root {
  --text-clr-1: #434343;
  --text-clr-2: #f9f9f9;
  --bg-clr-1: #131313;
  --bg-clr-2: #f9f6ee;
  --bg-clr-3: #f9f6ee88;

  --fs-tri: #00dadea0;
  --ss-tri: #fb00ffc0;
  --ts-tri: #2bff88c0;

  --clr-g3-1: #2dccff;
  --clr-g3-2: #a55af0;
  --grad3-ini: var(--clr-g3-1) 5%, var(--clr-g3-2) 75%;
  --grad4-ini: var(--clr-g3-1) 5%, var(--clr-g3-2) 45%;

  --grad-1: linear-gradient(135deg, #00dade, #fb00ff);
  --grad-2: linear-gradient(-135deg, #003536, #510052);
  --grad-3: linear-gradient(67.2deg, var(--grad3-ini));
  --grad-4: radial-gradient(circle at -8.9% 51.2%, rgb(255, 124, 0) 0%, rgb(255, 163, 77) 24.4%, rgb(74, 74, 74) 24.5%, rgb(35, 35, 35) 46.5%, rgb(0, 0, 0) 66.5%);
  --grad-4a: radial-gradient(circle at -8.9% 51.2%, rgb(255, 124, 0) 0%, rgb(255, 163, 77) 24.4%, rgb(155, 155, 155) 24.5%, rgb(183, 183, 183) 46.5%, rgb(255, 255, 255) 66.5%);
  --grad-5: linear-gradient(179.4deg, rgb(12, 20, 69) -16.9%, rgb(71, 30, 84) 119.9%);
}

/* ============================
   Utility Classes
============================ */
.hidden {
  display: none;
}

.heading {
  width: 100%;
}

/* ============================
   Backdrop
============================ */
.backdrop {
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.backdrop svg {
  height: 95%;
  width: 90%;
}

/* ============================
   Model Section
============================ */
.model {
  height: auto;
  width: 70%;
  aspect-ratio: 1 / 1;
  padding: 2.5rem;
  overflow: visible;
  pointer-events: none;

}

.model .wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  filter: drop-shadow(-20px -20px 50px var(--fs-tri)) drop-shadow(20px 20px 50px var(--ss-tri));
}

.model .wrapper img {
  position: absolute;
  width: 100%;
  left: 30%;
  bottom: 12.9%;
  aspect-ratio: 1 / 1;
  z-index: 1;
  transform: skew(-2.5deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 10% 79%);
}

.triangle {
  width: 100%;
  clip-path: polygon(100% 0, 0 46%, 100% 100%);
  background: var(--grad-1);
  display: flex;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
}

.triangle-inner {
  background: var(--grad-2);
  height: calc(100% - 1rem);
  width: calc(100% - 0.6rem);
  clip-path: polygon(100% 0, 0 46%, 100% 100%);
}

/* ============================
   Tag Cloud (Map)
============================ */
.map {
  margin: auto;
  aspect-ratio: 1 / 1;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#holder {
  aspect-ratio: 1/1;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: inherit;

}

#holder text {
  font-size: 1.8rem;
  fill: var(--text-clr-1);
  font-weight: 700;
}

#holder text:hover {
  fill: #510052;
}

/* ============================
   Responsive Adjustments
============================ */
@media screen and (max-width: 1480px) {
  .map {
    max-width: 55rem;
  }
}

@media screen and (max-width: 1200px) {
  .model {
    width: 70%;
  }

  .map {
    max-width: 80%;
    aspect-ratio: 3 / 2;
  }

  #holder text {
    font-size: 2rem;
    font-weight: 800;
  }
}
@media screen and (max-width: 1100px) {
  .model {
    display: none;
  }
}
@media screen and (max-width: 780px) {
  .map,
  #skillsBtn {
    display: none !important;
  }

  #certList {
    display: block !important;
  }

  #certsBtn {
    display: none;
  }
}