main{
  background: linear-gradient(45deg,#0d905c,#001572,#1e3c72,#020617 );
  color:white;
  display:flex;
  justify-content: center;
  align-items: center;
}

.content1 {
  text-align: center;
  padding: 40px 20px;
}
.intro-main{
  animation:fadeUp 1s ease;
  display:flex;
  flex-direction: column;
  align-items: center;
}
@keyframes fadeUp {
  from{
    opacity: 0;
    transform: translateY(40px);
  }to{
    opacity:1;
    transform: translateY(0);
  }
}
#intro-text{
  color:white;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter:blur(15px);
  border-radius:15px;
  padding:25px; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  border:1px solid rgba(225,225,225,0.2);
  display:flex;
  flex-direction:column;}
.intro-main h1 {
  font-size: 36px;
  color: white;
  margin-bottom: 16px;
  text-align:center;
  text-shadow: 2px 2px 4px rgba(0, 188, 212, 0.5);
}

.intro-main p {
  font-size: 18px;
  margin: 8px 0;
}
#sp-name{
  font-weight:bold;
  font-style:normal;
  font-family: 'Times New Roman', Times, serif;
  color:cyan;
  text-shadow:0 0 10px cyan;
}
button{
  display:inline-block;
  text-align:center;
  border-radius: 10px;
  box-sizing:border-box;
  padding:10px;
  font-family: cursive;
  font-size:larger;
  margin:10px;}
.intro-main span {
  color: cyan; 
  font-style: italic;
}

.pic{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.pic img {
  width: 280px;
  height: auto;
  border-radius: 50%; 
  box-shadow: 0 0 10px pink; 
  transition: transform 0.3s ease;
}

.pic img:hover, #intro-text:hover{
  transform: scale(1.05); 
  box-shadow: 0 0 25px cyan;
  transition: all 0.4s ease;
}

.portfoliotext{
  margin-top:10px;
  color:white;
  text-align:center;
  font-size:18px;
}
.pic figure{
  display:flex;
  flex-direction: column;
  align-items:center;

}
@media only screen and (min-width:768px){
  .intro-main{
    display:grid;
    grid-template-areas:"picture text1";
    grid-template-columns: 1fr 1fr;
    grid-gap:20px;
    align-items:center;
    padding:40px 20px;

  }
  .pic{
    grid-area:picture;
    align-items:center;
  }
  #intro-text{
    grid-area:text1;
    align-items:flex-start;
    padding:10px;
  }
}