@font-face {
    font-family:"skate-parx" ;
    src: url('../fonts/skateparx/Skateparx\ Demo.otf') format("truetype") ;
}


*{
   padding:0;
   margin: 0;
}

body{
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    height: 100vh;
    background: linear-gradient(to top ,rgba(128, 128, 128,0.3),rgb(0, 0, 0)23%),url("../img/skater.png") repeat-x bottom;
    background-size: 70ex;
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.loading{
    width: 22em;
    height: 12em;
    border-bottom: 4px dashed rgb(153, 151, 151) ;
} 

.imgLoading{
    height: 12em;
    width: 0%;
    background:url(../img/skater1.png);
    background-position: start;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 4px dashed yellow ;
}
.loading .percent{
    color: yellow;
    font-family:'Open Sans', 'Helvetica Neue', sans-serif;
    justify-content: baseline;
    position: absolute;
    display: flex;
    align-items: end;
    justify-content: center;
    width: 9em;
    height: 4.5em;
    font-size: 2.6em;   
}
.textloading{
    justify-content: center;
    align-self:center;
    text-align: center;
    font-size: 3.5em;
    line-height: 1.5em;
    font-weight: 900;
    font-family: 'skate-parx';
    letter-spacing: 4px;
    transition: all .3s;
    color:rgb(228, 228, 228) 
}

.completed{
    height: 100px;
    width: 100%;
    justify-content: center;
    align-self:center;
    text-align: center;
    font-weight: 900;
    font-family: 'skate-parx';
    letter-spacing: 6px;
    animation: pulse;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    color: yellow;
    font-size: 3em;
}


@keyframes pulse {
    0%{
        font-size: 2.2em;
    }
    50%{
        font-size: 3.2em;
        letter-spacing: 4px;
        color: rgb(251, 255, 0);
    }
    100%{
        font-size: 2.2em;
    }
}

.infos{
    color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 2em;
    font-size: 3em;
    margin-top: .5em;
    padding: .2em;
    box-sizing: border-box;
    font-family: 'skate-parx';
}
.cardText{
    border-right:2px solid;
    border-left:2px solid;
    font-size:.6em;
    text-align: left;
    padding: .4em;
    box-sizing: border-box;
    
}