/* COLOURS */
:root {
  --primary-color: #4a90e2;
  --secondary-color: #a855f7;
  --tertiary-color: #ff69b4;
  --highlight-color: linear-gradient(90deg, #4a90e2, #7b61ff, #ff69b4);
  --button-color: #4e19d4;
  --button-hover: #5113bd;
  --border-outline: rgba(100, 100, 100, 0.5);
  --font-color: #ffffff;
  --background-color: #000000;
}
/* BASE */
body {
  color: var(--font-color);
  background: var(--background-color);
  margin: 0;
  padding: 0;
}
.finisher-header {
  position: relative;
  z-index: 1;
}
* {
  font-family: "Montserrat", serif;
  scroll-behavior: smooth;
  text-decoration: none;
}
.primary {
  color: var(--primary-color);
}
.secondary {
  color: var(--secondary-color);
}
.tertiary {
  color: var(--tertiary-color);
}
p {
  font-size: clamp(1rem, 5vw, 1.125rem);
  line-height: 150%;
  letter-spacing: -0.5px;
  font-weight: 500;
}
/* NAVIGATION BAR */
nav {
  height: 3.75rem;
  background-color: var(--background-color);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  position: fixed;
  z-index: 1000;
  box-shadow: 0 5px 50px var(--background-color);
  animation: fadeIn 1.2s ease-in;
}
.links-container {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
}
nav a.nav-link {
  box-sizing: border-box;
  display: flex;
  height: auto;
  padding: 0 1.25rem;
  text-decoration: none;
  align-items: center;
  color: var(--font-color, white);
  font-size: 1.25rem;
  transition: transform 0.3s ease;
  font-weight: bold;
  letter-spacing: -0.5px;
}
nav a.nav-link:hover {
  transform: scale(1.1);
}
.header-name {
  font-size: 1.5rem;
  color: var(--font-color);
  margin-right: auto;
  margin-left: 1rem;
  padding: 0.5rem;
  border-radius: 50%;
  font-weight: 700;
  transition: transform 0.3s ease;
}
.header-name:hover {
  transform: scale(1.1);
}
.resume {
  font-size: clamp(0.8rem, 5vh, 1.125rem);
  margin-right: 1rem;
  margin-left: auto;
  padding: 0.5rem 1rem;
  border-radius: 3rem;
  border: 2px solid var(--border-outline);
  color: white;
  letter-spacing: 1px;
  cursor: pointer;
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease;
  background: var(--background-color);
  font-weight: bold;
  letter-spacing: -0.5px;
}
.resume:hover {
  background: #161616;
  box-shadow: 0 10px 15px -3px var(--button-hover),
    0 4px 6px -2px var(--button-hover);
}
.resume:focus,
.resume:active {
  opacity: 0.85;
  box-shadow: none;
}
nav svg {
  fill: var(--font-color);
}
#sidebar-active {
  display: none;
}
.open-sidebar-button,
.close-sidebar-button {
  display: none;
}

/* SIDEBAR + OTHER MEDIA QUERIES*/
@media (max-width: 894px) {
  .links-container {
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    background-color: var(--background-color);
    box-shadow: -5px 0 15px var(--border-outline);
    transition: 0.5s ease-out;
    z-index: 1000;
  }
  nav a.nav-link {
    box-sizing: border-box;
    height: auto;
    width: 100%;
    padding: 1.25rem 1.875rem;
    justify-content: flex-start;
  }
  .open-sidebar-button,
  .close-sidebar-button {
    display: block;
    padding: 1.25rem;
  }
  #sidebar-active:checked ~ .links-container {
    right: 0;
  }
  #sidebar-active:checked ~ #overlay {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .header-name {
    margin: 0 auto 1rem 2rem;
  }
  .resume {
    margin: 0.5rem auto 1rem 1rem;
  }
  .contact-header {
    padding-top: 5rem;
  }
}
/* DOWNLOAD RESUME BUTTON */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
}

.modal-content {
  position: relative;
  width: 80%;
  height: 80%;
  background-color: var(--border-outline);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 1rem;
  padding: 10px;
}

iframe {
  border: none;
  flex-grow: 1;
  border-radius: 1rem;
}

.close-btn {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 4rem;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.close-btn:hover {
  transform: scale(1.25);
  transition: transform 0.3s ease;
}

.download-btn {
  font-size: 1rem;
  font-weight: 500;  
  position: absolute;
  top: 2rem;
  right: 5rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--border-outline);
  background: var(--background-color);
  color: var(--font-color);
  border-radius: 1rem;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.download-btn:hover {
  background: #161616;
  box-shadow: 0 10px 15px -3px var(--button-hover),
    0 4px 6px -2px var(--button-hover);
}

/* WELCOME SECTION */
#welcome-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
}
.welcome-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  width: clamp(300px, 90%, 1500px);
  padding: 2rem;
}
.name-intro {
  font-size: clamp(2.5rem, 10vw, 20rem);
  letter-spacing: -2px;
  line-height: 100%;
  margin: 0;
  animation: scaleIn 1s ease-out forwards;
  animation-delay: 0.2s;
  opacity: 0;
}
.subtext-intro {
  font-size: clamp(2rem, 5vw, 5rem);
  letter-spacing: -2px;
  line-height: 120%;
  margin: 0;
  animation: scaleIn 1s ease-out forwards;
  animation-delay: 0.4s;
  opacity: 0;
}
.highlight {
  background-image: var(--highlight-color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-position: -100%;
  background-size: 300%;
  animation: highlight 5s infinite alternate-reverse;
}
.circle {
  right: 20%;
  position: absolute;
  z-index: 0;
  --size: calc(100% - 5 / 6 * 100%);
  background: conic-gradient(
      transparent var(--size),
      var(--border-outline) var(--size)
    )
    border-box;
  width: clamp(320px, 50%, 750px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1rem solid transparent;
  rotate: -120deg;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: scaleIn 1s ease-out forwards;
  animation-delay: 0.6s;
  opacity: 0;
}
/* ABOUT ME SECTION */
#about-me-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 90vh;
}
.about-me-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  width: 70%;
  max-width: 800px;
}
.about-me-header {
  text-align: center;
  font-size: 2rem;
  letter-spacing: -1px;
  margin-bottom: 2.5rem;
}
.summary-header {
  letter-spacing: -0.5px;
  margin: 0;
  padding: 0;
}
.education-subtext,
.certificate-subtext {
  font-size: 0.875rem;
}
/* SKILLS SECTION */
#skills-section {
  text-align: center;
  width: 100%;
  min-height: 80vh;
  padding: 60px 0;
}
.skills-header {
  font-size: 2rem;
  letter-spacing: -1px;
  margin-bottom: 2.5rem;
}
.skills-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin: 0 auto;
}
.skills-card {
  background-color: var(--background-color);
  border: 1px solid var(--border-outline);
  border-radius: 10px;
  padding: 0 20px 20px;
  flex-basis: 15%;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.skills-card:hover {
  transform: translateY(-10px);
  transition: transform 0.3s ease;
}
.skills-card-header {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 85%;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
  text-align: left;
}
.skills-list {
  list-style: none;
  padding: 0 12px;
  margin: 0;
  text-align: left;
}
.skills-list > li {
  margin: 10px 0;
  font-size: clamp(1rem, 5vw, 1.125rem);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.5px;
}
.skills-list > li:before {
  content: ">";
  letter-spacing: 0.25rem;
}
/* PROJECT SECTION */
.projects {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8rem;
}
#project-section {
  min-height: 80vh;
  width: 100%;
}
.project-header {
  font-size: 2rem;
  text-align: center;
  padding-top: 6rem;
  letter-spacing: -1px;
}
.project-box {
  display: flex;
  padding-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
}
.project-description {
  display: flex;
  flex-direction: column;
  min-width: 280px;
  max-width: 500px;
  padding-inline: 1rem;
}
.project-text {
  line-height: 150%;
  letter-spacing: -0.5px;
}
.project-title {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: -0.5px;
  margin-inline-start: 1rem;
}
.project-tags {
  display: flex;
  flex-wrap: wrap;
}
.project-tag {
  border: 1px solid var(--border-outline);
  border-radius: 1rem;
  padding: 0.5rem;
  margin: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  flex-basis: 10%;
  flex-wrap: none;
  text-align: center;
  transition: transform 0.2s ease;
}
.project-tag:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}
.grow {
  flex-grow: 0.75;
}
.project-box:nth-of-type(2) {
  display: flex;
  flex-direction: row-reverse;
}
.project-tile {
  background-color: var(--background-color);
  border: 1px solid var(--border-outline);
  border-radius: 1rem;
  aspect-ratio: 16/9 auto;
  width: clamp(120px, 90%, 500px);
}
img {
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*Project Links */
.fa-external-link,
.fa-code {
  font-size: 1rem;
  color: var(--font-color);
  margin: 1rem 1rem 0 0;
  border-radius: 1rem;
  padding: 0.5rem 2rem;
  transition: transform 0.2s ease-in-out;
}
.fa.fa-code.accent {
  background: var(--primary-color);
}
.fa.fa-code.accent-2 {
  background: var(--secondary-color);
}
.fa.fa-code.accent-3 {
  background: var(--tertiary-color);
}
.fa.fa-external-link {
  border: 2px solid var(--border-outline);
}
.fa.fa-external-link:hover,
.fa.fa-code:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
/* CONTACT SECTION */
#contact-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
}
.contact-container {
  display: flex;
  width: clamp(300px, 100%, 1200px);
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 2rem;
}
.contact-header {
  font-size: 2rem;
  letter-spacing: -1px;
  margin: 1rem auto 3rem;
}
.contact-info {
  display: flex;
  flex-direction: column;
  margin-right: 2rem;
}
.contact-info h3 {
  color: var(--primary-color);
  font-size: 1.25rem;
  line-height: 100%;
  padding: 0.5rem;
  letter-spacing: -0.75px;
}
.contact-info p {
  margin: 10px 0;
  letter-spacing: -1px;
}
.fa.fa-envelope-o {
  font-size: 1.75rem;
}
.fa.fa-github {
  font-size: 2rem;
  padding-right: 0.5rem;
}
.fa.fa-linkedin-square {
  font-size: 2rem;
  padding-right: 0.5rem;
}
.fa.fa-mobile {
  font-size: 2.5rem;
  padding-right: 0.75rem;
}
.phone-details {
  padding-left: 1rem;
}
.email-details {
  padding-left: 0.75rem;
}
.copy-button {
  background: transparent;
  color: var(--font-color);
  font-size: clamp(0.875rem, 5vw, 1.125rem);
  font-weight: 500;
  margin: 0 0 0.25rem 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.copy-button:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
.github-details {
  padding-left: 0.75rem;
}
.linkedin-details {
  padding-left: 0.75rem;
}
/* CONTACT INFORMATION LINKS */
p a {
  color: var(--font-color);
  display: inline-block;
  text-decoration: none;
  transition: transform 0.2s ease-in-out;
  font-size: clamp(1rem, 5vw, 1.125rem);
}
p a:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}
.email-details,
.phone-details,
.location-details,
.github-details,
.linkedin-details {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.contact-form {
  width: clamp(300px, 100%, 400px);
  padding: 0.5rem;
}
.contact-form h2 {
  margin-bottom: 20px;
}
.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  letter-spacing: -0.5px;
  padding: 0.125rem;
}
#fullname,
#email,
#message,
.contact-form textarea {
  margin-bottom: 1rem;
  width: clamp(250px, 90%, 500px);
  padding: 0.625rem;
  border: 1px solid var(--border-outline);
  border-radius: 1rem;
  background-color: var(--background-color);
  color: var(--font-color);
}
.contact-form textarea {
  height: 8rem;
}
#submit {
  padding: 0.75rem;
  color: var(--font-color);
  background: var(--background-color);
  border: 1px solid var(--border-outline);
  border-radius: 1rem;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: -0.5px;
  transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease;
}
#submit:hover {
  background-color: #161616;
  box-shadow: 0 10px 15px -3px var(--button-hover),
    0 4px 6px -2px var(--button-hover);
}
#submit:focus,
#submit:active {
  opacity: 0.85;
  box-shadow: none;
}
/* ANIMATIONS */
/* Open Source Location Icon From Uiverse.io byvikramsinghnegi */
/*LINK -> https://uiverse.io/vikramsinghnegi/witty-skunk-89*/
.loader-shape-3 {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
}
.loader-shape-3:after {
  width: 30px;
  height: 20px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 15px;
}
.loader-shape-3:before {
  width: 20px;
  height: 20px;
  border-radius: 100% 100% 100% 0;
  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1);
  animation: location-move 1s linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-46deg);
  margin-top: 20px;
}
.loader-shape-3:before,
.loader-shape-3:after {
  position: absolute;
  content: "";
}
@keyframes location-move {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}
/* Wave Icon */
/* Text Highlight */
@keyframes highlight {
  to {
    background-position: 100%;
  }
}
/* FOOTER */
footer {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  z-index: 2;
}
#finisher-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* WAVES BACKGROUND */
.footer-background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.air {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png);
  background-size: 1000px 100px;
}
.air.air1 {
  animation: wave 45s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
.air.air2 {
  animation: wave2 22.5s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}
.air.air3 {
  animation: wave 45s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}
.air.air4 {
  animation: wave2 10s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 20px;
}
/* WAVES ANIMATIONS */
@keyframes wave {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 1000px;
  }
}
@keyframes wave2 {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-position-x: 0;
  }
}
/* NAVIGATION BAR ANIMATION */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* WELCOME SECTION ANIMATION */
@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* SCROLL ANIMATIONS */
.hidden {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.show {
  opacity: 1;
  transform: translateY(0);
}
.skills-list > li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.skills-list > li.show {
  opacity: 1;
  transform: translateY(0);
}

.skills-list > li:nth-child(1) {
  transition-delay: 0.1s;
}
.skills-list > li:nth-child(2) {
  transition-delay: 0.15s;
}
.skills-list > li:nth-child(3) {
  transition-delay: 0.2s;
}
.skills-list > li:nth-child(4) {
  transition-delay: 0.25s;
}
.skills-list > li:nth-child(5) {
  transition-delay: 0.3s;
}
.skills-list > li:nth-child(6) {
  transition-delay: 0.35s;
}
.skills-list > li:nth-child(7) {
  transition-delay: 0.4s;
}
.skills-list > li:nth-child(8) {
  transition-delay: 0.45s;
}
.skills-list > li:nth-child(9) {
  transition-delay: 0.5s;
}