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

.page-form-container h2 {
    margin-top: 0;
    text-align: center;
    font-size: 2em;
    margin-bottom: 4dvh;
    font-weight: 400;
    font-family: Outfit, Helvetica, sans-serif;
}

.page-form-container {
    width: 100%;
    border-radius: 20px;
    /*box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);*/
    /*box-shadow: 0 2px 10px 0 rgba(255,255,255, 1), 0 6px 20px 0 rgba(255,255,255, 1);*/
    /*border: 1px solid var(--primary-color);*/
    position: relative;
    font-size: 17px;
    /*background: rgba(255, 255, 255, 0.4);*/
    /*background-color: var(--black-white-with-theme);*/
    /*background-color: var(--background-accent-3-color);*/
    max-width: 500px;
    padding: 30px 30px;
    /*margin: 10vh 0;*/
    margin: 9dvh auto;
    /*box-shadow: 5px -5px 0px 0 var(--primary-color);*/
}

input[type="submit"] {
    float: right;
}

.form-input-div input:not([type="submit"]) {
    /*background-color: rgba(255, 255, 255, 0.5) !important;*/
    /*box-shadow: -3px 4px 0px 0 var(--primary-color) !important;*/
    /*outline: none !important;*/
    /*,0 6px 0px 0 var(--primary-color)*/
}
/*input:not([type="submit"]):hover, */
input:not([type="submit"]):focus {
    /*box-shadow: -1px 1px 0 2px var(--primary-color)!important;*/
    /*box-shadow: 0px 4px 0px 0 var(--primary-color),0 0 60px 0px var(--border-color) !important;*/
    /*outline: 2px solid var(--primary-color) !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);
    background: var(--second-background-color);
    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 (max-width: 641px) {
    body {
        justify-content: start;
    }

    h1 {
        margin-top: 10vh;
    }
}