@media screen and (max-width:500px) {
            .login-page-container {
                height: 100%;
                background: #002A61;
                color: white;
                padding: 70px 10px 150px;
                padding-left: 30%;
                padding-right: 30%;
                border-bottom: 1px solid rgba(255, 255, 255, 0.425);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .login-page-content h1 {
                text-align: center;
                font-size: 28px !important;
            }
            .form-container {
                background-color: rgba(0, 0, 0, 0.11);
                padding: 40px 10px;
                border-radius: 6px;
                padding: 10px 15px;
                padding-top: 35px;
                box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5);
                width: 300px;
            }
            .fc-parent {
                margin-top: -40px !important;
            }
            .login-page-content h1 {
                padding: 20px 0;
            }
            .form-content .buttons {
                display: flex;
                flex-direction: column;
                gap: 15px;
                padding: 0 10px;
            }
            .form-content .buttons button {
                /* font-size: 20px !important; */
                padding: 10px 0;
            }
            .form-content .buttons button:first-child {
                background-color: white;
                color: black;
            }
            .form-content .buttons button:first-child svg {
                color: #E34133;
                font-size: inherit;
                width: 25px !important;
                height: 20px !important;
                margin-right: 3px;
            }
            .form-content .buttons button:last-child svg {
                font-size: inherit;
                width: 25px !important;
                height: 20px !important;
                margin-right: 6px;
                /* padding-top: 10px; */
            }
            .form-content .buttons button:last-child {
                background-color: #3B5998;
            }
            .inputs {
                margin-top: 40px;
                border-top: 1px solid rgba(255, 255, 255, 0.384);
                padding: 0 15px;
                position: relative;
            }
            .inputs ::before {
                content: "or";
                width: 30px;
                text-align: center;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: black;
                color: white;
                border-radius: 50%;
                position: absolute;
                left: calc(50% - 20px);
                top: -15px;
                z-index: 1;
                cursor: default;
                font-size: 14px !important;
            }
            .inputs div {
                margin: 20px 0;
            }
            .inputs div label {
                font-size: 18px;
            }
            .inputs div input {
                font-size: 16px;
                width: 100% !important;
                padding: 10px 10px;
                background-color: transparent !important;
                outline: none;
                border: none;
                border-bottom: 1px solid white;
                color: white;
                letter-spacing: 1px;
            }
            .inputs div input:last-child {
                letter-spacing: 0 !important;
            }
            .login-btn {
                display: flex;
                flex-direction: column;
            }
            .login-btn button {
                padding: 10px 0;
                margin-top: 20px;
                font-size: 22px !important;
                font-weight: bold;
            }
            .login-btn a {
                margin-top: 20px;
                font-size: 16px !important;
            }
            .inputs div {
                margin-top: 20px;
            }
            .inputs div p {
                font-size: 20px !important;
                margin-top: 20px !important;
                margin-bottom: 0 !important;
            }
            .inputs div p a {
                text-decoration: none;
            }
        }
        
        @media screen and (min-width: 0px) and (max-width: 340px) {
            .login-page-container {
                height: 100%;
                background: #002A61;
                color: white;
                padding: 70px 10px 150px;
                padding-left: 30%;
                padding-right: 30%;
                border-bottom: 1px solid rgba(255, 255, 255, 0.425);
                display: flex;
                justify-content: center;
                align-items: center !important;
            }
            .login-page-content {
                margin-top: 20px !important;
            }
            .login-page-content h1 {
                text-align: center;
                font-size: 22px !important;
            }
            .form-container {
                background-color: rgba(0, 0, 0, 0.11);
                padding: 40px 10px;
                border-radius: 6px;
                padding: 10px 15px;
                padding-top: 35px;
                box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5);
                width: 270px;
            }
            .fc-parent {
                margin-top: -40px !important;
            }
            .login-page-content h1 {
                padding: 20px 0;
            }
            .form-content .buttons {
                display: flex;
                flex-direction: column;
                gap: 15px;
                padding: 0 10px;
            }
            .form-content .buttons button {
                /* font-size: 20px !important; */
                padding: 10px 0;
            }
            .form-content .buttons button:first-child {
                background-color: white;
                color: black;
            }
            .form-content .buttons button:first-child svg {
                color: #E34133;
                font-size: inherit;
                width: 25px !important;
                height: 20px !important;
                margin-right: 3px;
            }
            .form-content .buttons button:last-child svg {
                font-size: inherit;
                width: 25px !important;
                height: 20px !important;
                margin-right: 6px;
                /* padding-top: 10px; */
            }
            .form-content .buttons button:last-child {
                background-color: #3B5998;
            }
            .inputs {
                margin-top: 40px;
                border-top: 1px solid rgba(255, 255, 255, 0.384);
                padding: 0 15px;
                position: relative;
            }
            .inputs ::before {
                content: "or";
                width: 30px;
                text-align: center;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: black;
                color: white;
                border-radius: 50%;
                position: absolute;
                left: calc(50% - 20px);
                top: -15px;
                z-index: 1;
                cursor: default;
                font-size: 14px !important;
            }
            .inputs div {
                margin: 20px 0;
            }
            .inputs div label {
                font-size: 18px;
            }
            .inputs div input {
                font-size: 16px;
                width: 100% !important;
                padding: 10px 10px;
                background-color: transparent !important;
                outline: none;
                border: none;
                border-bottom: 1px solid white;
                color: white;
                letter-spacing: 1px;
            }
            .inputs div input:last-child {
                letter-spacing: 0 !important;
            }
            .login-btn {
                display: flex;
                flex-direction: column;
            }
            .login-btn button {
                padding: 10px 0;
                margin-top: 20px;
                font-size: 22px !important;
                font-weight: bold;
            }
            .login-btn a {
                margin-top: 20px;
                font-size: 16px !important;
            }
            .inputs div {
                margin-top: 20px;
            }
            .inputs div p {
                font-size: 20px !important;
                margin-top: 20px !important;
                margin-bottom: 0 !important;
            }
            .inputs div p a {
                text-decoration: none;
            }
            .form-content .buttons button {
                font-size: 100% !important;
                padding-left: 5px !important;
                padding-right: 5px !important;
            }
        }
        
        @media screen and (min-width: 501px) and (max-width: 992px) {
            body button {
                font-size: 18px !important;
            }
            .login-page-container {
                height: 100%;
                background: #002A61;
                color: white;
                padding: 70px 10px 150px;
                padding-left: 30%;
                padding-right: 30%;
                border-bottom: 1px solid rgba(255, 255, 255, 0.425);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .login-page-content h1 {
                text-align: center;
                font-size: 28px !important;
            }
            .form-container {
                background-color: rgba(0, 0, 0, 0.11);
                padding: 40px 10px;
                border-radius: 6px;
                padding: 30px 35px;
                padding-top: 55px;
                box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5);
                width: 450px;
            }
            .fc-parent {
                margin-top: -40px !important;
            }
            .login-page-content h1 {
                padding: 20px 0;
            }
            .form-content .buttons {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            .form-content .buttons button {
                /* font-size: 20px !important; */
                padding: 10px 0;
            }
            .form-content .buttons button:first-child {
                background-color: white;
                color: black;
            }
            .form-content .buttons button:first-child svg {
                color: #E34133;
                font-size: inherit;
                width: 25px !important;
                height: 20px !important;
                margin-right: 3px;
            }
            .form-content .buttons button:last-child svg {
                font-size: inherit;
                width: 25px !important;
                height: 20px !important;
                margin-right: 6px;
                /* padding-top: 10px; */
            }
            .form-content .buttons button:last-child {
                background-color: #3B5998;
            }
            .inputs {
                margin-top: 40px;
                border-top: 1px solid rgba(255, 255, 255, 0.384);
                padding: 0 15px;
                position: relative;
            }
            .inputs ::before {
                content: "or";
                width: 40px;
                text-align: center;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: black;
                color: white;
                border-radius: 50%;
                position: absolute;
                left: calc(50% - 20px);
                top: -20px;
                z-index: 1;
                cursor: default;
            }
            .inputs div {
                margin: 20px 0;
            }
            .inputs div label {
                font-size: 18px;
            }
            .inputs div input {
                font-size: 16px;
                width: 100% !important;
                padding: 10px 10px;
                background-color: transparent !important;
                outline: none;
                border: none;
                border-bottom: 1px solid white;
                color: white;
                letter-spacing: 1px;
            }
            .inputs div input:last-child {
                letter-spacing: 0 !important;
            }
            .login-btn {
                display: flex;
                flex-direction: column;
            }
            .login-btn button {
                padding: 10px 0;
                margin-top: 20px;
                font-size: 22px !important;
                font-weight: bold;
            }
            .login-btn a {
                margin-top: 20px;
                font-size: 16px !important;
            }
            .inputs div {
                margin-top: 20px;
            }
            .inputs div p {
                font-size: 20px !important;
                margin-top: 20px !important;
                margin-bottom: 0 !important;
            }
            .inputs div p a {
                text-decoration: none;
            }
        }
        
        @media screen and (min-width: 993px) {
            body button {
                font-size: 18px !important;
            }
            .login-page-container {
                height: 100%;
                background: #002A61;
                color: white;
                padding: 70px 10px 150px;
                padding-left: 30%;
                padding-right: 30%;
                border-bottom: 1px solid rgba(255, 255, 255, 0.425);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .login-page-content h1 {
                text-align: center;
                font-size: 28px !important;
            }
            .form-container {
                background-color: rgba(0, 0, 0, 0.11);
                padding: 40px 10px;
                border-radius: 6px;
                padding: 30px 35px;
                padding-top: 55px;
                box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5);
                width: 600px;
            }
            .fc-parent {
                margin-top: -40px !important;
            }
            .login-page-content h1 {
                padding: 20px 0;
            }
            .form-content .buttons {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            .form-content .buttons button {
                /* font-size: 20px !important; */
                padding: 10px 0;
            }
            .form-content .buttons button:first-child {
                background-color: white;
                color: black;
            }
            .form-content .buttons button:first-child svg {
                color: #E34133;
                font-size: inherit;
                width: 25px !important;
                height: 20px !important;
                margin-right: 3px;
            }
            .form-content .buttons button:last-child svg {
                font-size: inherit;
                width: 25px !important;
                height: 20px !important;
                margin-right: 6px;
                /* padding-top: 10px; */
            }
            .form-content .buttons button:last-child {
                background-color: #3B5998;
            }
            .inputs {
                margin-top: 40px;
                border-top: 1px solid rgba(255, 255, 255, 0.384);
                padding: 0 15px;
                position: relative;
            }
            .inputs ::before {
                content: "or";
                width: 40px;
                text-align: center;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: black;
                color: white;
                border-radius: 50%;
                position: absolute;
                left: calc(50% - 20px);
                top: -20px;
                z-index: 1;
                cursor: default;
            }
            .inputs div {
                margin: 20px 0;
            }
            .inputs div label {
                font-size: 18px;
            }
            .inputs div input {
                font-size: 16px;
                width: 100% !important;
                padding: 10px 10px;
                background-color: transparent !important;
                outline: none;
                border: none;
                border-bottom: 1px solid white;
                color: white;
                letter-spacing: 1px;
            }
            .inputs div input:last-child {
                letter-spacing: 0 !important;
            }
            .login-btn {
                display: flex;
                flex-direction: column;
            }
            .login-btn button {
                padding: 10px 0;
                margin-top: 20px;
                font-size: 22px !important;
                font-weight: bold;
            }
            .login-btn a {
                margin-top: 20px;
                font-size: 16px !important;
            }
            .inputs div {
                margin-top: 20px;
            }
            .inputs div p {
                font-size: 20px !important;
                margin-top: 20px !important;
                margin-bottom: 0 !important;
            }
            .inputs div p a {
                text-decoration: none;
            }
        }
        
        .form-content .buttons button:last-child:hover {
            background-color: #3b5898b0 !important;
        }