.progress-1-p {
    margin-top: var(--space-small);

    font-size: var(--fs-h4);
    text-align: center;
    color: #3B3B3B;
    text-shadow: 3px 5px 10px rgba(0, 0, 0, .2);
}

.flex-progress-1 {
    margin-top: var(--space-medium);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-small);
}

.progress-1-elem {
    height: var(--hei-pasi);
    width: var(--wid-pasi);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: var(--space-small);

    text-shadow: 3px 5px 10px rgba(0, 0, 0, .2);
    
    background: white;
    border-radius: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .2);
}

.progress-1-elem i {
    color: #00561B;
}
.progress-1-elem h5 {
    margin-top: var(--space-xsmall);

    font-size: var(--fs-body);
    text-align: center;
    color: #00561B;
}
.progress-1-elem h4 {
    margin-top: var(--space-xsmall);

    font-size: var(--fs-h4);
    text-align: center;
    color: #00561B;
}
.progress-1-elem p {
    margin-top: var(--space-xsmall);

    font-size: var(--fs-body);
    text-align: center;
    color: #00561B;
}
.progress-1-elem a {
    margin-top: auto;
}
.progress-1-elem button {
    padding: var(--space-xsmall);

    font-size: var(--fs-h4);
    font-weight: bold;
    color: white;

    background: #3390D7;

    border-style: solid;
    border-width: 4px;
    border-color: #3390D7;
    border-radius: 6px;
   
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);

    transition: .2s;
}
.progress-1-elem button:hover {
    transform: scale(105%);
    background: #FCBD00;
    border-color: #FCBD00;
    transition: .2s;
}

h5.completed, h4.completed, p.completed, h5.locked, h4.locked, p.locked {
    color: grey;
}
button.completed, button.locked{
    background: grey;
    border:grey;
}
button.completed:hover, button.locked:hover {
    background: grey;
    border-color: grey;
}