* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

body {
  background-repeat: no-repeat;
  background-size: cover;
  /* cursor: url("penis.svg"), auto; */
  background-position: center;
}

video {
  margin-top: 1rem;
  height: 100%;
  /* Full height */
  width: 100%;
  /* Full width */
  border-radius: 0.5rem;
  /* Rounded corners (8px by default) */
}

.badge {
  padding: 0.2rem;
  text-decoration: none;
  background-color: rgb(225, 225, 225);
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  width: fit-content;
  /* box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 4px 6px rgba(34, 42, 53, .04), 0 24px 68px rgba(47, 48, 55, .05), 0 2px 3px rgba(0, 0, 0, .04); */
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.badge-icon {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  background-color: white;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 4px 6px rgba(34, 42, 53, .04), 0 24px 68px rgba(47, 48, 55, .05), 0 2px 3px rgba(0, 0, 0, .04);

  border-radius: 100px;
}

.badge-name {
  font-weight: 500;
  font-size: 0.75rem;
  color: rgb(89, 89, 89);
  padding-right: 0.2rem;
}

.wrapper {
  z-index: 283328;
  position: fixed;
  display: flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

.typing-demo {
  width: 42ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 0.85rem;
}

.author_name {
  font-size: 0.75rem;
}

@media (min-width: 600px) {
  .author_name {
    font-size: 1.75rem;
  }

  .typing-demo {
    font-size: 2.4rem;
  }
}

.shifted {
  margin-left: 1rem;
}


@keyframes typing {
  from {
    width: 0
  }
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}


.fast-move {
  /* cursor: url("sperm.svg"), auto; */
}

header {
  margin: 0.5rem;
  padding: 1rem 1rem;
  border-radius: 10px;
  backdrop-filter: (15px);
  background-color: rgba(243, 243, 243);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.link a {
  text-decoration: none;
}

header p {
  font-size: 1.5rem;
  font-weight: 600;
}

header img {
  border-radius: 1008px;
  width: 50px;
}

.nav>ul {
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav>ul>li {
  cursor: pointer;
  list-style-type: none;
}

button {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
    rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;

  font-family: "Poppins", sans-serif;
  padding: 9px 16px;
  font-size: 1rem;
  background-color: black;
  border: none;
  color: white;
  border-radius: 880px;
}

.dim {
  color: rgb(89, 89, 89);
}

.small-weight {
  font-weight: 500;
}

.exclamation {
  animation-name: bounce;
  animation-iteration-count: infinite;
  position: relative;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
  font-size: 1.5rem;
}

@keyframes bounce {

  0%,
  50% {
    bottom: 5px;
  }

  100% {
    bottom: 0px;
  }
}

.home {
  margin: 0.5rem;
  padding: 1.5rem 1rem;
  min-height: 100vh;
  background-color: rgb(243, 243, 243);
  backdrop-filter: blur(15px);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inside-home {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.inside-home .title {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 500;
}

.inside-home img {
  border-radius: 100%;
  width: 100px;
}

.inside-home p {
  max-width: 380px;
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1rem;
}

.experience {
  backdrop-filter: blur(15px);
  background-color: rgba(243, 243, 243);
  max-width: 1500px;
  margin: 0.5rem;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 1000px) {
  .experience {
    flex-wrap: wrap;
  }
}

.experience .work-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 100%;
  height: 110px;
}

.work-box img {
  width: 120px;
}

.projects {
  max-width: 1500px;
  padding: 2rem 2rem;
  margin: 0.5rem;
  border-radius: 10px;
  display: flex;
  backdrop-filter: blur(15px);
  background-color: rgba(243, 243, 243);
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 1000px) {
  .projects {
    flex-wrap: wrap;
  }
}

.projects .project {
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: pink;
  border-radius: 10px;
  height: 400px;
  width: 100%;
  gap: 0.5rem;
  flex-direction: column;
}

.project .project-title {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
    rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  font-family: "Poppins", sans-serif;
  padding: 13px 34px;
  font-size: 1rem;
  background-color: #f3f3f3;
  border: none;
  backdrop-filter: blur(10px);
  color: black;
  border-radius: 880px;
  font-weight: 500;
}

.project .project-desc {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
    rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  /* box-shadow: #00000024 0px 4px 7px 1px; */
  font-family: "Poppins", sans-serif;
  visibility: hidden;
  padding: 9px 16px;
  font-size: 2.2rem;
  font-weight: 500;
  background-color: #f3f3f3;
  backdrop-filter: blur(10px);
  color: black;
  height: 100%;
  border-radius: 10px;
}

.project-1 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("./nvda.jpg");
}

.project-2 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("./spacex.jpg");
}

.project-3 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("./balorant.jpg");
}

.project-4 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("./bldur.jpg");
}

.work-together {
  font-size: 5rem;
  font-weight: 500;
}

.last-collab {
  margin-top: 1rem;
}

@media (max-width: 500px) {
  .work-together {
    font-size: 2.5rem;
  }
}

.about {
  margin: 0.5rem;
  flex-direction: column;
  padding: 1.5rem 1rem;
  min-height: 100vh;
  background-color: rgb(243, 243, 243);
  backdrop-filter: blur(15px);
  border-radius: 10px;
  display: flex;
  justify-content: center;
}

.about-inner {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.about-inner h1 {
  font-size: 2.5rem;
  font-weight: 500;
}

.about-inner {
  max-width: 600px;
}

.about-inner p {
  font-size: 1rem;
}

/* Project */
.project-container {
  max-width: 600px;
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
}

.sub-project-container {
  display: flex;
  gap: 1rem;
}

.project-image {
  width: 48px;
  min-height: 48px;
  min-width: 48px;
  height: 48px;
  /* background: #000; */
  border-radius: 5px;
}

.purplenight {
  background-image: url("favicon.svg");
  background-position: center;
  background-size: cover;

}
.lushh {
  background-image: url("lushh.jpeg");
  background-position: center;
  background-size: cover;

  border-radius: 14px;
}
.resell {
  background-color: #ffffff;
  background-image: url("resell.png");
  border-radius: 14px;
  background-position: center;
  background-size: cover;
}



.eventually {
  background-image: url("eventually.png");
  background-position: center;
  background-size: cover;
  border-radius: 14px;
}

.windup {
  background-image: url("windowmanager.webp");
  background-position: center;
  background-size: cover;
  border-radius: 14px;
}


.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.stack .skill {
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
    rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

/* socials */
.socials {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.socials a {
  text-decoration: none;
}