.update-page {
    margin-top: 100px;
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.moon-red {
    color: red;
}

.group-mounthly {
    font-size: 12px;
}

.name-Description {
    font-size: 20px;
    margin-top: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}


progress {
    opacity: 0;
}

.progress-element {
    width: 500px;
    margin: 0 0 10px;
}

.progress-container {
    position: relative;
    background: #eee;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
}

.progress-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: rgba(39, 142, 226, 0.993);
}

.progress-element--html .progress-container::before {
    animation: progress-html 1s ease-in forwards;
}

.progress-element--css .progress-container::before {
    animation: progress-css 1s ease-in forwards;
}

.progress-element--javascript .progress-container::before {
    animation: progress-javascript 1s ease-in forwards;
}

.progress-label {
    position: relative;
}

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.progress-label::after {
    counter-reset: num var(--num);
    content: counter(num) "%";
    position: absolute;
    top: 0;
    right: 0;
}

.progress-element--html .progress-label::after {
    animation: progress-text-html 1s ease-in forwards;
}

@keyframes progress-html {
    to {
        width: 95%;
    }
}

@keyframes progress-javascript {
    to {
        width: 65%;
    }
}

@keyframes progress-text-html {
    to {
        --num: 95;
    }
}


.icon-minimize {
    padding-left: 10px;
}

.from-add {
    cursor: pointer;
    font-size: 12px;

}

.sl-font {
    font-size: 11px;
    width: 90px;
}

.sl-size {
    font-size: 11px;
    width: 65px;
}

.example-calendar {
    font-size: 12px;
}