*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: white;
}

html,body{
    width: 100%;
    height: 100%;
}
/* #0b0b0b0 */
@font-face {
    font-family: Plainlight;
    src: url('Font/plain-light-webfont.ttf');
}
@font-face {
    font-family: SilkSerif;
    src: url('Font/silkserif-lightitalic-webfont.ttf');
}

.font-plain {
  font-family: 'Plainlight';
}
.font-silk {    
  font-family: 'SilkSerif';
}
.Now{
    -webkit-animation: anime 2.5s infinite;
            animation: anime 2.5s infinite;
}

@-webkit-keyframes anime {
    0% {
        opacity: 1;
        font-family: Plainlight;
        -webkit-text-stroke: 1px #fff;
        color: #fff;
        font-weight: 500;
    }
    48% {
        opacity: 0;
        font-family: Plainlight;
        -webkit-text-stroke: 1px #fff;
        color: #fff;
        font-weight: 500;
    }
    50% {
        font-family: SilkSerif;
        -webkit-text-stroke: 1px #fff;
        color: transparent;
        font-weight: 500;
        opacity: 1;
    }
    100% {
        opacity: 0;
        font-family: SilkSerif;
        -webkit-text-stroke: 1px #fff;
        color: transparent;
        font-weight: 500;
    }
}

@keyframes anime {
    0% {
        opacity: 1;
        font-family: Plainlight;
        -webkit-text-stroke: 1px #fff;
        color: #fff;
        font-weight: 500;
    }
    48% {
        opacity: 0;
        font-family: Plainlight;
        -webkit-text-stroke: 1px #fff;
        color: #fff;
        font-weight: 500;
    }
    50% {
        font-family: SilkSerif;
        -webkit-text-stroke: 1px #fff;
        color: transparent;
        font-weight: 500;
        opacity: 1;
    }
    100% {
        opacity: 0;
        font-family: SilkSerif;
        -webkit-text-stroke: 1px #fff;
        color: transparent;
        font-weight: 500;
    }
}

.cursor{
    mix-blend-mode: difference;
    z-index: 99;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    pointer-events: none;
    will-change: transform;             
}


#hero3 h1{
    border-bottom: 0.3vw solid white;
    padding: 0.5vw;
    z-index: 999;
    /* transition: all ease 0.3s; */
}
#hero3 :nth-child(2):hover{
    -webkit-text-stroke: 2px white; 
    
}
#hero3 :nth-child(2){

    border-bottom: none;
}

#hero3 h1:hover{
    -webkit-text-stroke: 2px white ;
    color: transparent;
    font-weight: 500;
    border-bottom: 0.3vw solid transparent;
}

.elem{
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
    line-height: 1.5
}
.elem .marquee{
    display: inline-block;
    white-space: nowrap;
    -webkit-animation: marquee 40s linear infinite;
            animation: marquee 40s linear infinite;
}
.elem h1{
    -webkit-text-stroke: 1px  #fff;
    font-size: 7vw;
    font-weight: 400 ;
    text-transform: uppercase;
    color: transparent;
    display: inline-block; 
    margin-left: 1vw;
    -webkit-animation: none;
            animation: none;
    
}


@-webkit-keyframes marquee {
    0%{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100%{
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}


@keyframes marquee {
    0%{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100%{
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}




.elem2{
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
    line-height: 1.1
}
.elem2 .marquee2{
    display: inline-block;
    white-space: nowrap;
    -webkit-animation: marquee2 40s linear infinite;
            animation: marquee2 40s linear infinite;
}
.elem2 h1{
    -webkit-text-stroke: 1px  #fff;
    font-size: 7vw;
    font-weight: 400 ;
    text-transform: uppercase;
    color: transparent;
    display: inline-block; 
    margin-left: 1vw;
    -webkit-animation: none;
            animation: none;
  
}


@-webkit-keyframes marquee2 {
    100%{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    0%{
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}


@keyframes marquee2 {
    100%{
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    0%{
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}


._canvas_container{
    z-index: 999999 !important;
    pointer-events: none;
}

.circletext{
    scale: 0;
}
.circletext p{
    scale: 0;
}