*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{
   margin: 0;
  height: 100vh;

  background: linear-gradient(45deg, rgb(4, 163, 39), rgb(105, 150, 2), rgb(67, 23, 187));
  background-size: 300% 300%;

  animation: moveBG 3s ease infinite;
}

/* animation steps */
@keyframes moveBG {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}
.container{
    margin: 0px;
        padding: 0;
}
/* HEADER */

.head{

    width:100%;
    height:80px;

    background:#e7e8eb;

    display:flex;
    justify-content:center;
    align-items:center;

    position:sticky;
    top:0;

}

.logo-img{

    width:60px;
    height:60px;
    border-radius:50%;
    margin: 20px;
}

/* MAIN */

main{

    width:90%;
    margin:auto;

}

/* TITLES */

h2{

    color:cyan;
    text-align:center;
    margin:70px 0 15px;

    font-size:40px;

}

.learning{

    margin-bottom:25px;
    font-size:20px;

}

/* SKILLS */

.skills-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.card{

    background:#ffffff;

    padding:25px;

    border-radius:15px;

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

}

.card h3{

    margin-bottom:15px;

}

.progress{

    width:100%;
    height:12px;

    background:#444;

    border-radius:20px;

    overflow:hidden;

}

.progress span{

    display:block;

    height:100%;

    background:rgb(75, 234, 255);

}

/* HOBBIES */

.project-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

    margin-top:25px;

}

.hobby-card{

    background:#fcfcfd;

    padding:25px;

    border-radius:15px;

    transition:.3s;

}

.hobby-card:hover{

    transform:translateY(-8px);

}

.hobby-card h3{

    color:rgb(0, 0, 0);

    margin-bottom:10px;

}

.hobby-card p{

    line-height:1.7;

}

/* FOOTER */

footer{

    background:#ce9314;

    margin-top:60px;

    padding:20px;

    text-align:center;

    color:#111;

    font-weight:bold;

}

/* RESPONSIVE */

@media(max-width:768px){

    h2{

        font-size:30px;

    }

    .learning{

        text-align:center;

    }

}

.About{
        padding-top: 100px;
        text-align: center;
        color: white;
        font-family: auto;
        font-size: 40px;
}

.h3-pic{width: 241px;
    margin-left: 43.5%;
    height: 330px;}

.info{
    margin-left: 43.5%;
}

.ako{
    width: 246px;
    margin-left: 43.5%;
    border-radius: 46px;
}
.h2-skill{
    margin-top: 320px;
}
.span-skill{
    width:40%
}
.span-css{
    width:30%
}
.span-java{
    width:20%
}
.span-python{
    width:50%
}
.h2-hobbies{
    margin-top: 320px;
}
.h2-contact{
    margin-top: 320px;
}
.div-contact{
    margin-left: 45%;
}