main{
  font-family: 'Poppins', sans-serif;
  background : linear-gradient(to right top, #65dfc9, #6cdbeb);
  width: 100%;
  height: 100%;
  padding-top:10px;
  color: #6CB4EE;
}
@keyframes mymove{
  from{left: 340px;
  }
  to{left:220px;
    background: linear-gradient(to top left, rgb(101, 223, 201,0.5),rgb(255,255,255,0.7));
    backdrop-filter: blur(2rem);
    color: white;}
}
.flexbox{
  display: flex;
  
}

#introduction{
  border: white 10px solid;
  padding: 30px;
  margin: 50px;
  
}
.intro{
  flex:1;
  font-family: 'Nunito', sans-serif;
  color: #6CB4EE;
  font-weight: 500;
  height: 250px;
  width: 390px;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
  backdrop-filter: blur(3rem);
  border-radius: 1rem;
  padding: 1rem;
  animation: mymove 4s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  position: relative;
  
  
}
.intro:hover{
  background: linear-gradient(to top left, rgb(101, 223, 201,0.5),rgb(255,255,255,0.7));
  backdrop-filter: blur(2rem);
  color: white;
}
.image-bg{
  background: linear-gradient(to top left, rgb(101, 223, 201,0.5),rgb(255,255,255,0.7));
  backdrop-filter: blur(2rem);
  height: 250px;
  width: 250px;
  border-radius: 10%;
}
.image-bg img{
  flex:1;
  height: 250px;
  width: 250px;
  border-radius: 10%;
  mix-blend-mode:color-burn ;
  
}

.circle{
background: white;
height: 250px;
width: 250px;
background: linear-gradient(to bottom right, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
backdrop-filter: blur(2rem);
border-radius: 50%;
margin-top: 30%;
position: relative;
animation: bounce 1s linear;
cursor: pointer;

}

.circle-text{
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;
  color: #6CB4EE;
  font-weight: 400;
  cursor: pointer;
}

.circle-text:hover{
  animation: zoom 1s linear;
  animation-fill-mode: forwards;
  color: white;
}
.circle:hover{
  background: linear-gradient(to top left, rgb(101, 223, 201,0.5),rgb(255,255,255,0.7));
  backdrop-filter: blur(2rem);
  color: white;
  animation: zoom 1s linear;
  animation-fill-mode: forwards;
}
@keyframes bounce{
  20%,60%,80%,to{
    transform: translateY(0);

  }
  40%{
    transform: translateY(-30px);
    
  }
  70%{
    transform:translateY(-15px);
    
  }
  90%{
    transform: translateY(-4px);
    
  }
}

@keyframes zoom{
  from {
    transform: scale(1.1);
    
  }
  to{
    transform: scale(1.2);
    
  }
}


/* PROJECTS */
.projects{
  /* height: 120vh; */
  padding-top: 40px;
  background: white;
}
.projects h2{
  margin-bottom: 100px;
}
.card{
  margin-bottom: 20px;
  height: 100%;
  font-family: 'Roboto',sans-serif;
}
.col-md-4 a{
  text-decoration: none;
  color: #6CB4EE;
}

.card{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.card:hover{
  box-shadow: 0 4px 8px 0 rgb(101, 223, 201,0.2), 0 6px 20px 0 rgb(101, 223, 201,0.5);
  transform : translateX(-12px);
  color: #65dfc9;
  
}
.change :hover{
 color: #65dfc9;
}
.card ul a{
  text-decoration: none;
  color:#6CB4EE;
  
}
.card ul a:hover{
  text-decoration: none;
  color: #65dfc9;
}
.card ul li:hover{
  background: linear-gradient(to top left, rgb(101, 223, 201,0.5),rgb(255,255,255,0.7));
  backdrop-filter: blur(2rem);
  text-decoration: none;
  cursor: pointer;
}

footer{
  background: linear-gradient(to bottom right, rgb(101, 223, 201,0.7),rgb(255,255,255,0.3));
  backdrop-filter: blur(2rem);
  color: white;
  text-align: center;
  padding: 2rem ;
}

@media (max-width : 900px){
 #introduction{
   margin : 10px;
   padding: 10px;
   border-left: solid white 10px;
   border-right:solid white 10px;
 } 
 @keyframes mymove{
  from{left: 180px;
  }
  to{left:0px;
    background: linear-gradient(to top left, rgb(101, 223, 201,0.5),rgb(255,255,255,0.7));
    backdrop-filter: blur(2rem);
    color: white;}
}
 
 .intro{
    flex:1;
    font-family: 'Nunito', sans-serif;
    color: #6CB4EE;
    font-weight: 500;
    height: 220px;
    width: 278px;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
    backdrop-filter: blur(3rem);
    border-radius: 1rem;
    margin-bottom: 20px;
    animation: mymove 4s ease forwards;
  }

  .col-md-4{
    padding-bottom: 20px;
  }
  .circle{
    margin:auto;
    margin-top:50px;
  }
  .circle:hover{
    background: linear-gradient(to top left, rgb(101, 223, 201,0.5),rgb(255,255,255,0.7));
    backdrop-filter: blur(2rem);
    color: white;
    animation: zoom 1s linear;
    animation-fill-mode: forwards;
  }

 
}