@font-face {
    font-family: "hel-med";
    src: url(../fonts/helvetica/HelveticaNowDisplay-Medium.ttf);
}
@font-face {
    font-family: "hel-lig";
    src: url(../fonts/helvetica/HelveticaNowDisplay-Light.ttf);
}
@font-face {
    font-family: "hel-reg";
    src: url(../fonts/helvetica/HelveticaNowDisplay-Regular.ttf);
}
@font-face {
    font-family: "hel-blk";
    src: url(../fonts/helvetica/HelveticaNowDisplay-Black.ttf);
}
@font-face {
    font-family: "hel-bold";
    src: url(../fonts/helvetica/HelveticaNowDisplay-Bold.ttf);
}
:root
{
    --primary: #090909;
    --secondary: #dadada; 
    --accent: #610000;
    --prog: 0%;
    scroll-behavior: auto !important;
}

body
{
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    background-color: var(--primary) !important;
}
.loader-wrapper
{
    width: 100%;
    height: 100vh;
    background-color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    overflow: hidden;
    transition: .3s ease-in;
    z-index: 999;
    top: 0;
}
.loader
{
    width: 100%;
    text-align: center;
    transition: .5s;
}
.loader .loader-text
{
    font-size: 40px;
    font-family: hel-bold;
    color: #b9b9b9;
    position: relative;
    display: inline-block;
    line-height: 1;
}
.loader .loader-text::before
{
    content: "AliMetal";
    color: var(--primary);
    position: absolute;
    width: var(--prog);
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    transition: 0.5s ease-out;
}
.loader-status
{
    font-family: hel-lig;
    font-size: 12px;    
    display: block;
    transition: .1s;
}