.loginPage { padding: 8% 0 0; margin: auto; max-width: 600px } .form { position: relative; z-index: 1; background: #FFFFFF; margin: 0 auto 100px; padding: 45px; text-align: center; border-radius: 20px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } .form input { border-radius: 5px; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 20px; box-sizing: border-box; font-size: 18px; } .button { position: relative; outline: 0; background: #0081ff; width: 100%; border: 0; padding: 15px; color: #FFFFFF; border-radius: 50px; font-size: 20px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; } .button:hover,.button:active,button:focus { background: #0000ff; } .button:disabled { background: gray; } .buttonText { color: #ffffff; transition: all 0.2s; } .buttonLoading .buttonText { visibility: hidden; opacity: 0; } .buttonLoading::after { content: ""; position: absolute; width: 20px; height: 20px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 4px solid transparent; border-top-color: #ffffff; border-radius: 50%; animation: button-loading-spinner 1s linear infinite; } @keyframes button-loading-spinner { from { transform: rotate(0turn); } to { transform: rotate(1turn); } } #responseMessage { color: red; font-weight: bold; } body { background: #090979; /* fallback for old browsers */ background: rgb(9,9,121); background: linear-gradient(90deg, rgba(0,129,255,100) 0%, rgba(9,9,121,1) 50%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: Arial, Helvetica, sans-serif; font-size: 18px; } @media only screen and (max-width: 1000px), only screen and (max-device-width: 1000px){ .button { font-size: 40px; } .form input, body { font-size: 35px; } .buttonLoading::after { width: 40px; height: 40px; } }