@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Poppins:wght@300&family=Ubuntu&family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=EB+Garamond&family=Poppins:wght@300&family=Ubuntu&family=Varela+Round&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #010115;
  scroll-behavior: smooth;
}

noscript {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #11111b;
  font-size: 4rem;
  color: white;
  z-index: 999999;
}

.fakenavbar {
  height: 0px;
  width: 0%;
  background-color: transparent;
}

.name {
  color: #fff;
  font-family: "Dancing Script";
  font-weight: 400;
  font-size: 1.4rem;
  width: 261px;
}

.navbar {
  background-color: rgba(255, 255, 255, 9%);
  backdrop-filter: blur(50px);
  height: 80px;
  width: 80%;
  display: flex;
  align-items: center;
  padding: 0px 20px;
  justify-content: space-between;
  position: fixed;
  z-index: 999;
  border: 0.2rem solid #20222e10;
  border-radius: 50px;
  overflow: hidden;
  margin-left: 18vh;
  margin-top: 2vw;
}

.navbar-tabs {
  display: flex;
  height: 100%;
  width: 80%;
  align-items: center;
}

.navbar-tabs-ul {
  height: 100%;
  width: 100%;
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: flex-end;
  gap: 80px;
  color: #fff;
}

.navbar-tabs-ul li {
  width: fit-content;
  height: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  position: relative;
  font-family: "Dancing Script";
}

.navbar-tabs-ul li:hover {
  cursor: pointer;
  color: #8000ff;
}

.navbar-tabs-ul a {
  text-decoration: none;
  color: #fff;
  font-weight: 100;
}

.logo {
  position: relative;
  width: 10%;
  height: 100%;
  transition-duration: 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hey {
  color: white;
  position: absolute;
  font-size: 1.rem;
  font-weight: 300;
  background-color: #20222e;
  padding: 5px 10px;
  border-radius: 20px;
  left: 120px;
  bottom: 80px;
  opacity: 0;
}

.popup {
  animation: pop-up 3s linear;
}

@keyframes pop-up {
  from {
    bottom: -50px;
    left: 50px;
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.logo-top {
  width: 100%;
  height: 84%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: headshake 15s linear infinite;
  transform-origin: bottom;
  position: relative;
}

@keyframes headshake {
  0% {
    transform: rotate(-8deg);
  }

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

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

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

  100% {
    transform: rotate(-8deg);
  }

}

.logo-top img {
  height: 100%;
  z-index: 2;
}

.face {
  content: "";
  position: absolute;
  width: 100%;
  height: 60%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 1;
}

.eye {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  overflow: hidden;
}

.pupil {
  width: 4px;
  height: 4px;
  background: rgb(36, 16, 16);
  border-radius: 50%;
}

/* .eye:after { 
  position: absolute;
  width: 4px;
  height: 4px;
  left: .7px;
  top: 0;
  background: #000;
  border-radius: 50%;
  content: " ";
} */
.logo-bottom {
  width: 100%;
  height: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-bottom img {
  height: 100%;
}

.logo:hover {
  transform: translateY(200px);
  transition-duration: 1s;
}

/* navbar code ends here */

/* Hero-section */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 105vh;
}

.hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 5vh;
  background: linear-gradient(to top, #010115, transparent);
  z-index: 1;
}

.hero-img {
  position: absolute;
  width: 38vw;
  margin-left: 66vw;
  z-index: 1;
}

.bg {
  height: 100vh;
  width: 100vw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-description {
  position: absolute;
  width: 33vw;
  height: 10vh;
  margin-top: -55vh;
  margin-left: -77vh;
  z-index: 2;
}

.hero-title {
  color: #fff;
  font-size: 4vw;
  font-weight: 400;
  font-family: "EB Garamond";
}

#element {
  color: #7a31bf;
  font-family: "Dancing Script";
}

.hero-subheading {
  color: #fff;
  font-size: 1.9vw;
  font-weight: 400;
  font-family: "EB Garamond";
  margin-left: 0.6vw;
}

/* Hero-Model */
.hero-model {
  position: absolute;
}

model-viewer {
  width: 67vw;
  height: 100vh;
  z-index: 1;
  margin-left: -7vh;
  margin-top: 2vw;
}

.about-me {
  position: relative;
  display: grid;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0 10vw;
}

.about-me-description {
  position: absolute;
  height: 35vh;
  width: 35vw;
  margin-top: -50vh;
  margin-left: 7vw;
}

.introduction {
  color: #ffffff5a;
  font-size: 1vw;
  padding-bottom: 2vh;
}

.about-me-title {
  color: #fff;
  font-size: 3.5vw;
  font-family: "Dancing Script";
}

.about-me-subheading {
  color: #fffa;
  font-size: 1.4vw;
  font-weight: 400;
  font-family: "EB Garamond";
  line-height: 1.2;
  padding-top: 3vh;
}


.resume-btn {
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  left: 10px;
  overflow: hidden;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background: linear-gradient(82.3deg,
      rgba(150, 93, 233, 1) 10.8%,
      rgba(99, 88, 238, 1) 94.3%);
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign svg {
  width: 17px;
}

.sign svg path {
  fill: white;
}

/* text */
.text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1em;
  font-weight: 600;
  transition-duration: .3s;
}

/* hover effect on button width */
.resume-btn:hover {
  width: 130px;
  border-radius: 40px;
  transition-duration: .3s;
}

.resume-btn:hover .sign {
  width: 30%;
  transition-duration: .3s;
  padding-left: 20px;
}

/* hover effect button's text */
.resume-btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: .3s;
  padding-right: 10px;
}

/* button click effect*/
.resume-btn:active {
  transform: translate(2px, 2px);
}

/* Animation Cards */
.animation {
  opacity: 0;
  transition: all 0.5s;
}

.showUp {
  animation: showUp 1s;
}

@keyframes showUp {
  0% {
    transform: translateY(60px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Animation Cards */

.cards {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  top: 45vh;
  margin-top: 15vh;
}

.card {
  position: relative;
  display: grid;
  justify-items: center;
  width: 10vw;
  height: 25vh;
  margin: 2vw;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 9px #fffa;
}

.reactImg,
.htmlImg {
  width: 70%;
  z-index: 1;
  margin-top: 2vh;
}

.java,
.js {
  width: 60%;
  z-index: 1;
  margin-top: 2vh;
}

.threejsImg {
  width: 150%;
  z-index: 1;
  margin-top: 1vh;
}

.title {
  color: #fff;
  position: absolute;
  font-size: 1.6vw;
  text-align: center;
  z-index: 10;
  font-family: "EB Garamond";
  font-weight: 400;
  margin-top: 19vh;
}

.card::before {
  content: "";
  position: absolute;
  width: 20vw;
  height: 24vh;
  background: linear-gradient(#00ccff, #d400d4);
  animation: rotation 5s linear infinite;
}

.card::after {
  content: '';
  position: absolute;
  inset: 0.15vw;
  background-color: #16063a;
  border-radius: 15px;
}

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

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

/* Timeline */
.timeline-description {
  display: grid;
  width: 100vw;
  place-items: center;
  padding-bottom: 10vh;
}

.timeline-title {
  color: #ffffff5a;
  font-size: 1.4vw;
  padding-bottom: 2vh;
  margin-left: -115vh;
}

.timeline-subheading {
  color: #fff;
  font-size: 3.9vw;
  font-family: "Dancing Script";
}

.content h2 {
  margin-top: -1px;
  color: rgb(211, 210, 210);
  text-shadow: 2px 2px 2px black;
}

.kerstbal span {
  font-family: 'Dancing Script', cursive;
  font-size: 20px;
  margin-top: 10px;
  color: rgb(238, 235, 235);
  text-shadow: 2px 2px 0px rgb(0, 0, 0), ;
}

.snowflake::before {
  content: "\2744";
  /* Unicode code point for snowflake */
  position: absolute;
  font-size: 24px;
  width: 10px;
  height: 10px;

  /* Workaround for Chromium's selective color inversion */
  border-radius: 50%;
  filter: drop-shadow(0 0 10px white);
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: antiquewhite;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}


/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: "\2744";
  /* Unicode for snowflake character */
  position: absolute;
  width: 25px;
  height: 25px;
  right: -2px;
  color: antiquewhite;
  border-radius: 50%;
  z-index: 1;
  font-size: 48px;
  top: 15px;

}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -22px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background: rgb(1, 1, 1);
  position: relative;
  border-radius: 6px;
  border: 1px solid white;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}


.kerstbal-container {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 250px;
  height: 250px;
}

.kerstbal {
  width: 200px;
  height: 200px;

}

.ring {
  width: 15px;
  height: 10px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 50%;
}

.top {
  width: 25px;
  height: 10px;
  background-color: rgb(240, 5, 5);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  margin-top: -1%;
}


.bal {
  width: 200px;
  height: 200px;
  border: 1px solid white;
  border-radius: 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 1%;
}

.kerstbal-container span {
  margin-top: 20px;
  color: #fff;
}

.bal1 {
  background-image: url('https://images.unsplash.com/photo-1552308995-2baac1ad5490?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

.bal2 {
  background-image: url('https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTF8fHByb2dyYW1taW5nfGVufDB8fDB8fHww');
}

.bal3 {
  background-image: url('https://images.unsplash.com/photo-1484417894907-623942c8ee29?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTJ8fHByb2dyYW1taW5nfGVufDB8fDB8fHww');
}

.bal4 {
  background-image: url('https://images.unsplash.com/photo-1505238680356-667803448bb6?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTh8fHByb2dyYW1taW5nfGVufDB8fDB8fHww');
}

.bal5 {
  background-image: url('https://images.unsplash.com/photo-1544256718-3bcf237f3974?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NTl8fHByb2dyYW1taW5nfGVufDB8fDB8fHww');
}

.bal6 {
  background-image: url('https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=2920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

.bal7 {
  background-image: url('https://images.unsplash.com/photo-1592424002053-21f369ad7fdb?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

.bal8 {
  background-image: url('https://images.unsplash.com/photo-1517503632222-64085e36227b?q=80&w=2336&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {

  /* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

  /* Full-width containers */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after,
  .right::after {
    left: 8px;
  }

  /* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
}

/* Cards 2 */
.social-cards {
  position: relative;
  width: 100vw;
  height: auto;
  padding: 10vh 10vw;
  margin-top: 2%;
}

#cards2 {
  color: #fff;
  width: 90%;
  padding-inline: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-left: 6vw;
  margin-bottom: 8vw;
  margin-top: 5vw;
}

.social-title {
  color: #fff;
  font-size: 3.5vw;
  font-family: "Dancing Script";
  margin-top: 2vh;
}

.social-description {
  color: #fffa;
  width: 27vw;
  font-size: 1.2vw;
  padding-top: 5vh;
  font-family: "EB Garamond";
  line-height: 1.2;
}

.card2 {
  min-width: 200px;
  height: 350px;
  flex: 1 1 250px;
  background-color: rgba(255, 255, 255, 0.217);
  border-radius: 12px;
  position: relative;
}

#cards2:hover>.card2 {
  background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),
      hsl(var(--color) / 1),
      rgba(255, 255, 255, 0.12) 40%);
}

.card2-content {
  position: absolute;
  inset: 1px;
  background-color: #060606;
  border-radius: inherit;
}

.card2:nth-child(1) {
  --color: 348 80% 60%;
}

.card2:nth-child(2) {
  --color: 0 0% 100%;
}

.card2:nth-child(3) {
  --color: 292 100% 40%;
}

.card2::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y),
      hsl(var(--color) / 0.35),
      transparent 40%);
  border-radius: inherit;
  opacity: 0;
  z-index: 2;
}

#cards2:hover>.card2::before {
  opacity: 1;
}

.card2-content a {
  all: unset;
  cursor: pointer;
}

.card2-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.card2-content>i {
  font-size: 10rem;
  color: rgba(255, 255, 255, 0.5);
}

.card2-content>p {
  color: rgba(255, 255, 255, 0.5);
}

.card2-content>a {
  width: 90%;
  padding-block: 0.8rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.card2-content>a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Achievement-cards */
.achievement {
  position: relative;
  width: 100vw;
  height: auto;
  padding: 10vh 10vw;
  margin-top: 6%;
}

.achievement-title {
  color: #fff;
  font-size: 3.5vw;
  font-family: "Dancing Script";
  margin-top: 2vh;
}

.achievement-description {
  color: #fffa;
  width: 27vw;
  font-size: 1.2vw;
  padding-top: 5vh;
  font-family: "EB Garamond";
  line-height: 1.2;
}

.achievement-slider {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  margin-top: 4vw;
}

.slider {
  display: flex;
  aspect-ratio: 13 / 9;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
  border-radius: 0.5rem;
  -ms-overflow-style: none;
  /* Hide scrollbar IE and Edge */
  scrollbar-width: none;
  /* Hide scrollbar Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.slider::-webkit-scrollbar {
  display: none;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  object-fit: cover;
}

.slider-nav {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.slider-nav a {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: #040000;
  opacity: 0.75;
  transition: opacity ease 250ms;
}

.slider-nav a:hover {
  opacity: 1;
}


/* Youtube */
.youtube {
  position: relative;
  width: 100vw;
  height: auto;
  padding: 10vh 10vw;
}

.youtube-title {
  color: #fff;
  font-size: 3.5vw;
  font-family: "Dancing Script";
  margin-top: 2vh;
}

.youtube-description {
  color: #fffa;
  width: 27vw;
  font-size: 1.2vw;
  padding-top: 5vh;
  font-family: "EB Garamond";
  line-height: 1.2;
}

.videos {
  display: flex;
  justify-content: space-around;
  gap: 2vw;
  margin-top: 17vh;
}

.youtube-videos {
  display: grid;
  place-items: center;
  text-align: center;
}

.images {
  width: 20vw;
}

.video-title {
  color: #fff;
  font-size: 2vw;
  font-weight: 400;
  font-family: "EB Garamond";
  line-height: 1.2;
  padding-top: 2vh;
}

.video-description {
  color: #fffa;
  font-size: 1.4vw;
  font-family: "EB Garamond";
  padding-top: 5vh;
  width: 20vw;
  line-height: 1.2;
}

.btn {
  display: grid;
  color: #fff;
  place-items: center;
  width: 10vw;
  height: 5vh;
  margin-top: 5vh;
  text-decoration: none;
  border-radius: 15px;
  background-color: #010115;
  box-shadow: 0 0 5px #fffa;
  font-size: 1.4vw;
  font-family: "EB Garamond";
  transition: all 0.5s;
  animation: chitchat linear both 1.2s;
}

.btn span {
  letter-spacing: .1rem;
  transition: .3s;
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.btn:hover {
  box-shadow: 0 0 10px rgb(140, 56, 224);
}

.btn:hover span,
.btn:focus span {
  color: rgb(140, 56, 224);
}

.btn:hover span::before,
.btn:focus span::before {
  animation: chitchat linear both 2s;
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}

/* Final */
.final {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-image: url(/assets/hero/purple.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.contact {
  position: absolute;
  margin-top: -38vw;
  color: #fff;
  font-family: "EB Garamond";
  font-size: 2.2rem;
  margin-left: -60vh;
}

.form-container {
  height: 600px;
  width: 700px;
  background: linear-gradient(#212121, #212121) padding-box,
    linear-gradient(145deg, transparent 35%, #e81cff, #40c9ff) border-box;
  border: 2px solid transparent;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  border-radius: 16px;
  background-size: 200% 100%;
  animation: gradient 5s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.form-container button:active {
  scale: 0.95;
}

.form-container .form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #717171;
  font-weight: 600;
  font-size: 22px;
}

.form-container .form-group input {
  height: 3.7vw;
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  background-color: transparent;
  border: 1px solid #414141;
}

.form-container .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  resize: none;
  color: #fff;
  height: 170px;
  border: 1px solid #414141;
  background-color: transparent;
  font-family: inherit;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-group textarea:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-submit-btn {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-self: flex-start;
  font-family: inherit;
  color: #717171;
  font-weight: 600;
  width: 40%;
  background: #313131;
  border: 1px solid #414141;
  padding: 12px 16px;
  font-size: 1.7rem;
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
  border-radius: 6px;
}

.form-container .form-submit-btn:hover {
  background-color: #fff;
  border-color: #fff;
}

.loader {
  width: 150px;
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader_cube {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.loader_cube--glowing {
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.loader_cube--color {
  z-index: 1;
  filter: blur(2px);
  background: linear-gradient(135deg, #1afbf0, #da00ff);
  animation: loadtwo 2.5s ease-in-out infinite;
}

@keyframes loadtwo {
  50% {
    transform: rotate(-80deg);
  }
}

/* For Back to Top */
#backtotopbutton {

  position: fixed;
  right: 10px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  width: 3rem;
  height: 15rem;
  z-index: 101;
  text-align: center;
  transition: all .4s;
  background-color: transparent;
  display: none;
}

#backtotopbutton article {

  font-size: 1.2rem;
  color: #fff;
  font-weight: 400;
  /* width: 200px; */
  /* transform: rotate(90deg); */

  writing-mode: vertical-rl;
  font-family: "EB Garamond";
  mix-blend-mode: difference;
}


#backtotopbutton:hover {
  transform: translate(0px, -20px);
  text-decoration: line-through #fff;
  cursor: pointer;
}



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

.footercontainer {
  background-color: #141723f4;
  width: 100%;
}

.two-words {
  color: rgb(179, 179, 179);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.two-words article {
  font-size: 3rem;
  font-family: fira code;
}

.social-media-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;

}

.social-media-container a {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 10px;
  border-radius: 50%;
  border: 2px solid rgb(226, 222, 222);
  transition-duration: .3s;
  cursor: url('click.png');
  cursor: url('click.png'),
    url('click.png');
  cursor: url('click.png'),
    move;
  cursor: url('click.png')10 12;
  position: relative;
  box-shadow: 0px 0px 0px #8000ff inset;
  transition-duration: .3s;
}

.getintouch-heading {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.getintouch-heading article {
  font-size: 2rem;
  background: -webkit-linear-gradient(135deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
  background: linear-gradient(-45deg, #6bc5f8, #cf59e6, #6bc5f8, #cf59e6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-family: fira code;
}

.logos {
  display: flex;
  width: 100%;
  gap: 30px;
  justify-content: center;
  align-items: center;
  height: 80px;
}

.SocialHandle {
  fill: white;
  width: 60%;
}

#GmailLogo {
  height: 70%;
  fill: white;
}

.social-media-container a:hover {
  box-shadow: 0px 0px 50px 100px #8000ff inset;
  transition-duration: 1s;
  cursor: pointer;
  border: none;
}

.social-media-container a::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  border-radius: 50%;
  transform: scale(0);
  background-color: #8000ff;
  background-color: transparent;
  transition-duration: .3s;
  z-index: -1;
}

.social-media-container a:hover::before {
  transform: scale(1);
  transition-duration: .3s;
}

.footer-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.footer-bottom article {
  color: rgb(176, 176, 176);
  font-size: 1.5rem;
  font-family: fira code;
}

.fa-copyright {
  font-size: 1.5rem;
  color: rgb(176, 176, 176);
}

.mobiletogglemenu {
  display: none;
}

.hamburger {
  display: none;
}

.tonechange {
  color: black;
}


/* Mobile Styles */
@media (max-width: 768px) {
  #navbar {
    margin-left: 4vh;
    opacity: 1;
  }

  .navbar-tabs {
    display: none;
    /* hide tabs on smaller screens */
  }

  .hero {
    width: 100vw;
    height: 105vh;
  }

  .hero-img {
    width: 78vw;
    margin-left: 7vw;
    z-index: 0;
    top: 50%;
  }

  .bg {
    height: 100vh;
    width: 100vw;
  }

  .hero-description {
    width: 100vw;
    height: 18vh;
    margin-top: -44vh;
    margin-left: 2vh;
  }

  .img-group {
    display: flex;
    flex-direction: column;
  }

  .hero-title {
    font-size: 10vw;
  }

  model-viewer {
    margin-left: 3vh;
    margin-bottom: 34vw;
    width: 69vw;
    height: 100vh;
    z-index: 1;
  }

  .resume-btn {
    width: 80%;
    margin: 10px auto;
    font-size: 1.2em;
  }

  .about-me,
  .cards,
  .achievement,
  .youtube,
  .social-cards,
  .final {
    padding: 20px 10px;
  }

  .about-me-description{
    height: 100vh;
    width: 66vw;
    margin-top: 0vh;
  }
  .about-me-description .introduction{
    font-size: 2.7vw;
  }
  .about-me-title{
    font-size: 7.5vw;
  }
  .about-me-subheading{
    font-size: 2.4vw;
  }

  .cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 142vh;
  }

  .card {
    width: 94%;
    margin: 10px 0;
  }

  .card .title {
    font-size: 2rem;
  }

  .reactImg,
.htmlImg {
  width: 45%;
  z-index: 1;
  margin-top: 2vh;
}

.java,
.js {
  width: 32%;
  z-index: 1;
  margin-top: 2vh;
}

.threejsImg {
  width: 85%;
  z-index: 1;
  margin-top: 1vh;
}

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

  .timeline-subheading {
    font-size: 7.4vw;
  }

  .timeline-description {
    margin-top: 142vw;
  }

  .timeline-title {
    font-size: 1.4rem;
    margin-left: -25vh;
  }

  .container {
    width: 100%;
    margin: 20px 0;
  }

  .achievement-title {
    font-size: 7.5vw;
  }

  .achievement-description {
    margin-top: -16px;
    width: 54vw;
    font-size: 2.5vw;
    margin-bottom: 20px;
  }

  .youtube-videos {
    margin-bottom: 20px;
  }

  .videos {
    margin-top: 15vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .youtube-videos .images {
    width: 51vw;
  }

  .youtube-videos .btn {
    width: 25vw;
    height: 3vh;
    margin-top: 5vh;
    font-size: 3vw;
  }

  .youtube-title {
    font-size: 7.5vw;
  }

  .youtube-description {
    margin-top: -20px;
    width: 54vw;
    font-size: 2.5vw;
  }

  .social-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .social-title {
    font-size: 3rem;
  }

  .social-description {
    font-size: 1rem;
    width: 100%;
    text-align: center;
    margin-top: -20px;
  }

  .card2 {
    width: 100%;
    margin: 10px 0;
  }

  .form-container {
    height: 520px;
    width: 650px;
  }

  .resume-btn {
    width: 10vw;
    height: 10vw;
  }

  .loader {
    opacity: 1;
  }

  #backtotopbutton {
    margin-right: -13px;
  }

  .footercontainer{
    padding-left: 23px;
  }
  .contact {
    margin-left: 20px;
    margin-bottom: 168vw;
  }

  .two-words {
    margin-left: 6px;
  }

  .two-words article {
    font-size: 2.8rem;
  }
  .footer-bottom article{
    font-size: 1.1rem;
  }
}