/*mobile first min-width sets base and content is adapted to computers.*/
@media (min-width: 100px) {
    body {
        display: flex;
        align-items: center;
        flex-direction: column;
        background: linear-gradient(to bottom right, #1dc6fd 0%, #e589b7 90%);
        padding: 0 10px;
        /*background: linear-gradient(to top left, #2e3e50 20%, #ffffff 100%);*/
        /*background: linear-gradient(to top left, #2e3e50 45%, #ffffff 45%);*/
    }

    h2 {
        color: var(--primary-color);
        font-size: 2.3em;
        letter-spacing: 3px;
        text-align: center;
        margin-top: 10vh;
    }

    .page-form-container {
        background: rgba(255, 255, 255, 0.4);
        max-width: 500px;
    }

    input, input:hover, input:focus {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    input[type="submit"]:not([disabled]):hover {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    #form-general-error-msg {
        border-radius: 15px;
        color: #951212;
        /*box-shadow: 0px 3px 15px rgba(1, 1, 1, 0.15);*/
        background: rgba(255, 255, 255, 0.5);
        border-bottom: 3px solid #951212;
    }

    #discrete-login-toggle-btn {
        max-height: 0;
        overflow: hidden;
        display: inline-block;
        transition: max-height 0.3s ease-out;
        /*Float left on the button is to prevent a jump when button display none is removed so that it doesn't affect
        the position of the password input div*/
        float: left;
    }

    #password-input-div {
        transition: max-height 0.3s ease-out;
        /*Float left and width 100% are because previous element has also float left and password input div would
        not be below discrete login btn but on the right side of it. If both have float left its fine.*/
        float: left;
        width: 100%;
    }

    #password-input-div.input-div-collapsed {
        max-height: 0;
        overflow: hidden;
        bottom: 0;
    }

    #password-input-div.input-div-expanded {
        animation: openPasswordInputDiv 0.3s ease-out;
    }

    @keyframes openPasswordInputDiv {
        0% {
            max-height: 0;
            overflow: hidden;
        }
        99% {
            overflow: hidden;
        }
        /*Value here doesn't matter much*/
        100% {
            max-height: 120px;
        }
    }
}

@media (min-width: 641px) {
    body {
        justify-content: center;
    }

    h2 {
        margin-top: -80px;
    }
}