@font-face {
    font-family: 'myFont';

    src: url('font.ttf');

}

.hidden {

    display: none;
    position: absolute;
    top: 0;

}

.virtual-keyboard {

    position: fixed;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.keyboard-container {
    display: flex;
}

.arrow {
    width: 5rem;
    height: 5rem;
    background-color: #8ca5b627;
    color: #fff;
    text-align: center;
    line-height: 50px;
    margin: 5px;
    cursor: pointer;
}


/* nav {
    display: flex;
    align-items: center

} */

body {

    background-image: url("sprite/laser.png");


    background-color: black;
    margin: 0%;
    margin-top: 0%;
    color: aliceblue;

}

h2 {
    text-align: center
}



.label-input-container {

    width: 100%;
    display: flex;
    justify-content: flex-end;

}

.grey-filter {
    height: 100%;
    background-color: rgba(40, 40, 48, 0.38);
    display: flex;


}

.canva-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-background {
    /* height: 100%; */
    background-color: rgba(40, 40, 48, 0.50);
    background-image: url("background.png");
    /* background-size: auto; */
    background-position: center center;
    background-repeat: no-repeat;

}

.login-reg-box {
    background-color: rgba(115, 115, 131, 0.658);
    margin: auto;
    padding: 2rem 4rem;
    border: 2px solid rgba(42, 43, 39, 0.87);
}



.error {
    color: rgb(175, 0, 0)
}