body{
    background: #170731;
    margin: 0;
    font-family: 'Montserrat', sans-serif,'Inter';
}

h1{
    font-family: 'Inter';
    font-size: 40px;
    color: #FFFFFF;
    margin: 40px 0 80px 0;
}

.header{
    height: 80px;
    width: 100%;
    border-bottom: 1px solid #FFFFFF80;
    vertical-align: baseline;
}

.cut-width{
    max-width: 1300px;
    width: 100%;
    margin: auto;
    height: 100%;
}

.header-text{
    color: white;
    font-size: 14px;
    width: fit-content;
    float: left;
    padding-top: 35px;
    padding-left: 45px;
}

.header-text a{
    padding-left: 14px;
    text-decoration: none;
    color: #FFFFFF;
}

.Header-Logo-cont{
    float: left;
    padding-top: 14px;
    text-decoration: none;
    color: #FFFFFF;
}

.header-part-left{
    width: 50%;
    height: 100%;
    float: left;
}

.header-part-right{
    width: 50%;
    height: 100%;
    float: right;
}

.btn-exit-header{
    padding-left: 8px;
    text-decoration: none;
    color: #FFFFFF;
    float: right;
    padding-top: 35px;
}

.user-icon{
    float:right;
}

.btn-exit-a{
    display: block;
    height: fit-content;
    width: fit-content;
    float: right;
    text-decoration: none;
    color: #FFFFFF;
}

/*levels*/

.block-levels{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.level-border-1{
    border: 4px solid #C7A4FF;
}

.level-border-2{
    border: 4px solid #6BFFFF;
}

.level-border-3{
    border: 4px solid #FFB26B;
}

.level-border-4{
    border: 4px solid ;
    border-image-source: linear-gradient(79.19deg, #316AA6 1.88%, #B224B5 93.73%);

}

.level-cont{
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    width: 390px;
    height: 220px;
    margin-left: 45px;
}

.level-cont:first-of-type{
    margin-left: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    width: 390px;
    height: 220px;
}

.level-background-1{
    background-image: url("background_for_table_1.svg") ;
    box-shadow: 12px 12px 20px 0px rgba(159, 47, 135, 0.4);

}

.level-background-2{
    background-image: url("background_for_table_2.svg") ;
    box-shadow: 12px 12px 20px 0px rgba(117, 163, 112, 0.4);

}

.level-background-3{
    background-image: url("background_for_table_3.svg") ;
    box-shadow: 12px 12px 20px 0px rgba(152, 77, 77, 0.4);

}

.level-background-4{
    background-image: url("background_for_workout.svg") ;
    box-shadow: 12px 12px 20px 0px rgba(178, 39, 186, 0.4);

}



.container-background-level{
    border-radius: 20px;
    height: 100%;
    width: 100%;
}

.container-content-level{
    width: calc(100% - 36px);
    height: calc(100% - 43px);
    padding: 33px 18px 10px 18px;
    text-align: start;
    border-radius: 20px;
}

.container-content-level h2{
    color: #FFFFFF;
    margin: 0;
    height: 80%;
}

.bottom-part_w{
    width: 100%;
}

.description-level-card{
    color: rgba(255, 255, 255, 0.68);
    font-family: 'Inter';
    font-size: 16px;
    width: fit-content;
    float: left;
}

.description-level-card span:first-of-type{
    color: rgba(255, 255, 255, 0.68);
    font-family: 'Inter';
    font-size: 18px;
    width: fit-content;
    float: left;
}

.button-level-card{
    width: fit-content;
    float: right;
}

.button-level-card button{
    width: 130px;
    height: 30px;
    border-radius: 20px;
    background: #FFF;
    font-family: 'Montserrat';
    font-size: 18px;
    font-weight: 500;
    border: none;
}

.color-button-level-card-1{
    color: #8D2C78;
}

.color-button-level-card-2{
    color: #7FB47B;
}

.color-button-level-card-3{
    color: #C16374;
}

.color-button-level-card-3{
    color: rgba(171, 43, 186, 1);
}


/*footer*/

.footer{
    width: 100%;
    padding-top: 24px;
    min-height: 150px;
    max-width: 1300px;
    margin: auto;
}