*{
    margin: 0;
    padding: 0;
}
.avat{
    background-color: rgb(64, 64, 107);
    border-radius: 50px;
    color: white;
    padding: 10px;
    font-size: 30px;
    height: 35px;
    width: 35px;
    margin: 10px;
}

.fot{
    background-color: rgb(49, 49, 51);
    border-radius: 8px;
    display: flex; 
    justify-content: space-around; 
    padding-right: 180px;

}
body{
    background-color: rgb(71, 68, 71);
}

.bak{
    background-color: rgb(15, 13, 19);
    width: 100%;
    height: 70px;
    border-radius: 8px;
    margin-top: 293px;
    

}



.text{
    display: flex;
    justify-content: space-around;
    padding-top: 15px;
}

.ikons{
    color: white; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-decoration: none;
}

.key{
    width: 358px;
    height: 60px;
    background-color: rgb(61, 59, 61);;
    display: flex; 
    border-radius: 13px;
    margin: 8px;
    justify-content: space-between;
}
.keys{
    padding-left: 14px; 
    color:white;
    font-size: 20px;
    display: flex;
    align-items: center;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.res{
    width: 366px;
    height: 160px;
    background-color: rgb(61, 59, 61);
    display: flex; 
    border-radius: 13px;
    margin: 4px;
    justify-content: space-between; 
}
.ress{
    padding-left: 14px; 
    color:white;
    font-size: 16px;
    margin-top: 6px;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.slide{
    height: 70px;
    width: 366px;
    border-radius: 13px;
    margin: 4px;
    margin-top: 6px;
    display: flex;
    background-color: rgb(61, 59, 61);
    justify-content: space-between; 
}
.name{
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.q{
    width: 50px;
    height: 50px;
    border-radius:
    50px; background-color: rgb(158, 128, 214);
    display: flex;
    justify-content: center;
    align-items: center; 
    margin: 10px;
}
.w{
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 40px; 
    height: 40px; 
    border-radius: 50px; 
    background-color:  rgb(61, 59, 61);
}
.e{
    color: white; 
    font-size: 13px; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.t{
    width: 60px;
    height: 60px;
    border-radius:
    50px; background-color: rgb(158, 128, 214);
    display: flex;
    justify-content: center;
    align-items: center; 
    margin: 10px;
    margin-left: 310px;
    margin-top: 510px;
}