:root{
    --colors-height: 48px;
    --colors-width: 9px;
    --colors-radius: 20px;
    --color-bar-height: 30px;
    --color-bar-radius: 10px;
}

body{
    background-color: rgb(239, 238, 238);
    display: flex;
    justify-content: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.boxes-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.box{
    margin-top: 5%;
}

.ui-box-1{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: relative;
    width: 380px;
    height: 420px;
    border-radius: 30px;
    border: 1px solid transparent;
    background: linear-gradient(#fefefe, #fefefe) padding-box, linear-gradient(to top, #9C9C9C, #E2E2E2) border-box;
}



.ui-box-1 header{
    position: relative;
    display: flex;
    margin: 6% 6% 3% 6%;
}

.first-ui-face-image{
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin-right: 4%;
}

.name-post-time-container{
    overflow: hidden;
}

.name-person{
    margin-bottom: 0;
    margin-top: 6%;
    color: black;
    font-weight: 600;
    
}

.time-posted{
    margin-top: 0;
    color: gray;
    font-size: 70%;
}

.like-button{
    height: 50px;
    width: 50px;
    border-radius: 15px;
    border: 1.9px solid transparent;
    background: linear-gradient(#F6F7F8, #F6F7F8) padding-box, linear-gradient(to top, #9C9C9C, #E2E2E2) border-box;
    margin-left: 30%;
}

.like-button:hover{
    background: linear-gradient(#f0f0f0, #f0f0f0) padding-box, linear-gradient(to top, #9C9C9C, #E2E2E2) border-box;

}

.like-button img{
    position: relative;
    transform: translate(-12%, -4%);
    text-align: center;
    align-items: center;
    padding: 45% 45% 45% 45%;   
}

.like-button img:hover{
    filter: invert(46%) sepia(67%) saturate(2789%) hue-rotate(330deg) brightness(98%) contrast(101%);
}

.first-ui-top h2{
    font-size: 110%;
    margin: 0 10% 0 6%;
    font-weight: 600;
    color: #0a0a0a;
}

.text-below-h2{
    color: gray;
    font-size: 80%;
    margin-left: 6%;
    margin-right: 0;
    margin-bottom: 0;
}

.tags-footer-first-ui{
    display: flex;
    margin-left: 6%;
    margin-right: 6%;
}

.tags-text{
    background-color: #DCE5FC;
    color: #000;
    padding: 2px;
    border-radius: 6px;
    margin-right: 2%;
    margin-bottom: 0;
}

.first-ui-separator{
    border-top: 1px dashed rgb(212, 212, 212);
    margin: 6% 6%;
}

.first-ui-bottom{
    margin: 6%;
    display: flex;
    flex-wrap: wrap;
}

.price-hour{
    margin-top:0;
    margin-bottom: 0;
    margin-right: 100%;
    font-weight: 500;
    font-size: 200%;
}

.work-method{
    color: gray;
    margin-top: 1%;
    margin-right: 1%;
}

.apply-button{
    flex-basis: 100%;
    background-color: #3A80F7;
    border: none;
    border-radius: 20px;
    height: 70px;
    color: white;
    font-weight: 600;
}

.apply-button img{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(211deg) brightness(114%) contrast(101%);
    margin-right: 2%;
    transform: translate(-10%, 10%);
}

.apply-button:hover{
    color: #fff900;
    background-color: #295bb3;
}

.apply-button:hover img{
    filter: invert(89%) sepia(20%) saturate(3993%) hue-rotate(8deg) brightness(101%) contrast(109%);
    /*transition: filter 0.8s ease;*/
    animation: colorChange 1.5s linear infinite;
}

@keyframes colorChange{
    0%, 50%{
        filter: invert(89%) sepia(20%) saturate(3993%) hue-rotate(8deg) brightness(101%) contrast(109%)
    }
    51%, 100%{
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(211deg) brightness(114%) contrast(101%);
    }
}

.ui-box-2{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: relative;
    background-color: rgb(30, 30, 30);
    width: 380px;
    margin-left: 4%;
    border-radius: 30px;
    background-image: linear-gradient(to top, #171616, #3A3A3A);
}

.ui-box-2 header{
    display: flex;
}

.second-ui-title{
    color: white;
    font-weight: 400;
    margin-left: 5%;
}

.stats-button{
    justify-content: center;
    color: white;
    display: flex;
    border: 1px solid gray;
    background-color: #454546;
    border-radius: 10px;
    height: 40px;
    width: 100px;
    align-items: center;
    margin-top: 4%;
    margin-right: 5%;
    margin-left: 50%;
}

.stats-button:hover{
    background-color: #131212;
}

    
.stats-button p{
    margin: 0;
    font-size: 80%;
    font-weight: 600;
    font-size: 90%;
}

.arrow-down{
    width: 15%;
    margin-left: 10%;
}

.earnings-section{
    margin: 0 5%;
}

.earnings-title{
    color: white;
    font-weight: 300;
    margin: 1%;
}

.amount-earn{
    color: white;
    font-size: 350%;
    font-weight: 500;
    margin: 0;
}

.amount-earn span{
    color: #707070;
}

.month-earned{
    color: white;
    margin-top: 2%;
    font-size: 100%;
}

.month-earned span{
    color: #1EEB3E;
}

.data-section{
    display: flex;
    margin: 0 5%;
    flex-wrap: wrap;
}

.projects-clients{
    background-color: #3E3E3E;
    margin-right: 5%;
    width: 45%;
    border-radius: 10px;
}

.fisrt-text{
    color: grey;
    text-align: left;
    margin: 3% 0 3% 9%;
    
}

.second-text{
    color: grey;
    text-align: left;
    margin: 0 0 3% 9%;
    font-size: 70%;
}

.first-number{
    color: white;
    font-size: 200%;
}

.second-number{
    color: white;
}

.freelance-place{
    margin: 5% 0;
    background-color: #F0F0F0;
    border-radius: 10px;
    width: 100%;
}

.freelance-place p:first-child{
    font-size: 300%;
    color: black;
    font-weight: 500;
    margin: 3% 0 0 3%; 
}

.freelance-place p{
    color: grey;
    margin: 2% 0 5% 3%;
}

.freelance-place img{
    width: 20%;
    position: absolute;
    top: 55%;
    left: 70%;
}

.colors-section{
    margin: 0 5%;
}

.colors-section p:first-child{
    color: white;
}

.colors-container{
    display: flex;
}

.color-gradient-container:hover{
    transform:scale(1.5)
}

.color-gradient-1{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #0d7fff;
}

.color-gradient-2{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #0c7ffe;
}

.color-gradient-3{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #0c7efe;
}

.color-gradient-4{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #1c80fd;
}

.color-gradient-5{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #2b80fb;
}

.color-gradient-6{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #3a82f9;
}

.color-gradient-7{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #4a83f7;
}

.color-gradient-8{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #5a84f5;
}

.color-gradient-9{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #6d86f2;
}

.color-gradient-10{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #7b87f1;
}

.color-gradient-11{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #8988ef;
}

.color-gradient-12{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #9a89ec;
}

.color-gradient-13{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #a98aeb;
}

.color-gradient-14{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #bb8ce8;
}

.color-gradient-15{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #cd8de6;
}

.color-gradient-16{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #d98ee4;
}

.color-gradient-17{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #ea8fe2;
}

.color-gradient-18{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #ea8fe2;
}

.color-gradient-19{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #fc90e0;
}

.color-gradient-20{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #fe89bd;
}

.color-gradient-21{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #fb7c85;
}

.color-gradient-22{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #f97258;
}

.color-gradient-23{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #f76a37;
}

.color-gradient-24{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #494848;
}


.color-gradient-25{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #494848;
}


.color-gradient-26{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #494848;
}

.color-gradient-27{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #494848;
}


.color-gradient-28{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #494848;
}


.color-gradient-29{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #494848;
}


.color-gradient-30{
    margin-right: 3px;
    width: var(--colors-width);
    height: var(--colors-height);
    border-radius: var(--colors-radius);
    background-color: #494848;
}

.footer-last-text{
    color: gray;
    margin: 2% 0 5% 0;
}

.ui-box-3{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background: linear-gradient(to bottom, #ffffff, #E4BBE2);
    width: 380px;
    border-radius: 30px;
    position: absolute;
    top: 50%;
    left: 15%;
    text-align: center;
}

.chain-image-container{
    text-align: center;
}

.chain-image{
    width: 50%;
}

.chain-image:hover{
    animation: imgRotation 1s linear ;
}

@keyframes imgRotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ui-box-3 h2{
    text-align: center;
}

.ui-box-3 p{
    color: #8D8993;
    width: 80%;
    margin-left: 10%;
}

.ui-box-3 button{
    background-color: #0e0d0d;
    color: white;
    width: 80%;
    height: 60px;
    border-radius: 20px;
    margin-bottom: 5%;
}

.ui-box-3 button:hover{
    background-color: #474747;
}

.ui-box-4{
    position: relative;
    top: 0;
    left: 18%;
    width: 380px;
    border-radius: 30px;
    background-color: #f5f5f5;
    margin-left: 4%;
}

.ui-box-4 header{
    display: flex;
    margin: 0 5%;
    justify-content: space-between
}

.ui-box-4 header h2{
    font-weight: 500;
}

.ui-box-4 header button{
    align-items: center;
    justify-content: space-between;
    margin-top: 19.92px;
    display: flex;
    width: 100px;
    height: 30px;
    border-radius: 10px;
    background-color: #d6d6d6;
    border: 1px solid rgb(80, 47, 47);
}

.ui-box-4 header button img{
    width: 18%;
}

.ui-box-4 header button p{
    margin: 0;
    font-weight: 500;
}

.income-distribution{
    display: flex;
    flex-wrap: wrap;
    margin: 0 5%;
}

.month-income{
    font-size: 150%;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 0;
}

.month-measured{
    color: gray;
    margin-top: 0;
    font-size: 120%;
    margin-right: 50%;
}

.color-bar-1{
    height: var(--color-bar-height);
    border-radius: var(--color-bar-radius);
    width: 20%;
    background-color: #3c94f7;
    margin-left: 17%;
}

.color-bar-2{
    background-color: #ff91e0;
    height: var(--color-bar-height);
    border-radius: var(--color-bar-radius);
    width: 15%;
    margin-left: 1%;
}

.color-bar-3{
    background-color: #fdbd12;
    height: var(--color-bar-height);
    border-radius: var(--color-bar-radius);
    width: 5%;
    margin-left: 1%;
}

.color-bar-4{
    background-color: #f76a37;
    height: var(--color-bar-height);
    border-radius: var(--color-bar-radius);
    width: 10%;
    margin-left: 1%;
}

.income-month-separator{
    width: 80%;
    color: gray;
}

.color-bar-5{
    height: var(--color-bar-height);
    border-radius: var(--color-bar-radius);
    width: 10%;
    background-color: #3c94f7;
    margin-left: 15%;
}

.color-bar-6{
    background-color: #ff91e0;
    height: var(--color-bar-height);
    border-radius: var(--color-bar-radius);
    width: 25%;
    margin-left: 1%;
}

.color-bar-7{
    background-color: #fdbd12;
    height: var(--color-bar-height);
    border-radius: var(--color-bar-radius);
    width: 15%;
    margin-left: 1%;
}

.color-bar-8{
    background-color: #f76a37;
    height: var(--color-bar-height);
    border-radius: var(--color-bar-radius);
    width: 2%;
    margin-left: 1%;
}