*{
    margin: 0;
    padding: 0;
}

.flex-container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    width: inherit;
    height: inherit;
}
h1{
    padding: 24px 24px;
}
.outbox{
    display: flex;
    flex-direction: row;
    flex-wrap: inherit;
    justify-content: center;
    align-content: center;
    align-items: center;
    border: 10px solid #94A3B8;
    width: 260px;
    height: 260px;
    border-radius: 100%;
    margin-top: 100px;

/*    animation*/
}
.svg{
    position: relative;
    top: -260px;
    width: 260px;
    height: 260px;
}
.cls{
    fill:none;
    stroke:#94A3B8;
    stroke-linecap: round;
    stroke-miterlimit:10;
    stroke-width:10px;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transform: rotate(270deg);
    transform-origin: 50% 50%;

}
.run-anim{
    -webkit-animation-name: dash;
    -moz-animation-name: dash;
    -o-animation-name: dash;
    animation-name: dash;
    animation-duration: 0s;
    animation-play-state: paused;
    animation-fill-mode: none;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@keyframes dash {
    0%{
        stroke: #55687D;
        stroke-dashoffset: 800;
    }
    100%{
        stroke: #55687D;
        stroke-dashoffset: 0;
    }
}




@keyframes ani {
    0%{
        transform: scale(1,1);
    }
    100%{
        transform: scale(0.9,0.9);
    }
}