body {
    background-color: black;
    color: white;
    padding: 0;
    margin: 0;
}

.parent {
    position: relative;
    width: 100%;
    height: 90vh;
    background-color: transparent;
    border-bottom: 5px solid;
    list-style-type: none;
}

.parent h2 {
    margin: 3px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    /* left: 45%; */
}

.parent-li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
}

.parent .parent-li li {
    position: relative;
    width: 15%;
    height: 98%;
}

.parent .parent-li li span {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 1px;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.parent .parent-li li .span-1 {
    background-color: rgb(231, 102, 27);
    box-shadow: inset 2px 2px 3px #a2a3b4, inset -2px -2px 3px #545255;
    width: 100%;
    height: 5%;
    animation: span-1 4s;
}

.parent .parent-li li .span-1 h3 {
    margin: 0;
    text-align: center;
    transform: translateY(-105%);
}

#number-1 {
    text-align: center;
    transform: translateY(-50%);
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

@keyframes span-1 {
    0% {
        height: 0%;
    }
    100% {
        height: 5%;
    }
}

.parent .parent-li li .span-2 {
    background-color: rgb(0, 255, 64);
    box-shadow: inset 2px 2px 3px #a2a3b4, inset -2px -2px 3px #545255;
    width: 100%;
    height: 30%;
    animation: span-2 4s;
}

.parent .parent-li li .span-2 h3 {
    margin: 0;
    text-align: center;
    transform: translateY(-105%);
}

#number-2 {
    text-align: center;
    transform: translateY(-50%);
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

@keyframes span-2 {
    0% {
        height: 0%;
    }
    100% {
        height: 30%;
    }
}

.parent .parent-li li .span-3 {
    background-color: rgb(23, 20, 192);
    box-shadow: inset 2px 2px 3px #a2a3b4, inset -2px -2px 3px #545255;
    width: 100%;
    height: 58%;
    animation: span-3 4s;
}

.parent .parent-li li .span-3 h3 {
    margin: 0;
    text-align: center;
    transform: translateY(-105%);
}

#number-3 {
    text-align: center;
    transform: translateY(-45%);
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

@keyframes span-3 {
    0% {
        height: 0%;
    }
    100% {
        height: 58%;
    }
}

.parent .parent-li li .span-4 {
    background-color: rgb(165, 42, 134);
    box-shadow: inset 2px 2px 3px #a2a3b4, inset -2px -2px 3px #545255;
    width: 100%;
    height: 20%;
    animation: span-4 4s;
}

.parent .parent-li li .span-4 h3 {
    margin: 0;
    text-align: center;
    transform: translateY(-105%);
}

#number-4 {
    text-align: center;
    transform: translateY(-50%);
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

@keyframes span-4 {
    0% {
        height: 0%;
    }
    100% {
        height: 20%;
    }
}

.parent .parent-li li .span-5 {
    background-color: rgb(255, 0, 0);
    box-shadow: inset 2px 2px 3px #a2a3b4, inset -2px -2px 3px #545255;
    width: 100%;
    height: 100%;
    animation: span-5 4s;
}

.parent .parent-li li .span-5 h3 {
    margin: 0;
    text-align: center;
    transform: translateY(-105%);
}

#number-5 {
    text-align: center;
    transform: translateY(-50%);
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

@keyframes span-5 {
    0% {
        height: 0%;
    }
    100% {
        height: 100%;
    }
}