@media screen and (max-width: 800px){

    .profileEditContainer{
        width: 500px;
        box-sizing: border-box;
    }

    .trueBishop{
        height: 100px;
    }

    .knightpOnlyLogo{
        height: 100px;
        animation: smallKnightSlide ease-in-out 0.7s;
        left: 0px;
    }

    .rookOnlyLogo{
        height: 95px;
        right: 0px;
        top: 5px;
        animation: smallRookSlide ease-in-out 0.7s;
    }

    @keyframes smallKnightSlide {
        0%{
            opacity: 0;
            transform: translateX(50px);
        }

        100%{
            opacity: 0.5;
        }
    }

    @keyframes smallRookSlide {
        0%{
            opacity: 0;
            transform: translateX(-50px);
        }

        100%{
            opacity: 0.5;
        }
    }

    .loadingScreen{
        width: 100%;
    }

    .loadingScreenContainer{
        width: 600px;
        margin: auto;
        padding: 0px;
        box-sizing: border-box;
    }

    .liniarBoard{
        width: 600px;
        margin: auto;
        box-sizing: border-box;
    }

}