*, *::before, *::after {
    box-sizing: border-box;
}

body{
    padding: 0;
    margin: 0;
}

.skills-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.progress-bar {
    width: 500px;
    height: 3em;
    background-color: #111;
    border-radius: 1.5em;
    color: whitesmoke;
    position: relative;
}

@keyframes load {
    from {width: 0;}
    to {width: --width;}
}

.progress-bar::before {
    content: attr(data-label);
    display: flex;
    align-items: center;
    position: absolute;
    left: 0.5em;
    top: 0.5em;
    bottom: 0.5em;
    width: calc(var(--width, 0) * 1%);
    min-width: 2rem;
    max-width: calc(100% - 1em);
    background-color: #bc4b51;
    border-radius: 1em;
    padding: 1em;

    animation-name: load;
    animation-duration: 1s;
}