@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap");

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

body {
  font-family: "Albert Sans", sans-serif;
  background-color: #000000;
  color: #ffffff;
  background-image: url(res/desktop.jpg);
  background-size: cover;
  background-position: center;
  /* max-height: 100vh; */
  background-attachment: fixed;
}

.background-blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;

  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter 0.5s ease-out, -webkit-backdrop-filter 0.5s ease-out, background-color 0.5s ease-out;
}

.background-blur-overlay.active-background-blur {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.6);
}

.heading1 {
  font-family: "Albert Sans";
  font-weight: 700;
  color: #ffffff;
  text-transform: none;
  text-decoration: none;
  font-size: 64px;
  letter-spacing: -0.04em;
  line-height: 90%;
  flex-shrink: 0;
}

.heading2 {
  font-family: "Albert Sans";
  font-weight: 700;
  color: #ffb700;
  text-transform: capitalize;
  text-decoration: none;
  font-size: 48px;
  letter-spacing: -0.02em;
  line-height: 100%;
  flex-shrink: 0;
}

.heading3 {
  font-family: "Albert Sans";
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 130%;
  flex-shrink: 0;
}

.bodyL {
  font-family: "Albert Sans";
  font-weight: 700;
  color: #ffffff;
  text-transform: none;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 0em;
  line-height: 170%;
}

.body {
  font-family: "Albert Sans";
  font-weight: 400;
  color: #ffffff;
  text-transform: none;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0em;
  line-height: 170%;
}

.bodyS {
  font-family: "Albert Sans";
  font-weight: regular;
  color: #ffffff;
  text-transform: none;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0em;
  line-height: 170%;
}

.quote {
  font-family: "Albert Sans";
  font-weight: 700;
  color: #ffffff;
  text-transform: none;
  text-decoration: none;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 130%;
}

.main-container {
  position: relative;
  width: 80%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 0px;
  overflow: visible;
  z-index: 3;
  margin: 0px auto;
}

.home {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  padding: 0px;
  overflow: visible;
}

.opentowork {
  position: absolute;
  left: 0px;
  top: 5%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 11px;
  padding: 0px;
  overflow: visible;
}

.greendot {
  position: relative;
  height: 9px;
  width: 9px;
  background-color: #02FF27;
  border-radius: 50%;
}

.name {
  position: absolute;
  left: 0;
  top: 44%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0px;
  overflow: hidden;
}

.name h3 {
  color: #ffb800;
  outline: none;
  flex-shrink: 0;
  word-break: break-word;
  word-wrap: break-word;
}

.links-home {
  position: absolute;
  left: 0px;
  top: 68%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 40px;
  padding: 0px;
  overflow: hidden;
}

.links-home img {
  position: relative;
  width: 26px;
  height: 26px;
}

.link-clm {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 20px;
  padding: 0px;
  overflow: hidden;
}

.link-element {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0px;
  flex-shrink: 0;
  overflow: hidden;
}

.menu-mobile {
  display: none;
}

.menu {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  border-radius: 999px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 4px;
  overflow: hidden;
  border: none;
  cursor: pointer;
  z-index: 10;
  background-color: hsla(0, 0%, 100%, 0.1);
  backdrop-filter: blur(16px);
}

.menu-button-solo {
  position: relative;
  width: 100%;
  height: 48px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  background-color: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 0px;
}

.menu-button-solo img {
  width: 20px;
  height: 20px;
}


.menu-btn {
  background-color: transparent;
  border: none;
  border-radius: 999px;
  font-family: "Albert Sans";
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0em;
  line-height: normal;
  cursor: pointer;
}

.menu-button-solo-selected {
  position: relative;
  width: 100%;
  height: 48px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  background-color: white;
  border: none;
  border-radius: 999px;
  color: #000000;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 0px;
}

.menu-button-solo-selected .menu-btn {
  color: #000000;
}

.menu-mobile-btn-selected {
  position: relative;
  width: 100%;
  height: 48px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  background-color: white;
  border: none;
  border-radius: 999px;
  color: #000000;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 0px;
}

.summary {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 80px 0;
  overflow: hidden;
}

.summary-ct {
  position: relative;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 32px;
  padding: 0px;
  overflow: visible;
}

.light-summary {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0px;
  outline: none;
  transform: none;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
}

.dark-summary {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 32px;
  height: min-content;
  overflow: hidden;
  padding: 24px 0px 0px 0px;
}

.dark-summary-line {
  position: relative;
  width: 20px;
  align-self: stretch;
  height: auto;
  overflow: hidden;
  background-color: #FFB800;
}

.projects {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 80px 0;
  overflow: hidden;
}

.projects-ct {
  position: relative;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 40px;
  padding: 0px;
  overflow: visible;
}

.project-stack {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 0px;
  overflow: hidden;
}

.project-stack-inside {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0px;
  overflow: visible;
}

.inside1 {
  position: relative;
  width: 40px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  align-self: stretch;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 0px;
  overflow: hidden;
}

.inside1-gap1 {
  position: relative;
  width: 1px;
  height: 12px;
  overflow: visible;
}

.circle {
  background-color: #ffb800;
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  overflow: visible;
}

.inside1-gap2 {
  position: relative;
  width: 1px;
  height: 12px;
  overflow: visible;
}

.line {
  position: relative;
  width: 1px;
  flex: 1 1 0;
  background-color: #999;
  opacity: 0.6;
  overflow: visible;
}

.inside2 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 40px;
  padding: 0px 0px 80px 0px;
}

.inside2 a {
  text-decoration: none;
  color: inherit;
}

.overview {
  position: relative;
  width: 100%;
}

.project-card1 {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(27, 27, 27, 0.9)),
    url(res/netflix.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.project-card1 img {
  position: absolute;
  top: 12px;
  right: 12px;
}


.project-card1 h4 {
  position: relative;
  width: 100%;
}

.project-card1 p {
  position: relative;
  width: 100%;

}

.project-card2 {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(27, 27, 27, 0.9)),
    url(res/SaaS.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.project-card2 img {
  position: absolute;
  top: 12px;
  right: 12px;
}


.project-card2 h4 {
  position: relative;
  width: 100%;
}

.project-card2 p {
  position: relative;
  width: 100%;

}

.project-card3 {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(27, 27, 27, 0.9)),
    url(res/to-do.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.project-card3 img {
  position: absolute;
  top: 12px;
  right: 12px;
}


.project-card3 h4 {
  position: relative;
  width: 100%;
}

.project-card3 p {
  position: relative;
  width: 100%;

}

.project-card {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(27, 27, 27) 100%);
}

.project-card img {
  position: absolute;
  top: 12px;
  right: 12px;
}

.text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 0px;
  overflow: visible;
}

.project-card h4 {
  position: relative;
  width: 100%;
}

.project-card p {
  position: relative;
  width: 100%;

}

.desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 20px;
}

.desc h4 {
  color: #FFB800;

}

.desc a {
  color: inherit;
  text-decoration: none;
}

.skills {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 80px 0px 80px 0px;
  overflow: hidden;
}

.skills-ct {
  position: relative;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 32px;
  padding: 0px;
  overflow: hidden;
}

.skills-stack {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 104px;
  padding: 0px;
  overflow: visible;
}

.skills-text {
  position: relative;
  width: 493px;
  height: 124px;
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 100%));
  grid-template-rows: repeat(3, minmax(0, 100%));
  gap: 0px;
  padding: 0px;
  overflow: hidden;
}

.skills-text-div {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0px;
  overflow: hidden;
}

.skills-yello-circle {
  position: relative;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background-color: #FFB800;

}

.skills-logo {
  position: relative;
  width: 650px;
  height: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(50px, 100%));
  grid-template-rows: repeat(3, minmax(0, 100%));
  gap: 0px;
  padding: 0px;
  overflow: visible;
}

.skills-logo-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  padding: 20px 0px;
  overflow: visible;
}

.logo-stack-inside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0px;
  width: auto;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skill-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: flex-start;
}

#html {
  width: 75px;
  height: 75px;
}

#css {
  width: 75px;
  height: 75px;
}

#js {
  width: 75px;
  height: 75px;
}

#mongodb {
  gap: 13px;
}

#mongodb-icon {
  width: 65px;
  height: 65px;
}

.skill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-label {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.language {
  position: relative;
  width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 24px;
  padding: 0px;
  overflow: hidden;
}

.language h3 {
  color: #FFB800;
}

.language-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0px;
  overflow: hidden;
}

.language-stack-inside {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0px;
  overflow: hidden;
}

.language-stack-inside h4 {
  position: relative;
  width: 87px;
}

.education {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 32px;
  padding: 0px;
  overflow: hidden;
}

.education h3 {
  color: #FFB800;
}

.education-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 24px;
  padding: 0px;
  overflow: hidden;
}

.education-stack-solo {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0px;
  overflow: hidden;
}

.education-stack-inside1 {
  position: relative;
  width: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 0px;
  overflow: hidden;
}

.upper-gap {
  position: relative;
  width: 1px;
  height: 10px;
}

.education-stack-inside2 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 0px;
  overflow: hidden;
}

.education-stack-inside2 p {
  color: #FFB800;
}

.certificate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 32px;
  padding: 0px;
  overflow: hidden;
}

.certificate h3 {
  color: #FFB800;
}

.certificate-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 24px;
  padding: 0px;
  overflow: hidden;
}

.certificate-stack-solo {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 0px;
  overflow: hidden;
}

.certificate-stack-inside1 {
  position: relative;
  width: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 0px;
  overflow: hidden;
}

.certificate-stack-inside2 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0px;
  padding: 0px;
  overflow: hidden;
}

.certificate-stack-inside2 p {
  color: #FFB800;
}


.links {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 120px;
  padding: 80px 0px 80px 0px;
  overflow: hidden;
}

.links-ct {
  position: relative;
  width: 52%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 72px;
  padding: 0px;
  overflow: hidden;
}

.links-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 48px;
  padding: 0px;
  overflow: hidden;
}

.links-logo {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 32px;
  padding: 0px;
  overflow: hidden;
}

.links-logo img {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0px;
}

.links-text {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 40px;
  padding: 0px;
  overflow: hidden;
}

.link-mail {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0px;
  overflow: visible;
}

.link-number {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0px;
  overflow: hidden;
}

.links-text img {
  position: relative;
  width: 26px;
  height: 26px;
}