:root{

    --text:#F2F2F2;
    --accent:#3DD8FF;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    height:100%;

    background:transparent;
    overflow:hidden;

}

body{

    display:flex;

    align-items:flex-start;
    justify-content:flex-start;

    padding:40px;

    font-family:"Barlow Condensed",sans-serif;

}

#goal{

    display:flex;
    align-items:center;

    gap:12px;

}

#slashes{

    display:flex;

    gap:5px;

    flex-shrink:0;

}

#slashes span{

    width:7px;
    height:40px;

    background:var(--accent);

    border-radius:2px;

    transform:skewX(-22deg);

}

#mask{

    position:relative;

    width:500px;
    height:42px;

    overflow:hidden;

}

#mask::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:14px;
    height:100%;

    background:transparent;

    z-index:5;

}

.line{

    position:absolute;

    left:0;
    top:0;

    height:42px;

    font-size:34px;

    font-style:italic;

    font-weight:700;

    color:var(--text);
}

.label{
    color:var(--text);
}

.number{
    color:var(--accent);
    margin-left:24px;
}

.content{

    display:inline-flex;

    align-items:center;

    white-space:nowrap;

    width:max-content;

    transform:translate3d(0,0,0);

}