html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1e1e1e;
}

.main {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100vh;
  position: relative;
}

.text-behind {
  font-size: 7vw;
  color: white;
  font-family: Georgia, "Times New Roman", Times, serif;
  position: absolute;
  left: 19%;
  bottom: 40%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  -webkit-text-stroke: 0.3vh black;
}

.main img {
  z-index: 2;
  opacity: 0;
  transform: scale(0.8);
  animation: pop-in 0.5s forwards;
  animation-delay: 0.3s;
  
}

.skill img  {
  filter: drop-shadow(0 0 0.55rem rgb(20, 170, 220));
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.text-behind p {
  margin: 0;
  padding: 0;
  line-height: 1;
  margin-bottom: -5px;
}

.social-icons {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 15px;
}

.social-icons a {
  color: white;
  font-size: 2em;
  text-decoration: none;
  filter: drop-shadow(0 0 0.55rem rgb(220, 137, 20));
}

.social-icons a:hover {
  color: orangered;
}

.desc {
  position: absolute;
  bottom: 30px;
  right: 25px;
  display: flex;
  gap: -9px;
  flex-direction: column;
  color: white;
  z-index: 3;
  -webkit-text-stroke: 0.06vh black;
}

.desc h3 {
  font-family: monospace;
  font-size: 3vh;
  color: orangered;
}

.desc h1 {
  font-size: 5vh;
}

.desc h2 {
  text-transform: capitalize;
  font-size: 3.5vh;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.responsive-img {
  max-width: 40vw;
  height: auto; 
  filter: drop-shadow(0 0 0.65rem rgb(50, 20, 220));
}

.skill {
  background-color: transparent;
  border: 2px rgba(0, 0, 0, 0.313) solid;
  position: absolute;
  top: 8vh;
  right: 6vw;
  height: 200px; 
  width: 150px;
  padding: 10px; 
  border-radius: 10px; 
  opacity: 0; 
  animation: fade-in 0.5s forwards; 
  box-shadow: 0 0 0.45rem rgb(255, 115, 0);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.skill h3 {
  color: orangered; 
  text-align: center; 
  margin-bottom: 10px;
} 

.skill ul {
  list-style-type: none; 
  padding: 0; 
}

.skill li {
  display: flex; 
  align-items: center; 
  margin: 5px 0; 
  color: white; 
}

.skill-logo {
  width: 20px; 
  height: 20px; 
  margin-right: 8px; 
}

@media (max-width: 768px) {
    .main {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      max-height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
  
    .text-behind {
      font-size: 18vw;
      position: absolute;
      text-align: center;
    }
  
    .main img {
      max-width: 65%;
      height: auto; 
      margin-bottom: 40px; 
    }

    .responsive-img {
        margin-top: 295px;
    }
  
    .social-icons {
      display: flex;
      justify-content: center; 
      margin: 10px 0; 
      margin-bottom: -220px;
    }
  
    .social-icons a {
      font-size: 1.5em; 
    }
  
    .desc {
      display: flex;
      flex-direction: column;
      align-items: center; 
      margin-bottom: -220px;
      margin-right: 4vw; 
    }
  
    .desc h1 {
      font-size: 2.5vh; 
      text-align: center; 
    }
  
    .desc h2 {
      font-size: 2vh; 
      text-align: center; 
      margin: 0 10px; 
    }
  
    .skill {
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      width: 80%; 
      max-width: 300px; 
      margin: 20px auto; 
      padding: 10px; 
      border: 2px orangered solid; 
      border-radius: 10px; 
      background-color: transparent; 
      opacity: 1; 
      animation: fade-in 0.5s forwards; 
      
}
      
    .skill h3 {
      color: orangered; 
      text-align: center; 
      margin-bottom: 5px; 
      font-size: 2vh; 
    } 
      
    .skill ul {
      list-style-type: none; 
      padding: 0; 
      text-align: center; 
      display: flex; 
      flex-wrap: wrap; 
      justify-content: center; 
    }
      
    .skill li {
      display: flex; 
      justify-content: center; 
      align-items: center; 
      margin: 5px; 
      color: white; 
      font-size: 2.5vh; 
    }
      
    .skill-logo {
      width: 10px; 
      height: 10px; 
      margin-right: 5px; 
    }
}