body{
background-color:#296EB4;
 text-align:center
}
h1 {color:white;background-color:#1789FC;padding:.5em;font-size:2.5em;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
h2 {color: #D63230;font-size:2em}
p{font-size:1.5em}
#AboutMe {
  border: solid black 2px;
  padding: 2em;
  margin: 2em;
  background: rgb(126, 187, 237);
  background: -moz-linear-gradient(0deg, rgba(126, 187, 237, 1) 0%, rgba(241, 255, 45, 1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(126, 187, 237, 1) 0%, rgba(241, 255, 45, 1) 100%);
  background: linear-gradient(0deg, rgba(126, 187, 237, 1) 0%, rgba(241, 255, 45, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7ebbed", endColorstr="#f1ff2d", GradientType=1);
  animation: gradientAnimation 5s ease-in-out infinite, scaleImage 1s ease-in-out 1s forwards;
  transition: all 0.3s ease;
}
@keyframes gradientAnimation {
  0% {
    background: linear-gradient(0deg, rgba(126, 187, 237, 1) 0%, rgba(241, 255, 45, 1) 100%);
  }
  50% {
    background: linear-gradient(90deg, rgba(126, 187, 237, 1) 0%, rgba(241, 255, 45, 1) 100%);
  }
  100% {
    background: linear-gradient(180deg, rgba(126, 187, 237, 1) 0%, rgba(241, 255, 45, 1) 100%);
  }
}

#AboutMe img {
  transition: transform 0.3s ease;
}

#AboutMe:hover img {
  transform: scale(1.05);
}

#AboutMe h2, #AboutMe p {
  opacity: 0;
  animation: fadeIn 2s ease-in-out 1s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#Project1{
  background-color:#9BEB94;
  border: solid black 2px;
  padding:2em;
  margin:2em;
  background: rgb(155,235,148);
background: -moz-radial-gradient(circle, rgba(155,235,148,1) 0%, rgba(41,110,180,1) 100%);
background: -webkit-radial-gradient(circle, rgba(155,235,148,1) 0%, rgba(41,110,180,1) 100%);
background: radial-gradient(circle, rgba(155,235,148,1) 0%, rgba(41,110,180,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9beb94",endColorstr="#296eb4",GradientType=1);
  border-radius: 50%; 
}

#Project2{
  border:solid black 2px;
  overflow: hidden;
  background-image:url('https://projects.codecraftworks.com/web/gjrOWlPdIBfGqt4saspe/assets/noFilter (6).webp');
 
}
#Project3{
border:solid black 2px;
  overflow: hidden;
  background-image:url('https://projects.codecraftworks.com/web/gjrOWlPdIBfGqt4saspe/assets/424543.jpg');
 border-radius: 50%; 
}
#Project4{
  border:solid black 2px;
  overflow: hidden;
  background-image:url('https://projects.codecraftworks.com/web/gjrOWlPdIBfGqt4saspe/assets/R.jpg');
}
#Project5{
border:solid black 2px;
  overflow: hidden;
  background-image:url('https://projects.codecraftworks.com/web/gjrOWlPdIBfGqt4saspe/assets/cn312__56483.jpg');
  border-radius: 50%; 
}
#Hobbies{
  background-color:#7EBBED;
  border: solid black 2px;
  padding:2em;
  margin:2em;
}

#project6{
background-color: lightblue;
padding:2em;
  margin:2em;
  border: solid black 2px;
}
#project7{
 background: rgb(81,223,69);
background: -moz-radial-gradient(circle, rgba(81,223,69,0.6727284663865547) 0%, rgba(180,97,41,1) 100%);
background: -webkit-radial-gradient(circle, rgba(81,223,69,0.6727284663865547) 0%, rgba(180,97,41,1) 100%);
background: radial-gradient(circle, rgba(81,223,69,0.6727284663865547) 0%, rgba(180,97,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#51df45",endColorstr="#b46129",GradientType=1);
padding:2em;
  margin:2em;
  border: solid black 2px;
  border-radius: 50%; 
}
#Rocket{
 border:solid black 2px;
  overflow: hidden;
  background-image:url('https://projects.codecraftworks.com/web/gjrOWlPdIBfGqt4saspe/assets/R (1).jpg');
}
#Comic{
 border: solid black 2px;
  overflow: hidden;
  background-image:url('https://projects.codecraftworks.com/web/gjrOWlPdIBfGqt4saspe/assets/noFilter (8).webp');
    border: solid black 2px;
  border-radius: 50%; 
}
#E-You{
 border: solid black 2px;
  overflow: hidden;
  background-image:url('https://projects.codecraftworks.com/web/gjrOWlPdIBfGqt4saspe/assets/noFilter (9).webp');
}
#Flexbox{
 border: solid black 2px;
  overflow: hidden;
  background-image:url('https://projects.codecraftworks.com/web/gjrOWlPdIBfGqt4saspe/assets/noFilter (11).webp');
    border: solid black 2px;
  border-radius: 50%; 
}