body{
    background-color: #e6e6e6;
    display: flex;
    justify-content: center;
}

#container{
    width:80%;
    margin : 5% 0 0 0;
    box-shadow: 8px 2px 8px 6px #fff066;
    padding:0;
    display: flex;
    flex-direction:column;
    & #login-container{
        display:flex;
        & #login-div {
            height:75vh;
            padding:0;
            background-color: #F7F2EE;
            padding:4% 8% 4% 8%;
            border-radius: 15px 0 0 15px;
            display: flex;
            flex-direction:column;
            justify-content:center;
            & h1 {
                text-align:center;
                color: #0A2942;
            }
            & #show-password{
                width: 5%;
            }
            & #forgotPasswordBtn {
                border:none;
                padding:0;
                color:blue;
                text-align:start;
                &:hover{
                    text-decoration:underline;
                    color:blue;
                    border:none;
                    background:transparent;
                    box-shadow:none;
                }
            }
        }
        & #sign-msg-container{
            height:75vh;
            text-align:center;
            color:white;
            background-color: #0A2942; /*navy blue*/
            padding:4% 8% 4% 8%;
            border-radius: 0 15px 15px 0;
            display: flex;
            flex-direction:column;
            justify-content:center;
            & a {
                text-decoration:none;
                &:hover {
                    color:#fff066;
                }
            }
        }
    }
    & #signin-container{
        display:none;
        & #signin-div{
            height:75vh;
            padding:0;
            background-color: #F7F2EE;
            padding:4% 8% 4% 8%;
            border-radius: 0 15px 15px 0;
            display: flex;
            flex-direction:column;
            justify-content:center;
            & h1 {
                text-align:center;
                color: #0A2942;
            }
            & #show-sign-password, #show-confirm-password {
                width: 5%;
            }
        }
        & #log-msg-container{
            height:75vh;
            padding:4% 8% 4% 8%;
            border-radius: 15px 0 0 15px ;
            text-align:center;
            color:white;
            background-color: #0A2942;
            display: flex;
            flex-direction:column;
            justify-content:center;
            & a {
                text-decoration:none;
                &:hover {
                    color:#fff066;
                }
            }
        }
    }

    & input, select, button {
        width: 100%;
        padding: 12px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    button:not(:disabled):hover {
        background-color: #0A2942;
        color: white;
        border: 1px solid #fff066;
        box-shadow: 0 0 3px 3px #fff066;
        cursor: pointer; /* optional, shows pointer only when enabled */
    }
}