:root {
  --blue: #72a1de;
  --blue-purple: #727fde;
  --speed: 0.2s ease;
}

html {
  scroll-behavior: smooth;
}


/* this is here cuz something is causing default zoom on the website when its opened on mobile so this code prevents it (trust me this issue ruiend my weekend) */
html, body {
  width: 100%;
  overflow-x: hidden;
}


/* this was suppose to make text look like minecraft text but it didnt idk why and i am too tired to care for it soo*/
@font-face {
  font-family: 'Monocraft';
  src: url('Monocraft.woff2') format('woff2'),
      url('Monocraft.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  color: var(--blue);
  /* background-color: #000515; */
}

.card {
  background: rgba(15, 15, 30, 0.6);
  /* border: 2px solid rgba(114, 161, 222, 0.25); */
  border-radius: 40px;
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 40px #00000080;
}

.parent {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  background-color: #00186038;
}


.back-vid {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: -1;
  mix-blend-mode: lighten;
  width: 100%;   
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

header {
  box-sizing: border-box; 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  width: 100%;
  padding: 0 30px;
  display: flex;
  align-items: center;
  background: rgba(20, 20, 30, 0.322);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 20px rgba(114, 161, 222, 0.55);
  z-index: 1000;
}

.nav-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.logo {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  width: 50px;
  height: auto;
}

.logo h1 {
  font-size: 22px;
}

.logo h1 span {
  color: var(--blue);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 50px;
  border: 1px solid #ffffff1a;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 10px rgba(114, 127, 222, 0.4);
  transition: 0.3s;
}

.nav-links:hover {
  padding: 18px 30px;
  transform: translateY(6px);
  box-shadow: 0 12px 35px #00000066;
  border-color: rgba(114, 161, 222, 0.5);
}

.nav-links li a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  padding: 0 10px;
  color: white;
  transition: 0.26s;
}

.nav-links li a:hover {
  color: var(--blue);
  font-size: 17px;
  font-weight: 700;
  transform: translateY(5px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  border-color: rgba(114, 161, 222, 0.5);
}

.socials {
  position: absolute;
  right: 0;
  display: flex;
  gap: 10px;
}

.socials a {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: lightgray;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: #ffffff0d;
  transition: 0.32s ease-out;
}

.socials a:hover {
  background: var(--blue-purple);
  color: black;
  box-shadow: 0 0 15px rgba(114, 127, 222, 0.4);
  transform: translateY(-2.5px);
}

.blackhole-box {
  overflow: hidden;
  position: absolute;
  top: 0;
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  mix-blend-mode: lighten;
}

.blackhole-box video {
  z-index: -1;
  width: 100%;
  max-width: 100%;
  /* pulling video up so it shows below navbar */
  margin-top: -23.5%;
}

.hero {
  position: relative;
  display: flex;
  width: 100%;
  height: 80vh;
  align-items: center;
  justify-content: space-between;

}

.hero-info {
  position: absolute;
  left: 5%;
}

.hero-info-title {
  color: var(--blue-purple);
  padding: 8px 5px;
  border: 1px solid rgba(114, 127, 222, 0.47);
  width: 240px;
  background-color: #2200493d;
  box-shadow: 0 0 5px rgba(114, 127, 222, 0.62);
  border-radius: 50px;
}

.hero-info h1 {
  font-size: 60px;
  max-width: 600px;
  font-weight: 700;
  line-height: 70px;
  margin-top: 40px;
  margin-bottom: 15px;
}

.hero-info h2 {
  font-size: 35px;
  margin-top: 0;
  margin-bottom: 40px;
  max-width: 635px;
  line-height: 40px;
}

.hero-info button {
  font-size: 14px;
  font-weight: 700;
  color: white;
  padding: 15px 35px;
  border-radius: 25px;
  border: 1px solid rgba(114, 127, 222, 0.7);
  background-color: #2200493d;
  box-shadow: 0 0 5px rgba(114, 161, 222, 0.53);
  cursor: pointer;
  transition: 0.4s;
}

.hero-info button:hover {
  transform: translateX(15px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  border-color: rgba(114, 161, 222, 0.5);
}






/* the cooolll terminal animation u saw oon the home page, yeah its styling is done by none other than the code below (its inspired, like i saw it on one of my friends portfolio and it was sooo cooolll and i was like i need to do this so yeah the idea is from there but the code is mine)*/

.hero-vid-box {
  position: absolute;
  right: 3%;
}

.code-block {
  width: 340px;
  background: rgba(8, 8, 30, 0.85);
  border: 1px solid rgba(114, 161, 222, 0.35);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 30px rgba(114, 161, 222, 0.15);
  overflow: hidden;
}

.code-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: rgba(114, 161, 222, 0.07);
  border-bottom: 1px solid rgba(114, 161, 222, 0.15);
}

.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red    { background: #ff0d00; }
.dot.yellow { background: #ffae00; }
.dot.green  { background: #00ff26; }

.code-filename {
  margin-left: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-family: monospace;
}

.code-body {
  padding: 14px 16px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 22px;
  min-height: 160px;
}

.code-line { display: flex; gap: 10px; }
.ln  { color: rgba(255,255,255,0.2); user-select: none; min-width: 16px; text-align: right; }
.kw  { color: #c792ea; }
.fn  { color: #82aaff; }
.str { color: #c3e88d; }
.op  { color: #89ddff; }
.cm  { color: rgba(255,255,255,0.3); }

.cursor {
  display: inline-block;
  width: 2px; height: 14px;
  background: #72a1de;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }




/* the purple line u see aftr every section is cuz of this(i pasted it from my other project🤪) */
.line{
  width: 92%;
  height: 3.5px;
  background-color: rgb(169, 122, 255);
  border: 0.1px solid rgb(169, 122, 255);
  border-radius: 30px;
}


.abtme {
  position: relative;
  width: 100%;
  min-height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background: transparent;
  z-index: 10;
  background-color: #0c0c44;
}

.abtme-container {
  max-width: fit-content;
  width: 100%;
}

.profile {
  padding: 20px 70px;
  text-align: center;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.profile-name-wrapper {
  position: relative;
  width: 180px;
  margin: -52px auto 25px;
}

.pfp {
  width: 180px;
  height: 195px;
  /* margin: -52px auto 30px; */
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: #00186064;
  border: 3px solid rgba(114, 161, 222, 0.35);
  box-shadow: 0 0 30px rgba(114, 161, 222, 0.25);
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.pfp-back-vid{
  position: absolute;
  z-index: -1;
  /* mix-blend-mode: lighten; */
  width: 180px;
  height: 195px;
  border-radius: 28px;
  object-fit: cover;
}

.pfp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abtme-title {
  font-family: 'Monocraft', monospace;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 0 5px 18px #00d4ff99;
  margin-top: 10px;
  margin-bottom: 60px;
  color: white;

}


.press-start-2p-regular {
  font-family: "Press Start 2P";
  font-weight: 400;
  font-style: normal;
}

.abtme-title-name{
  left: -70px;
  font-family: "Press Start 2P";
  font-size: 54px;
  font-weight: 400;
  text-shadow: 0 8px 25px #00d4ff99;
  margin-top: -32px;
  color: #ffffff;
  text-align: center;
  position: relative;
  z-index: 0;
}

/* it adds a outline on my name so it looks like the text is behind my image and its outline is visible(trust me it was so frustrating to code this like ahhhh!!! ohh myy gooodddd) */
.abtme-title-name-outline {
  font-family: "Press Start 2P";
  font-size: 54px;
  font-weight: 400;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: -70px;
  right: 0;
  z-index: 2; /* in front of photo */
  -webkit-text-stroke-width: 2.5px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #ffffff;
}

/* the comment u r seeing below was a failed attempt but i have attacement issues😭 sooo idc if u dont like a big chunk of commented out useless peice of code, i am going to keep it anyways*/

/* .intro-title-name::after{
  content: "Tanish";
  position: absolute;
  inset: 0 0 0 0;
  z-index: 3;
  -webkit-text-stroke-width: 2px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #ff01018a;
} */


.abtme-text {
  font-family: 'Monocraft', monospace;
  font-size: 17px;
  line-height: 32px;
  color: #ffffffb3;
  margin-bottom: 20px;
  text-align: center;
  max-width: 1095px;
}

.abtme-text:last-of-type {
  margin-bottom: 0;
}







.my-tech-knowledge {
  padding: 10px 70px;
  margin: 40px auto;
  width: 87%;
  text-align: center;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tech-title {
  font-size: 42px;
  font-weight: 700;
  margin-top: 100px;
  margin-bottom: 25px;
  color: white;
}

.tech-intro {
  font-size: 17px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.tech-grid {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px 0 70px 0;
}

.tech-category {
  min-width: 150px;
  flex: 0 1 auto;
}

.tech-category h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--blue);
  text-align: center;
}

.tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tag {
  display: block;
  padding: 12px 24px;
  background: rgba(20, 25, 45, 0.9);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(114, 161, 222, 0.4);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  text-align: center;
  transition: 0.25s ease-out;
  white-space: nowrap;
}

.tag:hover {
  font-size: 15px;
  font-weight: 500;
  background: rgba(114, 161, 222, 0.3);
  border-color: var(--blue);
  box-shadow: 0 0 15px rgba(114, 161, 222, 0.4);
}








.flexibility {
  padding: 0 0 50px;
  margin-top: 40px;
  /*the margin given below is given so that the user can scroll a lil more to read the section properly*/
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #0c0c44;
}

.flex-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 50px;
  color: white;
  text-align: center;
}

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

.flex-text {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  align-items: center;
}

.flex-paragraph {
  font-size: 17px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  max-width: 870px;
}

.flex-video {
  width: 100%;
  max-width: 600px;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(114, 161, 222, 0.3);
  box-shadow: 0 0 30px rgba(114, 161, 222, 0.2);
}

.flex-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}









.passion {
  padding: 80px 60px;
  margin: 40px auto;
  width: 88%;
  text-align: center;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.passion-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 40px;
  color: white;
}

.passion-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.passion-text {
  font-size: 17px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}







.experience {
  display: flex;
  align-items: center;
  padding: 30px 0 0;
  width: 100%;
  text-align: center;
  height: fit-content;
  flex-direction: column;
  justify-content: center;
  background-color: #0c0c44;
}

.experience-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 20px;
  color: white;
}


/* u might have got bored seeing my code so heres a lame joke for u


why did the css developer break up with the html developer?

because they had no class 😭
*/
.experience-intro {
  font-size: 17px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-top: 5px;
  margin-bottom: 25px;
}

.experience-desc {
  font-family: 'Monocraft', monospace;
  font-size: 17px;
  line-height: 20px;
  color: #ffffffb3;
  text-align: left;
  padding: 0 150px;
  margin-top: 35px;
  margin-bottom: 5px;
}

.experience-link {
  width: fit-content;
  margin-top: 30px;
  margin-bottom: 50px;
}

.experience-btn {
  font-size: 17px;
  font-weight: 600;
  color: white;
  padding: 15px 35px 15px 41px;
  border-radius: 50px;
  border: 1px solid rgba(114, 127, 222, 0.7);
  background-color: #2200493d;
  box-shadow: 0 0 5px rgba(114, 161, 222, 0.53);
  cursor: pointer;
  transition: 0.2s ease-out;
}

.experience-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  border-color: rgba(114, 161, 222, 0.5);
}


/* this is the for the icon which will be used on mobiles for navigations cuz my navbar is too bigfor it 😼*/
.menu-icon {
    display: none;
    font-size: 26px;
    cursor: pointer;
    color: white;
    position: absolute;
    right: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 260px;
    height: 100vh;
    background: rgba(10, 10, 26, 0.97);
    backdrop-filter: blur(10px);
    border-left: 1px solid rgba(114, 161, 222, 0.2);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 30px 25px;
    transition: right 0.3s ease;
}

.sidebar.open {
  right: 0;
}

.close-icon {
  font-size: 28px;
  cursor: pointer;
  color: white;
  align-self: flex-end;
}

.sidebar .nav-links {
  flex-direction: column;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 5px;
}

.sidebar .nav-links:hover {
  transform: none;
  padding: 0;
  box-shadow: none;
  border-color: transparent;
}

.sidebar .nav-links li a {
  font-size: 17px;
  padding: 10px 0;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar .socials {
  position: static;
  justify-content: flex-start;
}



/* the gradient u saw on my name in the first section was cuz of this */
.gradiant {
  background: linear-gradient(
    to left,
    #afb3ff,
    #868cff,
    #6e75ff,
    #444dff,
    #434cff,
    #444dff,
    #6e75ff,
    #868cff,
    #afb3ff
  );
  background-size: 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-gradiant 2.5s linear infinite;
}

@keyframes animate-gradiant {
  to {
    background-position: 200%;
  }
}

/* andd now starts the most frustrating part , making the code responsivee, fixing the error which added zoom whas easier then doing this like whyyy the heckk is it so frustratingg*/
@media (max-width: 768px) {
  .flex-video {
    height: 300px;
  }
}


@media (max-aspect-ratio: 16/9) {
  .back-vid {
    width: 100%;
    height: 100%;
  }
}

@media (min-aspect-ratio: 16/9) {
  .back-vid {
    width: 100%;
    height: auto;
  }
}



@media screen and (max-width: 1200px) {
  .blackhole-box video {
    margin-top: -20%;
  }

  .hero-info h1 {
    font-size: 40px;
    max-width: 400px;
    line-height: 40px;
  }

  .hero-info p {
    max-width: 300px;
  }
}


@media screen and (max-width: 1024px) {

  .blackhole-box video {
  margin-top: -20%;
  }

  .hero-vid-box video {
    height: 550px;
    mix-blend-mode: lighten;
    margin-bottom: 650px;
    width: 250px;
  }

  .code-block{
    margin: 350px 40px 0 0;
    width: 390px;
  }

  .hero-info {
    position: absolute;
    left: 5%;
    margin-bottom: 140px;
  }

  .hero-info-title {
    width: 315px;
    font-size: 22px;
    padding-left: 10px;

  }

  .hero-info h1 {
    font-size: 55px;
    max-width: 400px;
    line-height: 55px;
  }

  .hero-info h2 {
    font-size: 45px;
    line-height: 45px;
    margin-top: 25px;
  }
  
  .profile {
    padding: 20px 20px;
    min-height: unset;
  }

  .my-tech-knowledge {
    padding: 10px 20px;
    margin: 20px;
  }

  .tech-grid {
    gap: 20px;
  }

  .experience {
    width: calc(100% - 40px);
    padding: 25px 20px 0;
    margin: 20px;
  }

  .passion {
    padding: 40px 20px;
    margin: 20px;
  }

  .flexibility {
    padding: 25px 20px;
    width: calc(100% - 40px);
    margin: 20px auto 13vw;
  }

  .intro-title {
    font-size: 32px;
  }

  .tech-title,
  .passion-title,
  .flex-title,
  .experience-title {
    font-size: 30px;
  }


  .menu-icon {
    display: block;
    font-size: 35px;
  }

  header .nav-links,
  header .socials {
    display: none;
  }

  header {
    height: 75px;
  }

  .logo h1 {
    font-size: 35px;
  }
}

@media screen and (max-width: 820px) {

  .blackhole-box video {
  margin-top: -21.5%;
  }

  .hero-vid-box video {
    height: 550px;
    mix-blend-mode: lighten;
    margin-bottom: 650px;
    width: 250px;
  }

  .code-block{
    margin-top: 550px;
    width: 370px;
  }

  .hero-info {
    position: absolute;
    left: 5%;
    margin-bottom: 150px;
  }
  
  .profile {
    padding: 20px 20px;
    min-height: unset;
  }

  .my-tech-knowledge {
    padding: 10px 20px;
    margin: 20px;
  }

  .tech-grid {
    gap: 20px;
  }

  .experience {
    width: calc(100% - 40px);
    padding: 25px 20px 0;
    margin: 20px;
  }

  .passion {
    padding: 40px 20px;
    margin: 20px;
  }

  .flexibility {
    padding: 25px 20px;
    width: calc(100% - 40px);
    margin: 20px auto 13vw;
  }

  .intro-title {
    font-size: 32px;
  }

  .tech-title,
  .passion-title,
  .flex-title,
  .experience-title {
    font-size: 30px;
  }


  .menu-icon {
    display: block;
  }

  header .nav-links,
  header .socials {
    display: none;
  }

  header {
    height: 50px;
  }

  .logo h1 {
    font-size: 25px;
  }
}

@media screen and (max-width: 768px) {

  .hero-vid-box video {
    height: 550px;
    mix-blend-mode: lighten;
    margin-bottom: 500px;
    width: 250px;
  }

  .code-block {
    margin-top: 400px;
    width: 370px;
  }

  .profile {
    padding: 20px 20px;
    min-height: unset;
  }

  .my-tech-knowledge {
    padding: 10px 20px;
    margin: 20px;
    width: auto; 
  }

  .tech-grid {
    gap: 20px;
  }

  .experience {
    width: calc(100% - 40px);
    padding: 25px 20px 0;
    margin: 20px;
  }

  .passion {
    padding: 40px 20px;
    margin: 20px;
    width: auto;
  }

  .flexibility {
    padding: 25px 20px;
    width: calc(100% - 40px);
    margin: 20px auto 13vw;
  }

  .hero-info-title {
    font-size: 20px;
  }

  .tech-title,
  .passion-title,
  .flex-title,
  .experience-title {
    font-size: 30px;
  }


  .menu-icon {
    display: block;
  }

  header .nav-links,
  header .socials {
    display: none;
  }

  header {
    height: 50px;
  }

  .logo h1 {
    font-size: 25px;
  }
}

@media screen and (max-width: 700px) {
  header {
    height: 50px;
  }

  header .nav-links {
    display: none;
  }

  header .socials {
    display: none;
  }

  .logo h1 {
    font-size: 25px;
  }

  .blackhole-box video {
    margin-top: -16%;
  }

  .hero {
    flex-direction: column;
  }

  .hero-info {
    bottom: 40%;
    left: 5%;
    right: 5%;
  }

  .hero-info h1 {
    font-size: 36px;
    line-height: 44px;
    margin-top: 20px;
    margin-bottom: 15px;
    max-width: 100%;
  }

  .hero-info h2 {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 25px;
    max-width: 100%;
  }

  .hero-vid-box video {
    display: none;
  }

  .flex-video {
    height: 250px;
  }

  .flex-video video {
    width: 100%;
  }

  .experience {
    width: calc(100% - 40px);
    padding: 25px 20px 0;
    margin: 20px;
  }

  .menu-icon {
    display: block;
  }

  header .nav-links,
  header .socials {
    display: none;
  }

  header {
    height: 50px;
  }

  .logo h1 {
    font-size: 25px;
  }
}

@media screen and (max-width: 540px) {

  .blackhole-box video {
  margin-top: -15.6%;
  }

  .hero-vid-box video {
    height: 550px;
    mix-blend-mode: lighten;
    margin-bottom: 650px;
    width: 250px;
  }

  .code-block {
    margin: 485px 0 0 0;
  }

  .hero-info {
    position: absolute;
    left: 5%;
    margin-bottom: 55px;
  }

  .hero-info-title {
    width: 185px;
    font-size: 13px;
    padding-left: 8px;
  }

  .hero-info h1 {
    font-size: 30px;
    max-width: 400px;
    line-height: 32px;
  }

  .hero-info h2 {
    font-size: 25px;
    line-height: 27px;
    margin-top: 15px;
  }
  
  .profile {
    padding: 20px 20px;
    min-height: unset;
  }

  .my-tech-knowledge {
    padding: 10px 20px;
    margin: 20px;
    width: auto;
  }

  .tech-grid {
    gap: 20px;
  }

  .experience {
    width: calc(100% - 40px);
    padding: 25px 20px 0;
    margin: 20px;
  }

  .passion {
    padding: 40px 20px;
    margin: 20px;
    width: auto;
  }

  .flexibility {
    padding: 25px 0;
    width: calc(100% - 40px);
    margin: 20px auto 13vw;
  }

  .intro-title {
    font-size: 32px;
  }

  .tech-title,
  .passion-title,
  .flex-title,
  .experience-title {
    font-size: 30px;
  }


  .experience-desc,
  .flex-paragraph {
    padding: 0 15px
  }

  .menu-icon {
    display: block;
    font-size: 25px;
  }

  header .nav-links,
  header .socials {
    display: none;
  }

  header {
    height: 50px;
  }

  .logo h1 {
    font-size: 27px;
  }

  .logo img {
    width: 40px;
    height: auto;
  }
}

@media screen and (max-width: 400px) {

    .code-block {
      display: none;
  }
  .hero-info {
    position: absolute;
    left: 5%;
    margin-bottom: -55px;
  }
}