#knowledge{
    padding: 4em 10% 2em 15%;
    background-color: var(--myblack2);
}

#knowledge .top-side h2{
    font-size: 2.4vw;
    text-align: center;
}

#knowledge .bottom-side{
    display: flex;
    flex-wrap: wrap;
    gap: 2.5vw;
    justify-content: center;
    padding: 4em 0;
}

.knowledgeBox img{
    max-width: 140px;
    max-height: 140px;
    width: 8.5vw;
}

.knowledgeBox{
    width: 14%;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5em;
    margin-bottom: 1em;
    /* cursor: pointer; */
    padding: 2em;
    border-radius: 10px;
    border: 1px solid currentColor;
}

.knowledgeBox h3{
    letter-spacing: 2px;
    color: #000;
}

#html{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #e34c26 70%, #e34c26);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1s;
    background-position: 100% 99%;
}
  
#html:hover {
    background-position: 100% 255%;
}

#css{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #2642e4 70%, #2642e4);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1s;
    background-position: 100% 99%;
}

#css:hover {
    background-position: 100% 255%;
}

#javascript{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #ad9e11 70%, #e3d026);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1s;
    background-position: 100% 99%;
}

#javascript:hover{
    background-position: 100% 255%;
}

#node{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #3C873A 70%, #3C873A);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1s;
    background-position: 100% 99%;
}

#node:hover{
    background-position: 100% 255%;
}

#angular{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #AA24EF 70%, #EF0C45);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1s;
    background-position: 100% 99%;
}

#angular:hover{
    background-position: 100% 255%;
}

#sql{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #3AD37E 70%, #3AD37E);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1s;
    background-position: 100% 99%;
}

#sql:hover{
    background-position: 100% 255%;
}

#mongodb{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #3FA037 70%, #3FA037);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1s;
    background-position: 100% 99%;
}

#mongodb:hover{
    background-position: 100% 255%;
}

#python{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #FFE873 40%, #306998);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1.3s;
    background-position: 100% 99%;
}

#python:hover{
    background-position: 100% 255%;
}

#nestjs{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #ffffff 60%, #a00b0b);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1.3s;
    background-position: 100% 99%;
}

#nestjs:hover{
    background-position: 100% 255%;
}

#git{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #E44C30 70%, #E44C30 70%);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1.3s;
    background-position: 100% 99%;
}

#git:hover{
    background-position: 100% 255%;
}

#github{
    background: linear-gradient(var(--myblack), var(--myblack) 50%, #ffffff 70%, #ffffff 70%);
    background-size: 100% 270%;
    /*trasition effect for background*/
    transition: background 1.3s;
    background-position: 100% 99%;
}

#github:hover{
    background-position: 100% 255%;
}