#first{
                height: 602px;
                width: 100%;
                background-color: rgb(61, 51, 68);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .self{
                display: none !important;
            }

            #first > .enter{
                height: 300px;
                width: 300px;
                background-color: rgb(123, 107, 134);
            }

            #first > .enter > .image{
                height: 90%;
                width: 100%;
                border-radius: 50%;
                background: url(../images/ahmad.jpg) no-repeat 50%;
                background-size: cover;
            }

            #first > .enter > .pass{
                height: 10%;
                width: 99%;
            }

            #first > .enter > .pass > input{
                height: 100%;
                width: 100%;
                background-color: rgb(192, 188, 196);
                border: 0 none;
            }

            #first > .enter > .error{
                height: 30px;
                width: 300px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 17px;
                color: red;
                visibility: hidden;
            }

            #first > .enter > .sel{
                visibility: visible;
            }

            #first > .enter > .enter{
                height: 40px;
                width: 100px;
                margin-top: 20px;
                margin-left: 100px;
                background-color:rgb(123, 107, 134);
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                cursor: pointer;
            }