#top button{
    outline: none;
    border: none;
    background-color: #333333;
    color: white;
    padding: 10px; 
    font-size: 20px;
}
#top{
    display: grid;
    grid-template-columns: 50% 30%;
    width: 90%;
    margin: auto;
}
#icons{
    display: flex;
    justify-content: space-between;
}
#icons i{
    font-size: 40px;
}
#icons i:nth-child(1){
    color: #d93175;
}
#icons i:nth-child(3){
    color:#4565a2;
}
#icons i:nth-child(4){
    color:#3ab1db;
}

#icons i:nth-child(5){
    color:#e60023;
}
#icons i:nth-child(6){
    color:#fffc00 ;
}
#mid{
    display: grid;
    grid-template-columns: 50% 50%;
    width: 90%;
    margin: auto;
}
#sec{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    gap: 20px;
    
}
#bottom{
    display: grid;
    grid-template-columns: 50% 30%;
    width: 90%;
    margin: auto;
}
#pi{
    display: flex;
    justify-content: space-between;
}
#pi i{
    font-size: 40px;
}
#pi i:nth-child(1){
    color: #343981;
}
#pi i:nth-child(2){
    color: #ff5f00;
}
#pi i:nth-child(3){
    color: #006fcf;
}
#pi :nth-child(4){
    color: #0093c7;
}

@media only screen and (max-width: 700px) {
    /* Medium Screen  */
    
    #top{
      grid-template-columns: 70% ;
    }
    #mid{
        grid-template-columns: 70%;
    }
    #bottom{
        grid-template-columns: 70%;
    }
  }