@font-face {
    font-family: 'LocalArialRegular';
    src: url('../fonts/ArialRegular.TTF');
}

@font-face {
    font-family: 'LocalArialBold';
    src: url('../fonts/ArialBold.TTF');
}

*{
}

html,body{
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ? SCENE 1  */

#scene1>video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ? SCENE 2 */

#scene2{
    height: 100%;
    width: 100%;
    background-color: #000;

}

#scene2>#background>img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#scene2>#bar{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    z-index: 1;
}
#bar>img{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#input1{
    white-space: break-spaces !important;
    position: absolute;
    top: 10%;;
    left: 15%;
    width: 84%;
    height: 22%;
    /* border: 1px solid red; */
}

#input1>span{
    color: #fff;
    font-family: 'LocalArialBold';
    font-weight: 900;
    line-height: normal;
    width: 100%;
    height: 100%;
    z-index: 3;
}
#input2{
    white-space: break-spaces !important;
    position: absolute;
    top: 33%;
    left: 15%;
    height: 53%;
    width: 83%;
    /* border: 1px solid red; */
}
#input2>span{
    color: #fff;
    font-family: 'LocalArialRegular';
    font-weight: 900;
    line-height: normal;
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
    z-index: 3;
}