html, body
{
    height: 100%;
    margin: 0;
    background-color: rgb(250, 250, 250);
    user-select: none;
}
    .app
    {
        display: flex;
        flex-direction: column;
    }
        .app-banner
        {
            height: 56px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: 'Roboto', sans-serif;
        }
            .banner-info
            {
                display: flex;
                margin-right: 35px;
                font-size: 15px;
                font-weight: 600;
            }
                .info-pukka
                {
                    display: flex;
                    align-items: center;
                    text-decoration: none;
                    color: rgb(110, 110, 110);
                }
                .info-contact
                {
                    display: flex;
                    align-items: center;
                    height: 32px;
                    margin-left: 21px;
                    padding-left: 21px;
                    box-shadow: -1px 0px 0 rgb(230, 230, 230);
                    text-decoration: none;
                    color: rgb(110, 110, 110);
                }
                .info-contact:hover,
                .info-pukka:hover
                {
                    cursor: pointer;
                    color: rgb(0, 100, 200);
                }
        .app-window
        {
            height: calc(100% - 56px);
            display: grid;
            grid-template-columns: minmax(60px, auto) minmax(auto, 970px) minmax(60px, auto);
        }
            .window-centre
            {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
                .centre-logo
                {
                    width: 75px;
                    height: 75px;
                }
                .centre-login
                {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 350px;
                    height: 420px;
                    margin-top: 50px;
                    outline: 1px solid rgb(230, 230, 230);
                    box-shadow: 
                        0px 2px 1px rgb(150, 150, 150),
                        1px 0px 1px rgb(150, 150, 150),
                        -1px 0px 1px rgb(150, 150, 150);
                }
                    .login-header
                    {
                        width: 310px;
                        height: 15px;
                        padding: 20px;
                        padding-bottom: 30px;
                        box-shadow: 0px 1px 0px rgb(230, 230, 230);
                        background-color: rgb(247, 247, 247);
                        font-family: 'Roboto', sans-serif;
                        font-size: 18px;
                        font-weight: 600;
                        color: rgb(50, 50, 50);
                    }
                    .login-icon
                    {
                        padding-top: 20px;
                        width: 150px;
                        height: 150px
                    }
                    .login-entry
                    {
                        display: flex;
                        flex-direction: column;
                        width: 87%;
                        font-family: 'Roboto', sans-serif;
                        font-size: 14px;
                        font-weight: 500;
                        letter-spacing: 0.5px;
                        color: rgb(10, 10, 10);
                    }
                        .entry-input
                        {
                            margin-top: 10px;
                            margin-bottom: 10px;
                            height: 30px;
                            border: 0px;
                            outline: 1px solid rgb(175, 175, 175);
                            border-radius: 1px;
                            padding-left: 10px;
                        }
                        .entry-input:focus
                        {
                            outline-color: rgb(0, 100, 200);
                        }
                        ::placeholder
                        {
                            font-size: 13px;
                            font-weight: 500;
                            color: rgb(100, 100, 100);
                            letter-spacing: 0.5px;
                            padding-left: 0px;
                        }
                    .login-enter
                    {
                        margin-top: 10px;
                        margin-bottom: 20px;
                        height: 30px;
                        border: 0px;
                        outline: 1px solid rgb(255, 230, 245);
                        border-radius: 1px;
                        font-family: 'Roboto', sans-serif;
                        font-size: 14px;
                        font-weight: 600;

                        color: rgb(25, 25, 25);
                        background-color: rgb(209, 164, 223);
                    }
                    .login-enter:hover
                    {
                        background-color: rgb(201, 135, 221);
                        cursor: pointer;
                    }
@media (max-width: 1000px) 
{   
    .app-banner
    {
        flex-direction: column;
        order: 1;
    }
    .banner-left
    {
        display: none;
    }
    .banner-info
    {
        margin-top: 30px;
        flex-direction: column;
        align-items: center;
        margin-right: 0px;
    }
    .info-pukka
    {
        padding-bottom: 10px;
    }
    .info-contact
    {
        margin-left: 0px;
        padding-left: 0px;
        box-shadow: 0px -1px 0 rgb(230, 230, 230);
    }
    .app-window
    {
        margin-top: 20px;
        order: 0;
    }
}