#wrapper {
    overflow: hidden;
}

#appArea {
    display: none;
}

#signInArea {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto auto 1fr auto;
    height: 100%;
    width: 100%;
    overflow: hidden;

    h1 {

        grid-row: 2;

         img {
            width: 90%;
            max-width: 400px;
            display: block;
            margin: 0px auto;
        }
    }

    #welcomeText {
        grid-row: 3;
        font-size: 14px;
        margin: 0px 24px;
    }

    #signInButtonHolder {
        grid-row: 4;
        text-align: center;
        margin: 24px;
    }

    #footerArea {
        grid-row: 6;
        font-size: 12px;
        opacity: 0.8;
        text-align: center;
        margin-bottom: 24px;
    }
}

.signedIn #signInArea {
    display: none;
}

.signedIn #appArea {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    height: 100%;
    width: 100%;
}